Lời Mở Đầu

Tiếp nối phần 1 của series tìm hiểu Angular Js 2, bài viết này sẽ giới thiệu sâu hơn trong kiến trúc của Angular Js 2 đó là: các Modules, Components.

Modules trong Angular Js 2

Modules được sử dụng trong Angular Js 2 để chia nhỏ logic của ứng dụng thành các thành phần thực hiện các mục đích nhỏ hơn. Thay vì với việc viết tất cả các chức năng của ứng dụng gộp chúng ta sẽ chia nhỏ chúng thành các modules nhỏ hơn tương ứng với một chức năng nào đó. Vậy trong một module của Angular Js 2 cần có những gì? Dưới đây là một đoạn code minh họa module của Angular Js 2:

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

• Thứ nhất ta có thể thấy được các dòng lệnh import được sử dụng để import các modules có sẵn vào module mới được tạo. Bản thân Angular Js 2 được xây dựng thì các thành phần của nó đã được chia nhỏ thành các module vậy nên khi tạo module mới, cần các module khác của Angular Js 2 thì ta sẽ import vào thông quan câu lệnh import.
• Thứ hai là decorator NgModule được sử dụng khai báo các options khác của module
• Thứ ba là export được sử dụng để đưa module này ra bên ngoài nằm có thể sử dụng lại nó trong các modules khác thông qua import hoặc DI.

Component trong Angular Js 2

Component là nơi chúng ta viết code logic cho ứng dụng Angular Js 2. Một component sẽ bao gồm các thành phần sau:

• Template: được sử dụng để hiển thị dữ liệu và là giao diện của ứng dụng Angular Js 2. Nó chứa các thẻ HTML cần thiết để tạo ra view của ứng dụng. Ở đây cũng có thể thực hiện các thao tác binding và các directive
• Class: nó tương tự như các class trong oop, là nơi xử lý logic và chứa các thuộc tính và phương thức của component. Tương tự như module, class này được export để có thể sử dụng trong các component và các modules khác nhau.
• Metadata: định nghĩa các thông tin thêm cho component. Sử dụng các decorator để định nghĩa. Ví dụ cho một component đơn giản:

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'demo-app', 
   template: ' 
      <div>
         <h1>{{appTitle}}</h1> 
         <div>To Tutorials Point</div> 
      </div> 
   ' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome'; 
}

Ở trên ta import Component decorator tử angular/core module sử dụng import. Sau đó sử dung Component để định nghĩa metadata cho component gồm:

• selector: là một thẻ tự định nghĩa mà trong đó Component này hoạt động hợp lệ.
• template: là template của Component. Cuối cùng là class của Component chứa các thuộc tính và phương thức của Component. Có thể coi nó đại diện cho Component này.

Sử dụng Component thì chúng ta có thể import nó vào một module root. Sau đó sử dụng selector của Component như một thẻ tag của HTML thì template của Component sẽ được render.

Kết Luận

Bài viết giới thiệu cụ thể hơn về 2 thành phần quan trọng của Angular Js 2 là Modules và Component. Hai thành phần này hoạt động dựa vào nhau để tạo phần xử lý logic và giao diện của các ứng dụng Angular Js 2. Ở phần sau sẽ giới thiệu cụ thể hơn về metadata và template.

Tài Liệu Tham Khảo

1. https://www.tutorialspoint.com/angular2/