Angular Modules, Bootstrap

in Previous topic we have created our todo List for our Application, Now we can learn some concept about angular modules.

Whenever we talk about angular application they are build on multiple angular modules. So you can say an angular module is a group of components, services, directives. Some of built-in modules in angular framework are BrowserModule, FormsModule, AppRoutingModule, NgModule.

Whenever we want to use any angular feature we have to import that module.

Like in our LoginComponent html we have used ngModel and for using ngModel we have imported FormsModule, so whenever we want to use any built-in feature of angular we need to import there corresponding modules.

So we can think angular application as a group of angular modules, and each component or directives that we have created till now like LoginComponent, ErrorComponent, WelcomeComponent, todosListComponent are always associated with angular module.

The Syntax for angular module will start from '@' i.e. @NgModule Ng stands for Angular as shown below

Also whenever we create any component using command ng generate component, each time it got added into NgModule which is app module. 

So How is angular module is different from javascript module ?

we can say javascript module is something which is used to group different element present in a single file. As well we can create any number of classes or functions in javascript module.

where as Angular module is something which is used to group different angular components.

Bootstrap:

Now we will discuss bootstrapping of an angular application. 

There are 2 things which play major role in bootstrapping is root component and root module.

Now go to your http://localhost:4200/ and open view page source there you can see index.html get loaded and <app-root></app-root> is present there.

so index.html is the first and in parallel to index.html there is main.ts file get loaded as shown below:

 If you go and check main.ts file you can we are importing AppModule and we are bootstrapping it. so AppModule is the one which is first bootstrapped  in angular application and this is also called the Root Module.

Now if you see the root module you can see along with the root module we are initializing AppComponent, in the bootstrap we are defining AppComponent and therefore AppComponent also get boot strapped.

So what is happening once App Module get initialized AppComponent get initialized.

Now if see your index.html you can find the tag name <app-root></app-root> and this is the tag name of AppComponent (app.component.ts) and whatever present in the app.component.html will be the view source for all the pages.

For checking this put some hardcoded value in app.component.html file you will see that value in all the pages, and in app.component.html we have <router-outlet> and in routing we have defined default URL as LoginComponent.

So whenever we type http://localhost:4200/ Login page is rendered in view.

In next topic we will see footer and header component and we will use bootstrap css to it.

Previous Topic                                                                                                                     Next Topic