Module trong Angular 7

Module trong Angular là gì?

Module trong Angular là một nơi mà bạn có thể nhóm các component, directive, pipe, và service có liên quan đến ứng dụng Angular.

Trong trường hợp bạn đang phát triển một trang web các thành phần header, footer, left, center và right có thể là một phần của module.

Tạo module trong Angular

Để định nghĩa module, chúng ta có thể sử dụng NgModule. Khi bạn tạo một dự án mới bằng lệnh Angular-cli, ngmodule được tạo trong file app.module.ts theo mặc định và nó trông như sau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

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

NgModule cần được import như sau:

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

Cấu trúc của ngmodule như dưới đây:

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

Nó bắt đầu với @NgModule và chứa các đối tượng declarations, imports, providers và bootstrap.

Declarations

Nó là một mảng của các Component được tạo ra. Nếu bất kỳ Component mới nào được tạo, nó sẽ được import trước và tham chiếu sẽ được khai báo như dưới đây:

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Imports

Nó là một mảng các module cần thiết để được sử dụng trong ứng dụng. Nó cũng có thể được sử dụng bởi các Component trong mảng Declarations. Ví dụ: trong @NgModule, chúng ta thấy BrowserModule và AppRoutingModule được import:

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

Việc import trong @NgModule sẽ như sau:

imports: [ 
  BrowserModule,
  AppRoutingModule
]

Providers

Khai báo một mảng các service sẽ được sử dụng trong ứng dụng tại đây.

Bootstrap

Khai báo main component của ứng tại đây.