What is Angular 2 module?
"Simply it's like a box which encapsulates angular components"
import { NgModule } from '@angular/core';
@NgModule({})
Class which decorated with NgModule
Arrange code in modular way
Extend our application with external modules
Some useful tips as below;
Tip #1
Every application must bootstrap one component, which known as "root application component".
[code language="javascript"]
bootstrap: [
AppComponent
]
[/code]
Tip #2
Every components, directives and pipes must only belong to only one Angular module.
Because we follow singleton design pattern.
Tip #3
Only declare components, directives and pipes under declarations array.
[code language="javascript"]
declarations: [
AppComponent
, AppFilterPipe
, AppDirective
]
[/code]
Tip #4
Never re-declare modules belongs to another module, because if we do so we polluting core objective of Angular modules.
Tip #5
All declared components are private by default and only accessible to current module unless explicitly export them.
Tip #6
To consume directives within template, you must declare directive within the module or imported from external module.
Tip #7
Export/ Re-export components, directives & pipes when ever who need, means that you are not restrict on that.
Tip #8
No need of any imports to export our components, directives and pipes.
Tip #9
Never export services and declare those within providers array, since then its shared within all module.
[code language="javascript"]
providers: [AppGuard]
[/code]
Tip #10
Imported components, directives, pipes (it can be Angualar or 3rd party) makes available any exported module consumable within our module.
[code language="javascript"]
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
//external component imports,
imports: [
BrowserModule
, FormsModule
}
})
[/code]
Tip #11
Importing module does not mean that you have access to its imported modules. Simply imports are not inherited!
Tip #12
Avoid declaring services of shared modules in providers array since we must ensure modules not imported my times in the app.
Tip #13
Route guards must be declared within providers since navigation control is applicable to app level.
Comments
Post a Comment