In-depth understanding of NgModule (module) in Angular

NgModule module is an important point in Angular, because the basic building block of Angular is NgModule. This article will take you through the NgModule module in Angular. I hope it will be helpful to you!

#NgModule will collect related codes into some function sets to form functional units. When using the Angular CL command to create a new project, a root module will be generated for us, named AppModule. The root module has a root component AppComponent, and the application can be started by guiding this root module. Angular applications are modular. During development, we will establish various large and small modules according to their functions, functions and characteristics to build it into an application. Any module can contain any number of other components. [Related tutorial recommendations: "angularjs video tutorial"]

1.@NgModule()

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

by ⬆️ We can see from the code that NgModule is a class with a @NgModule() decorator. It accepts a metadata object whose attributes are used to describe the module.

Click in@NgModule() We can see that the decorator class has the following attributes and the official explanation of its attributes.

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    declarations?: Array<type> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<type> | ModuleWithProviders | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<type> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<type> | any[]>;
    bootstrap?: Array<type> | any[]>;
    schemas?: Array<schemametadata>;
}</schemametadata></type></type></type></type></type>

The following is my personal colloquial understanding of this metadata attribute after using Angular

• providers: Put this module in the component The injected service must be defined in advance here, otherwise there will be an error message when using this service in this module.

• declaration: declaration means declaration in English. Declare some components, instructions, pipes, etc. to be used in some modules here.

• imports: Import some modules. For example, if I form all the instructions into a module and when I use some of the instructions, I can choose to import the entire instruction module. . You can also import some modules installed through npm install before they can be used.

• exports: Export components or instruction pipelines, etc., so that modules that reference this module can use the components or instruction pipelines of this module.

• exporyComponents: entry component represents the entry component of angular. The bootable component is an entry component, and Angular will load it into the DOM during the boot process. Other entry components are dynamically loaded at other times. Literal meaning, but when to use it, for example, if I want to pop up a component, then this component needs to be dynamically loaded into the DOM. At this time, the component xxxComponent needs to be written.

• bootstrap: The component that should be started when this module is started. From the above code, you can see that AppModule is the startup component of the root module.

• schemas: Elements or attributes that do not belong to Angular components or directives need to be declared here.

2. JavaScript module and NgModule

Both JavaScript and Angular use modules to organize code, although their organization The forms are different, but Angular applications will rely on both.

JavaScript Modules:

Modules are independent files that contain JavaScript code. To make the contents available, write an export statement

Example:

export class AppComponent { ... }

You need to use it in other files

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

<span class="kwd">And for the NgModulem module we At the beginning of the essay and the metadata that introduces him, we have a certain understanding of it. <br></span>

The NgModule class has the following key differences from the JavaScript module:

• 1. NgModule only binds declarable classes , these declarable classes are only used by the Angular compiler.

• 2. NgModule Unlike the JavaScript class that puts all its member classes in a giant file, just list the module's classes in its @NgModule.declarations list.

• 3.NgModule can only export declarable classes. This may be its own or imported from another module. It does not declare or export any other type of class.

• 4. Unlike JavaScript modules, NgModule can extend the entire application with services by adding service providers to the @NgModule.providers list.

In comparison, we can see that the NgModulem module is more flexible, scalable and has more advantages.

3. Commonly used modules

First of all, you need to know what basic modules need to be referenced to run a project. The following are some official modules provided by Angular module.

ng g m order

ng g c order/list  // 订单模块下新建一个list 组件

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

@NgModule({
  declarations: [ListComponent],//定义list组件
  exports: [ListComponent],//导出list组件
  imports: [
    CommonModule
  ]
})
export class OrderModule { }

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

}

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 //将order模块导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

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

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

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

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

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button>user</button>
<button>order</button>

<router-outlet></router-outlet>

The above is the detailed content of In-depth understanding of NgModule (module) in Angular. For more information, please follow other related articles on the PHP Chinese website!