Ví dụ module trong Angular 4

Ví dụ module trong Angular 4 là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ module trong Angular 4 sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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.

Hy vọng với bài viết về Ví dụ module trong Angular 4 đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!