Angular Learning: Module (NgModule)

Angular module

　　Angular application is modular, it has its own modular system, called NgModule. A NgModule is a container for storing the number of cohesive code blocks, the code blocks focused on an application field, a workflow or a closely related group of functions. It can contain a number of components, service provider or other code files that contain them NgModule scope of the definition. It can also import other modules export functions, and export some of the functions specified for other NgModule use.

　　A module is a class with TypeScript @NgModule decorator.

NgModule metadata

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClient, HttpClientModule} from '@angular/common/http';

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　declarations

　　Statement module something, only to declare components, command and pipes

　　imports

　　Applied operation depends declare some modules

　　providers

　　Statement module which provides a service, the service can only be declared

　　bootstrap

　　What is the main component declaration module, only the root module can set this property

Angular custom module

　　When many components, all mounted in the root module will affect the speed of application loading, you can use a custom module.

　　1. Create a module, the directory app / module / user:

　　　　g module modules / user

　　2. Create the component directory app / module / user / components / address in the module

　　　　ng g component module/user/components/address

　　3. The user module is added to the corresponding file, ts, html, etc.

　　　　g component modules / user

　　

　　Other modules custom module components

　　

 

 　  

　　

 

 　　Create a module and configure routing

　　 　　ng g module module/user --routing

　　 Configuring Routing implement lazy loading module