Module trong Angular

Các ứng dụng Angular có dạng module và Angular có hệ thống module riêng được gọi là NgModule. NgModule là vùng chứa cho một khối mã liên kết dành riêng cho miền ứng dụng, quy trình làm việc hoặc tập hợp các chức năng có liên quan chặt chẽ.

Chúng có thể chứa các component, nhà cung cấp dịch vụ và các tệp mã khác có phạm vi được xác định bởi NgModule chứa. Chúng có thể import chức năng được export từ ​​các NgModule khác và export cho các NgModule khác sử dụng.

Mỗi ứng dụng Angular có ít nhất một lớp NgModule là module gốc được quy ước đặt tên là AppModule và nằm trong file có tên app.module.ts. Bạn khởi chạy ứng dụng của mình bằng cách khởi động NgModule gốc.

Mặc dù một ứng dụng nhỏ có thể chỉ có một NgModule, nhưng hầu hết các ứng dụng đều có nhiều module chức năng hơn. NgModule gốc  cho một ứng dụng được đặt tên như vậy vì nó có thể bao gồm các NgModule con trong một hệ thống phân cấp.

Siêu dữ liệu của NgModule

Một NgModule được định nghĩa bởi một lớp với decorator @NgModule(). Decorator @NgModule() là một function nhận một đối tượng siêu dữ liệu để mô tả cho module. Các thuộc tính quan trọng nhất của @NgModule() là:

• declarations: Các component, directive và pipe thuộc về NgModule này.
• exports: Tập hợp con các khai báo sẽ hiển thị và có thể sử dụng được trong các component template của các NgModule khác.
• imports: Các module khác có các lớp đã export là cần thiết cho component template được khai báo trong NgModule này.
• providers: Trình cung cấp service mà NgModule này đóng góp vào bộ sưu tập dịch vụ toàn cục; chúng có thể truy cập được trong tất cả các phần của ứng dụng. (Bạn cũng có thể chỉ định các nhà cung cấp ở cấp component.)
• bootstrap: View chính của ứng dụng, được gọi là component gốc, nó chứa tất cả các view khác của ứng dụng. Chỉ có NgModule gốc mới nên thiết lập giá trị thuộc tính bootstrap.

Đây là một khai báo NgModule gốc đơn giản.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule 
{ }

AppComponent được đưa vào danh sách exports ở đây để minh họa; nó không thực sự cần thiết trong ví dụ này. NgModule gốc không có lý do gì để xuất bất cứ thứ gì vì các module khác không cần import NgModule gốc.

NgModule và Component

NgModule cung cấp bối cảnh biên dịch cho các component của chúng. Một NgModule gốc luôn có một component gốc được tạo trong quá trình khởi động, nhưng bất kỳ NgModule nào cũng có thể bao gồm bất kỳ số lượng component bổ sung nào, có thể được tải qua bộ định tuyến hoặc được tạo thông qua mẫu. Các component của một NgModule chia sẻ một bối cảnh biên dịch.

Component kết hợp với template của nó tạo ra view. Một component có thể chứa một cấu trúc view phân cấp, cho phép bạn định nghĩa các vùng phức tạp của màn hình có thể được tạo, sửa đổi và phá hủy dưới dạng một đơn vị.

Hệ thống phân cấp view có thể kết hợp các view được định nghĩa trong các component thuộc các NgModule khác nhau. Điều này thường xảy ra, đặc biệt là đối với các thư viện giao diện người dùng.

Khi bạn tạo một component, nó được liên kết trực tiếp với một view duy nhất, được gọi là host view. Host view có thể là gốc của cấu trúc view phân cấp, có thể chứa các embbed view, nó sẽ trở thành host view của các component khác.

Các component đó có thể nằm trong cùng một NgModule hoặc có thể được import từ các NgModule khác. Các view trong cây phân cấp có thể được lồng vào bất kỳ độ sâu nào.

Lưu ý: Cấu trúc view phân cấp là yếu tố chính trong cách Angular phát hiện và phản hồi các thay đổi trong DOM và dữ liệu ứng dụng.

NgModule và Module JavaScript

Hệ thống NgModule khác và không liên quan đến hệ thống module trong JavaScript (ES2015) để quản lý tập hợp các đối tượng JavaScript. Đây là các hệ thống module bổ sung mà bạn có thể sử dụng cùng nhau để viết các ứng dụng của mình.

Trong JavaScript mỗi tệp là một module và tất cả các đối tượng được xác định trong tệp đều thuộc module đó. Module khai báo một số đối tượng là công khai bằng cách đánh dấu chúng bằng từ khóa export. Các module JavaScript khác sử dụng câu lệnh import để truy cập các đối tượng công khai từ các module khác.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

Tìm hiểu thêm về hệ thống module JavaScript.

Thư viện Angular

Angular tải dưới dạng một tập hợp các module JavaScript. Bạn có thể coi chúng như các module thư viện. Mỗi tên thư viện Angular bắt đầu bằng tiền tố @angular. Cài đặt chúng bằng trình quản lý gói Node npm và import các phần của chúng bằng các câu lệnh import JavaScript .

Ví dụ: import decorator Component của Angular từ thư viện @angular/core như thế này.

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

Bạn cũng import NgModule từ thư viện Angular bằng cách sử dụng các câu lệnh import JavaScript. Ví dụ: mã sau đây import NgModule BrowserModule từ thư viện platform-browser.

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

Trong ví dụ về module gốc đơn giản ở trên, module ứng dụng cần các thành phần của module BrowserModule. Để truy cập các thành phần đó đó, hãy thêm nó  vào siêu dữ liệu imports của @NgModule như thế này.

imports:      [ BrowserModule ],

Bằng cách này, bạn đang sử dụng hệ thống module Angular và JavaScript cùng nhau. Mặc dù rất dễ nhầm lẫn giữa hai hệ thống, vốn có chung keywrod là import và export, bạn sẽ trở nên quen thuộc với các ngữ cảnh khác nhau mà chúng được sử dụng.

Tìm hiểu thêm hướng dẫn về NgModule.