Bootstrap in Angular
Angular Components
checkout Angular Application with Angular CLI for more...
1. Index.html gets loaded.
How do Angular loads ?. let us build our application
These file added by webpack module loader.
WEBPACK⮞⮞ webpack is a bundler which scans angular application looking for javascript file and other files and merges them into single or more bundles. In our example it created four files.
Angular finds the entry point from angular.json configuration file. Till angular version 5 this file is known as angular-cli.json from angular version 6 it is angular.json.
In this topic we will look how Angular work internally and bootstrap application. When you create a new angular project using ng new 'project Name' it will generate many files like shown below:
What is Bootstrapping ?
Bootstrapping is a technique of loading or initializing our angular application. Angular takes following steps to our first view.
1. Index.html gets loaded.
2. Libraries gets loaded.
3. Main.ts entry point for application.
4. Root Module.
5. Root Component.
6. Templates.
Index.html
Index.html is the first page to load, you can find index.html under src folder src → index.html. you can see index.html does not contain any javascript or stylesheet file, it only contain html tag <app-root></app-root> inside body. index.html will look as shown below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SchoolManagementSystem</title> <!-- Application Name-->
<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>
To run our application, we use the Angular CLI command ng serve or NPM command npm start.ng serve does build our application but does not save the compiled application to the disk. It saves it in memory and starts the development server. We use ng build to build our app.
Open the command prompt and run the command. This will build and copy the output files to the dist folder.
Now open index.html from dist folder, you can see 4 files got added by compiler i.e. main, polyfills, runtime, styles.
WEBPACK⮞⮞ webpack is a bundler which scans angular application looking for javascript file and other files and merges them into single or more bundles. In our example it created four files.
So when index.html is loaded it loads third-parties libraries and angular core libraries. After this angular needs to locate the entry point.
The entry point of our application is main.ts which is present under src folder.
Angular finds the entry point from angular.json configuration file. Till angular version 5 this file is known as angular-cli.json from angular version 6 it is angular.json.
you can check in angular json file you will find "main": "src/main.ts" This file is the entry point of our application.
main.ts
We will go through main.ts file, this files looks as shown below
platformBrowserDynamic 🠞
In main.ts file you can see the import line imports the module platformBrowserDynamic from the library@angular/platform-browser-dynamic.
So platformBrowserDynamic is responsible for loading angular application in desktop browser. As angular application can be bootstrapped
in many ways and in many platform like desktop browser or mobile device.
import { AppModule } from './app/app.module';
The AppModule is the root module of the application. As we know angular application are organized as modules and the module which is
loaded first when application loads is called root module.
The platformBrowserDynamic invokes bootstrapModule to load root module and it will give the reference of our root module i.e. AppModule.
Root Module ➤➤
AppModule is the root module which is located under src/app. The Code of our AppModule is shown below:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here you can see AppComponent, this is our root component. The root module must have at least one root component. Root Component is loaded root module is loaded by Angular.
We use @NgModule class decorator to define a Angular Module and provide metadeta about the modules.
imports ➤ we have to list all modules (external or Angular Modules) which is used by this angular module.
Declaration ➤ This array contains all components, directives, pipes that belongs to this module.
Providers ➤ This is the array where we register the services that we create and angular dependency injection framework injects these services in component, directives and other services.
Bootstrap ➤ which component to load when this module get loaded by angular. i.e. AppComponent.
Root Component ➤➤
AppComponent is the root component of AppModule, AppComponent code will look as shown below-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'SchoolManagementSystem';
}
AppComponent is decorated with @Component class decorator, The @Component class decorator provides the metadeta about the class to angular. It has 3 properties selector, templateUrl and styleUrls.
Selector ⮚ It specifies the CSS selector, where this template will be inserted in HTML. i.e. app-root.
templateUrl ⮚ This property contains the path of HTML template which is going to be displayed in the browser. i.e. app.component.html
styleUrls ⮚This property contains the path of CSS file specific to this component.
The AppComponent defines template as app.component.html and CSS selector is app-root. In our index.html we already have app-root CSS selector defined. Angular check app-root in index.html and renders our template inside those tags.
Comments
Post a Comment