Module trong Angular 4

Trong bài học hôm nay, chúng ta sẽ tìm hiểu về module trong Angular.

Module có thể hiểu là nơi gom góp tất cả các thành phần của 1 ứng dụng (component, directive, pipe, service) thành một thể thống nhất. Ví như module là 1 website thì component, directive, pipe, service giống như các phần header, navbar, menu, footer vậy.

Import NgModule

Để định nghĩa 1 module, bạn sử dụng NgModule.

Khi tạo project bằng Angular CLI, 1 module mặc định được tạo ra, đó là AppModule:

Bài viết này được đăng tại [kiso.vn]

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

NgModule được import như sau

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

Cấu trúc NgModule

NgModule được khai báo thông qua 1 object có 4 thuộc tính: declaretions, imports, providers, bootstrap.

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

Delaretion

declaretion là một mảng chứa các khai báo. Trong ví dụ trước, khi ta tạo thêm component thì declaretion sẽ có thêm khai báo của NewCmpComponent như sau

declarations: [
   AppComponent,
   NewCmpComponent
]

Import

Import là một mảng chứa các module sử dụng trong ứng dụng hoặc các module sử dụng trong các component. Mặc định sẽ có  BrowserModule được import.

Để import 1 module, chúng ta cần 2 bước: khai báo import module và khai báo trong mảng imports. Ví dụ chúng ta cần import module form cho ứng dụng, trước tiên ta cần khai báo module này được import từ @angular/forms

import { FormsModule } from @angular/forms;

Sau đó, chúng ta thêm khai báo trong mảng import

imports: [
   BrowserModule,
   FormsModule // Module form mới được thêm
]

Providers

Provider chứa các service mà chúng ta tạo ra

Bootstrap

Chứa component chính thực thi chương trình

Đó là tất cả về module. Đơn giản phải không :D.

Ở bài sau, chúng ta sẽ tìm hiểu về Data Binding trong Angular 4.

Danh sách file tải về