Three phases of Angular life cycle
- The bootstrap phase
- Angular initializes its own necessary components
- Then, your module is initialized
- Your module is loaded
- Any dependencies are injected into your module and made available to code
within the module
- The HTML compilation phase
- Initially, when a web page is loaded, a static form of the DOM is loaded in the browser
- During the compilation phase, the static DOM is replaced with a dynamic DOM that
represents the Angular view
- Two parts:
- Traversing the static DOM and collecting all the directives
Angular built-in library or custom directive code
- The runtime data binding phase
- The runtime phase exists until the user reloads or navigates away from the current page
- Any changes in the model are reflected in the view
- Any changes in the view are directly updated in the model
- Note: Angular behaves differently from traditional methods of binding data.
- Traditional methods combine a template with data received from the engine
and then manipulate the DOM each time the data changes
- Angular compiles the DOM only once and then links the compiled template as necessary
(potentially makes the application more efficient than traditional methods)
The three phases happen each time
a web page is loaded in the browser.
Similar to any app, an Angular app has a main entry point.
After the app is run
(using the command
will look at the angular.json
file to find the entry point to the Angular app.
At the high level:
- angular.json specifies a "main" file, which in this case is main.ts
- main.ts is the entry-point for the app and thus it bootstraps the app
- The bootstrap process boots an Angular module
AppModule is used to bootstrap the app.
AppModule is specified in src/app/app.module.ts
AppModule specifies which component to use as the top-level component,
AppComponent (from in-class examples)
(specified as a
selector in app.component.ts file)