ANGULAR App Loading
ANGULAR
This chapter explains how to load and run an Angular application.
Angular application loading
The steps involved in loading and starting an Angular application are a collaborative process between the browser, the compiled JavaScript bundle, and the Angular framework.
- Angular application first loads the index.html file.
- Angular application converts some typescript files into JavaScript files, such as
main.ts to main.js
runtime.ts to runtime.js
polyfills.ts to polyfills.js
styles.ts to styles.js
vendor.ts to vendor.js
- Angular application then loads the main.ts file (i.e main.js).
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); - Angular application then looks for app.module.ts file.
The main JavaScript bundle is executed and the application runs by referencing the root module AppModule.
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } - Angular application then runs app.component.ts file.
The root component is the AppComponent that is loaded, and the root component template is rendered in the <app-root> element inside the index.html file.
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { //other code here omitted.... //other code here omitted.... }templateUrl: app.component.html creates a view using the values from the app.component.ts file.
selector: app-root is a custom view tag for this component and this view will be added to the index.html file.
- Finally the view generated from app.component.html is added to the index.html file by using selector <app-root></app-root> to display.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example01</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root><app-root> </body> </html>
The browser first loads the index.html file as an entry point, which contains the angular selector