Module trong Angular 4

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

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 [free tuts .net]

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.

Danh sách file tải về

Tên file tải về	Pass giải nén
Source code	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tích hợp thư viện và module bằng Bower và npm vào Angular

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Two way data binding trong Angularjs

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Security trong AngularJS và cách sử dụng đơn giản

Tối ưu hóa hiệu suất trong AngularJS

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Tạo hiệu ứng với ngAnimate trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng service trong AngularJS

Tạo và sử dụng directive trong AngularJS

Interceptors và Http Service trong Angular

Sử dụng Custom Directives trong AngularJS

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…