Angular 2 - Part 6 [ Understanding AppModule ]

In our angular-cli generated app we have one module called app.module.ts inside the app dir. So whats the use of this, as in the previous post we said that this is used to bootstrap the component but lets examine this line by line what all other stuffs it can do

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

1. At first we are importing all the modules that are used in our app 
1. BrowserModule :  registers critical application service providers. It also includes common directives like NgIf and NgFor which become immediately visible and usable in any of this modules component templates.
2. NgModule: This module is used to import angular core Module lib
3. FormsModule: This module is used to handle the input related tasks 
4. HttpModule: This mdule is used to make http services available in our module
   
2. @NgModule : It is imported from angular/core. Here we tell angular what is used in our app. 
1. declaration: What directives we have used in our app, Components are directives. It basically tells which componets should I use through out my application.
2. imports: which other modules should I use. like browser module is used to use other default directives.
3. providers: is used if we want to have application wise services
4. bootstrap:  it is used to bootstrap the components that is used in this module
   
3. The export keyword enable out module to be used externally

Thats all for now. In the next session we will talk about the templates \m/