Please enable JavaScript.
Coggle requires JavaScript to display documents.
Angular Modules - Coggle Diagram
Angular Modules
what are modules?
-
To include some specific feature, like FormModule, into a module so that desired functionality can be performed
An app requires at least one module, generally AppModule
Angular module defines component, directives and pipes
Services & Modules
put service in both eagered-loaded module and lazy-loaded module will cause different service instances
-
-
-
Lazy Loading
const routes: Routes = [ ..., { path: 'recipes', loadChildren: () => import('./recipes/recipes.module').then(m => m.RecipesModule) } ]
-
Feature Module
setup like appModule
@NgModule({...})
declarations: [RecipesListComponent, ...]
in declarations: add feature relative components, directives
imports: [CommonModule, ...]
add other modules like ReactiveFormsModule, RouterModule... if used in the components
BrowserModule can only resides in appModule, use CommonModule to unlock ngIf, ngFor and so on.
-
-
Adding Shared Module
Add 'share.module.ts'
@NgMoudle({ declarations: [...], imports: [...], exports: [...]})
-
declarations can contain shared components like alert-component, and shared directives and so on
-
Important Principals
Components, Derictives and Pipes can only be declared once!
if declared in shared module, then could not be declared in other modules!