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:

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

NgModule được import như sau

app.module.ts
...
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
@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

declaretion
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 @angular/forms
import { FormsModule } from @angular/forms;

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

Khai báo FormsModule
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.

Khóa học Angular 1x kết hợp với PHP và MySQL rất hay

Nếu bạn đang tìm hiểu Angular 1x + PHP/MySQL thì hãy tham khảo khóa học tạo ứng dụng Angular này, đây là khóa học được biên soạn bởi anh Việt, giảng viên tại fedu.vn. Trong khóa học này bạn sẽ được hướng dẫn sử dụng Angular 1  để hiển thi dữ liệu được trả về từ Server (PHP và MySQL).

-------------------#####-------------------

-------------------#####-------------------

Nguồn: freetuts.net