1. Entry Point

  • Host page: src/index.html contains <app-root></app-root>, the mount point for Angular.
  • Bootstrap script: src/main.ts runs bootstrapApplication(AppComponent, appConfig) to start the Angular runtime.

2. Application Configuration

  • app/app.config.ts supplies global providers:
  • provideZoneChangeDetection({ eventCoalescing: true }) for efficient change detection.
  • provideRouter(routes) to enable routing (currently an empty route array in app/app.routes.ts).

3. Root Component Rendering

  • AppComponent (app/app.component.ts) is standalone with selector: 'app-root'.
  • Angular instantiates AppComponent, links it to <app-root>, and compiles app.component.html into DOM instructions.

4. Template & Change Detection

  • Angular renders the compiled template once during bootstrap.
  • Zone.js patches async APIs so change detection runs after events; coalescing ensures minimal checks per frame.
  • Updating component state (e.g., title) triggers Angular to reconcile and update affected DOM nodes.

5. Router Lifecycle (When Routes Are Added)

  • Router evaluates URL, resolves matching routes from app.routes.ts, and renders routed components inside <router-outlet>.
  • Navigation events re-run change detection to refresh the view.

6. Running the App

cd examples/angular-lab
npm install
ng serve -o
  • CLI builds the app, serves index.html, and the browser executes main.ts → bootstrap → render.
  • Modify app.routes.ts or add components to extend the rendered UI.

7. Extending Further

  • Import sample components (e.g., from ../week01-02/) and register them in the router to see them rendered.
  • Enhance configuration with additional providers (HTTP interceptors, state management) via appConfig.