Tạo và sử dụng Module trong Angular

Khai báo Module trong Angular

Module là cách chia nhỏ các thành phần ứng dụng (giống package trong Java). Với Angular sử dụng đến decorator có tên là @NgModule để khai báo, Module là một lớp chứa các thành phần để thực hiện các chức năng nào đó.

Cú pháp để tạo ra một module, ví dụ module ModuleName (class) như sau:

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

@NgModule({
  imports: [ ... ],             //Nạp các module khác mà module này cần
  declarations: [ ... ],        //Khai báo các component, directive, pile của module này
  providers: [ ... ],           //Các dịch vụ, mà các component khác có thể sử dụng
  bootstrap: [ ... ]            //Định nghĩa component gốc của module
})
export class ModuleName { }

Trong ví dụ mẫu phần Tạo ứng dụng Angular đầu tiên , có module là AppModule được khai báo ở file src/app/app.module.ts:

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

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

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

Phân loại Module trong Angular

Ứng dụng Angular có 2 loại Module là module gốc và module chức năng.

Những Module có tên AppModule là module gốc, nó được dùng để khởi chạy ứng dụng, còn lại thì là loại Module chức năng

Module gốc

Module gốc có tên là AppModule, thì nó phải khai báo có import BrowserModule, trong phần bootstrap phải khai báo các component khởi chạy.

Module gốc được khởi chạy bằng đoạn mã (/src/main.ts)

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
//...
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Với các ứng dụng nhỏ, chỉ cần 1 module và chính là module gốc là đủ.

Module chức năng

Các loại module còn lại gọi là module chức năng, có đặc điểm sau:

• Phải khai báo tất cả các thành phần mà nó cần
• Phải import CommonModule (chứ không phải là BrowserModule)
• Không có khai báo bootstrap

Ta dùng Module chức năng để tạo ra các view

Ví dụ, trong ứng dụng ví dụ trước, gõ lệnh sau để tự động tạo khung Module chức năng (đặt tên module là ModuleChucnang)

ng generate module ModuleChucnang

Nó sinh ra file /src/app/module-chucnang/module-chucnang.module.ts có nội dung:

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class ModuleChucnangModule { }

Vậy là đã tạo ra được module chức năng có tên ModuleChucnangModule, lưu ở file với cấu trúc thư mục như trên.

Giả sử tạo ra một component có tên là Vidu01Component để sử dụng cho module này gõ lệnh sau:

ng generate component module-chucnang/Vidu01Component

Nó đã sinh ra các file trong thư mục /src/module-chucnang/vidu01-component và trong đó có định nghĩa tag selector cho component này là app-vidu01-component, khai báo component đó thuộc module ModuleChucnangModule sửa lại mã như sau

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Vidu01ComponentComponent } from './vidu01-component/vidu01-component.component';

@NgModule({
  declarations: [
    Vidu01ComponentComponent   //Khai báo Component thuộc Module
    ],
  imports: [
    CommonModule
  ],
  exports: [
    Vidu01ComponentComponent  //Export để sử dụng được ở Module khác
  ]
})
export class ModuleChucnangModule { }

Để nạp module này vào AppModule thì mở file app.module.ts và thêm ModuleChucnang vào phần declare

...
import { ModuleChucnangModule } from './module-chucnang/module-chucnang.module'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    ModuleChucnangModule     //NẠP MODULE
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Như vậy Module chức năng đã nạp vào AppModule, để hiện thị Component của Module AppModule, ở template của AppModule sử dụng đến selector app-vidu01-component

Mở file template app.component.html thêm vào cuối tag
<app-vidu01-component></app-vidu01-component> chạy lại ứng dụng sẽ thấy nội dung của Module chức năng hiện thị.