Các lớp module có trách nhiệm gắn kết các thành phần lại với nhau, mỗi ứng dụng Angular sẽ có ít nhất một module, trong đó có một module gốc (root) luôn được chạy trước tiên khi chúng ta khởi động ứng dụng, thông thường chúng ta sẽ đặt tên nó là AppModule.

Trong thư mục quickstart/src mà chúng ta đã cài đặt cũng có một file như vậy tên là app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Trong đoạn code trên, ba dòng đầu tiên là các dòng import thư viện, kế đến là đoạn khai báo clas AppModule, với phần khai báo decorator @NgModule.

Từ khóa @NgModule báo cho Angular biết đây là một class module trong Angular. Các tham số trong phần khai báo @NgModule giúp Angular biết cách dịch và chạy ứng dụng như thế nào, trong đó:

• imports: đây là một mảng dùng để khai báo tên các module khác sẽ được dùng bởi module này, ở đoạn code trên chúng ta chỉ khai báo 1 module là BrowserModule.
• declarations: đây cũng là một mảng chứa tên các lớp thuộc về module này.
• bootstrap: tên lớp View sẽ được dùng để hiển thị lên màn hình đầu tiên, chỉ có AppModule (hay root module) mới khai báo tham số này.

Chúng ta sẽ lần lượt tìm hiểu 3 tham số trên.

Imports

Module là tính năng cho phép Angular tách các thành phần có chung quan hệ với nhau thành các đơn vị độc lập. Rất nhiều tính năng trong Angular được tổ chức thành các module. Chẳng hạn như dịch vụ HTTP trong Angular được gói thành HttpModule. Tính năng router thì ở trong RouterModule. Chúng ta cũng có thể viết module riêng.

Để thêm một module vào thì chúng ta khai báo trong mảng imports.

Angular là một web framework, ứng dụng sẽ được chạy trên trình duyệt web, do đó sẽ cần dùng đến BrowserModule trong AppModule. BrowserModule nằm trong thư mục angular/platform-browser.

Chỉ có các lớp NgModule mới được khai báo trong mảng imports.

Declarations

Chúng ta khai báo cho Angular biết các lớp component thuộc về AppModule trong mảng declarations, bất cứ khi nào chúng ta tạo ra một component mới thì chúng ta khai báo trong mảng này.

Ngoài ra bất cứ một component nào được tạo ra cũng phải được khai báo trong một lớp NgModule nào đó, nếu không Angular sẽ báo lỗi.

Chúng ta sẽ tìm hiểu về 2 loại lớp là directive và pipe trong các bài sau, các lớp loại này thường được khai báo trong mảng declarations.

Chỉ có 3 loại lớp có thể khai báo trong mảng declarations là component, directive và pipe.

Bootstrap

Ứng dụng được khởi động thông qua lớp AppModule. Khi khởi động Angular sẽ tạo ra các đối tượng được khai báo trong mảng bootstrap và lưu vào trình duyệt.

Mỗi đối tượng được tạo ra đó sẽ nằm riêng biệt với nhau, thông thường trong các lớp được khai báo sẽ tạo thêm các đối tượng con tùy vào coder.

Nhưng thông thường thì chúng ta chỉ khai báo một lớp trong mảng bootstrap thôi, và thường thì chúng ta đặt tên là AppComponent.

Khởi động ứng dụng

Có rất nhiều cách để khởi động ứng dụng.

Cách thông dụng nhất là chúng ta code đoạn code khởi động AppModule trong một file .ts riêng và đặt trong thư mục có tên src, ví dụ như sau:

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

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Chúng ta khởi động bằng cách gọi phương thức platformBrowserDynamic().bootstrapModule(), truyền vào tham số là lớp AppModule.