# Bootstrapping in Angular: How It Works Internally
Bootstrapping is a fundamental concept in AngularJS development. It is the process of loading an Angular application or module. Angular provides a way of bootstrapping web applications using the ng-app directive. In this article, we will delve into the inner workings of Angular’s bootstrapping process.
## The Bootstrapping Process
Angular bootstrapping can be a complicated process if you are not aware of the steps involved. The process begins by bootstrapping the application root module. The root module initializes all the necessary components and services required by the application.
### Step 1: Create the Root Module
The first step in bootstrapping an Angular application is to create the root module. The root module is responsible for defining the application’s components, directives, services, and filters. It is also responsible for managing dependencies between various modules.
Angular provides a function called `angular.module()` to create a module. In this function, we pass two arguments to the module. The first argument is the name of the module, and the second argument is an array of dependencies.
“`html
“`
In this code snippet, we create a root module named `myApp`.
### Step 2: Bootstrap the Root Module
Once we have created the root module, the next step is to bootstrap it. Angular provides two methods for bootstrapping the root module:
1. Manual Bootstrapping – Where we bootstrap the module manually using `angular.bootstrap()`.
2. Automatic Bootstrapping – Where we bootstrap the module automatically using the `ng-app` directive.
Manual bootstrapping is useful if we want to delay bootstrapping until we load a specific module or perform an operation. Automatic bootstrapping is useful when we want to bootstrap the module as soon as possible.
#### Manual Bootstrapping
To manually bootstrap the root module, we can use the `angular.bootstrap()` function.
“`html
“`
In this code snippet, we first create the root module (`myApp`). We then wait for the document to be ready before bootstrapping the module manually.
#### Automatic Bootstrapping
To automatically bootstrap the root module, we use the `ng-app` directive.
“`html
“`
In this code snippet, we bootstrap the root module (`myApp`) automatically using the `ng-app` directive.
### Step 3: Create the Main Controller
Once we have bootstrapped the root module, the next step is to create the main controller. The main controller is responsible for controlling the flow of the application.
AngularJS provides a function called `controller` to create a controller. In this function, we pass two arguments to the controller. The first argument is the name of the controller, and the second argument is a function that defines the controller’s behavior.
“`html
Hello, {{name}}!
“`
In this code snippet, we create the main controller (`mainCtrl`) and bind it to the `ng-controller` directive in the HTML code. The controller defines a variable called `name` and sets its value to `John`. The `ng-bind` directive in the HTML code binds the `name` variable to a text element.
## FAQ
### What is Angular bootstrapping?
Angular bootstrapping is the process of loading an Angular application or module.
### How do I create a root module in Angular?
You can create a root module in Angular using the `angular.module()` function. In this function, you pass two arguments to the module. The first argument is the name of the module, and the second argument is an array of dependencies.
### What is the main controller in Angular?
The main controller is responsible for controlling the flow of the application. It is created using the `controller` function provided by AngularJS.
### How do I bootstrap an Angular application manually?
You can bootstrap an Angular application manually using the `angular.bootstrap()` function provided by AngularJS.
### How do I bootstrap an Angular application automatically?
You can bootstrap an Angular application automatically using the `ng-app` directive provided by AngularJS.