catalogue

@Class of NgModule() decorator

Common system modules of Angular

1. Example - create and import feature modules

order.module.ts

list.component.ts

app.module.ts

app.component.html

2. Example - inert loading module

order.module

order-routing.module

Configure in the top-level routing AppRoutingModule

app.component.html

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 { }

@Class of NgModule() decorator

​export declare interface NgModule {
    providers?: Provider[];// This module is the creator of those services that contribute to global services. These services can be used by any part of this application. (you can also specify a service provider at the component level, which is usually the preferred method.)
    declarations?: Array<Type<any> | any[]>;// Those components, instructions and pipes belonging to this NgModule
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// Other modules that export the classes required by the component templates in this module
    exports?: Array<Type<any> | any[]>;//A subset of declarable objects that can be used in component templates of other modules
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

1. providers: define all the services injected into the components of this module in advance, otherwise there will be an error prompt when using this service in this module.
2. Declaration: declaration means declaration in English. Here, some components, instructions, pipelines, etc. to be used in some modules are declared.
3. imports: import some modules. For example, I form all instructions into one module. When I use some of them, I can choose to import the whole instruction module. You can also import some modules installed through npm install before they can be used.
4. Exports: exports the component or instruction pipeline, etc. for modules that reference this module. You can use the component or instruction pipeline, etc. of this module.
5. exporyComponents: entry component refers to the entry component of angular. The bootable component is an entry component. Angular will load it into DOM during booting. Other portal components are dynamically loaded at other times. Literally, but when to use it. For example, if I want to pop up a component, the component should be dynamically loaded into the dom. At this time, I need to write the component xxxComponent.
6. bootstrap: the component that should be started when the module is started. The above code can see that AppModule is the startup component of the root module.
7. schemas: elements or attributes of components or instructions that do not belong to Angular need to be declared here.

Common system modules of Angular

NgModule	Import from	Why
BrowserModule	@angular/platform-browser	When you want to run an application in a browser
CommonModule	@angular/common	When you want to use   NgIf   and   NgFor   Time
FormsModule	@angular/forms	When you want to build a template driven form (it contains   NgModel )
ReactiveFormsModule	@angular/forms	When building a responsive form
RouterModule	@angular/router	To use the routing function, and you need to use   RouterLink ,.forRoot()   and  . forChild()   Time
HttpClientModule	@angular/common/http	When you want to talk to the server

1. Example - create and import feature modules

order.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListComponent } from './list/list.component';

@NgModule({
  declarations: [ListComponent],//Define list components
  exports: [ListComponent],//Export list component
  imports: [
    CommonModule
  ]
})
export class OrderModule { }

list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OrderModule } from './order/order.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OrderModule //Import the order module into
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-list></app-list>
<router-outlet></router-outlet>

2. Example - inert loading module

If we import all modules into the root module, the application will be very slow during initialization loading. At this time, we should consider using lazy loading. Load the corresponding modules according to the demand, reduce the size of the application initialization package and the loading time, and improve the user experience.

order.module

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

import { OrderRoutingModule } from './order-routing.module';
import { ListComponent } from './list/list.component';


@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

order-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';


const routes: Routes = [
  {
    path: 'list',
    component: ListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

Configure in the top-level routing AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'orders',
    loadChildren: './order/order.module#OrderModule'
  },
  {
    path: 'orders',
    loadChildren: './user/user.module#UserModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button>
<button routerLink="/order/list">order</button>

<router-outlet></router-outlet>