Biết xem framework làm việc ra sao là rất quan trọng trước khi bạn bắt đầu sử dụng nó. Bài viết này sẽ đi qua các thành phần quan trọng của Angular và các khái niệm của nó.
Sự thay đổi lớn nhất của Angular với AngularJS là Components. Các component thay thế Controllers trong AngularJS. Angular Component không giống Controller. Components thực tế tương tự như Directive trong AngularJS.
Kiến trúc Angular
Kiến trúc của một ứng dụng Angular là dựa trên ý tưởng về Components. Một ứng dụng Angular bắt đầu với level trên cùng gọi là Root Component. Chúng ta thêm các component con theo một cây dạng liên kết lỏng lẻo.
Một ứng dụng Angular tiêu biểu
Xem xét ứng dụng Simple Task List ở trên. Ứng dụng hiển thị một danh sách các task và bên dưới chúng ta có tuỳ chọn thêm mới task.
Ứng dụng trên là một ứng dụng đơn giản, nhưng bạn có thể nhìn thấy code Angular và sẽ thấy một số thành phần. Bạn có thể thấy hình ảnh bên dưới. Nó sẽ bao gồm 3 components, các service thì được inject vào các component còn các directive thì giúp thao tác với DOM.
Ứng dụng của chúng ta có 3 Components. Ở trên cùng chúng ta có RootComponent. Dưới RootComponent chúng ta có 2 component một là TaskComponent sẽ hiển thị danh sách task còn một component TaskAddComponent cho phép chúng ta tạo mọto task mới.
Angular Component là một class Javascript thuần và định nghĩa bởi @Component decorator. Decorator này cung cấp cho component thông tin về View (template) và thông tin metadata về class.
Component sử dụng data binding để lấy dữ liệu từ Component sang View (template). Chúng ta sử dụng HTML đặc biệt được biết đến là cú pháp Angular Template.
Ở bên phải chúng ta có Angular Service. Angular Service cung cấp các service cho Component của chúng ta giống như lấy dữ liệu ra từ database sử dụng TaskService, các sự kiện logging trong ứng dụng sử dụng LoggerService và tạo request HTTP đến backend server sử dụng HTTP Service.
Trách nhiệm cung cấp các thể hiện của Service cho Component gọi là Angular Injector. Nó inject các service vào component sử dụng Dependency Injection.
Chúng ta có các Directive, giúp chúng ta thao tác với cấu trúc và style trong ứng dụng. Các directive giúp chúng ta transform DOM theo yêu cầu của chúng ta.
Angular Module
Như bạn đã thấy từ hình trước trong ứng dụng Angular bao gồm một số các khối như Component, Service và Directive. Chúng ta tạo ra nhiều block để phát triển ứng dụng lớn dần. Angular đưa ra một cách tốt để tổ chức các khối này sử dụng một khái niệm gọi là Angular Module.
Chúng ta tạo ra các component, service, và directive sau đó đặt chúng trong Angular Module. Chúng ta sử dụng một directive đặc biệt gọi là @NgModule để tạo module. Angular Module cũng được gọi là NgModule.
Sử dụng Angular Module (hoặc ngModule) để tổ chức code ứng dụng Angular với một ứng dụng Angular lớn hơn. Ứng dụng sẽ gộp lại bởi nhiều Angular Module. Mỗi Module triển khai một tính năng cụ thể voặc các tính năng của ứng dụng.
Javascript Module (ES2015)
Đừng nhầm lẫn Angular Module với JavaScript Module. Angular Module chỉ dành cho Angular. JavaScript Module là một phần của đặc tả ngôn ngữ JavaScript. ES2015 đặc tả đặt ra chuẩn để định nghĩa cá module.
Theo đặc tả của ES2015 thì mỗi file là một module. Có một module trong 1 file và 1 file trên 1 module.
Các module định nghĩa giới hạn của biến, function và class được định nghĩa trong module. Các biến đó luôn là local trong module và không visible ra ngoài module.
Các module không có public method hoặc các thuộc tính public không cần thiết. Module giúp chúng ta tạo một thành phần public sử dụng lệnh export. Các module khác có thể sử dụng các member public sử dụng lệnh import.
Angular sử dụng JavaScript module thông qua TypeScript.
Chúng ta xây dựng Component, Service và directive sử dụng JavaScript module. Mỗi Component là một JavaScript module. Và sau đó chúng ta kết hợp chúng sử dụng Angular Module.
Giải phẫu Angular JavaScript Module
Trong ứng dụng Angular, chúng ta chủ yếu xây dựng Components, Services và Directives. Angular cung cấp một cách thống nhất để định nghĩa các khối. Nó được định nghĩa trong JavaScript module:
import { Component } from '@angular/core';
@Component({
})
export class AppComponent
{
SomeObject : any;
Title : string ="Hello Angular";
getSomeObject(): any {
return this.SomeObject;
}
}
Ví dụ trên có 3 phần, một lệnh import ở đầu tiên. Một class (AppComponent) ở dưới và định nghĩa lệnh export. Chúng ta decorate class với một decorator @Component ở trên class.
Lệnh import
Lệnh import chỉ ra cho Angular biết tìm các function đó ở đâu và sử dụng trong module của chúng ta. Tất cả các thành phần bên ngoài giống như một thư viện của third party, các module của Angular phải được import. Một lệnh import là một phần của đặc tả ES2015. Nó tương tự như như lệnh import của Java hay lệnh Using của C#.
Bạn chỉ có thể import chỉ các member được export từ module khác.
Class
Class chứa logic của ứng dụng. Nó có thể chứa method và properties như là C# hoặc Java class. Class phải được định nghĩa với từ khoá export nếu bạn muốn sử dụng class từ module khác.
Class Decorator
Nếu không có class decorator, AppComponent chỉ là một class. Không có gì liên quan Angular. Nó là decorator chỉ ra cho Angular biết cách sử dụng class đó.
Ví dụ, @Component decorator chỉ ra cho Angular biết class là một Component. Tương tự thế, một @Directive kể cho Angular biết class đó là Directive. Angular hiện tại có các class decorator:
- @Component
- @Directive
- @Injectable
- @NgModule
- @Pipe
Xây dựng các khối của ứng dụng Angular
Nhìn vào ứng dụng Task Application trong section trước, bạn có thể định danh 7 khối của Angular như sau:
- Component
- Templates
- Metadata
- Data Binding
- Directives
- Services
- Dependency Injection
Component
Angular Component là một class nó được bổ trợ bởi @Component decorator. Component điều khiển một phần của UI. Ứng dụng Task List ở trên có 3 component. TaskComponent hiển thị danh sách task, còn TaskAddComponent giúp chúng ta tạo mới task. RootComponent là component cha của các component này chỉ hiển thị tên của ứng dụng. Component được tạo ra trong ứng dụng mới nhìn sẽ như sau:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'GettingStarted';
}
Component có 4 phần như sau:
- Import statement
- Class
- Template
- Metadata
Lệnh import các thành phần liên quan được yêu cầu bởi Component này. Class chứa các logic của ứng dụng. Nó được bổ sung thông tin bởi @Component decorator.
Template
Component cần một view để hiển thị. Template định nghĩa view. Template chỉ là một tập con của HTML, nó chỉ cho Angular biết làm sao để hiển thị view. Nó là một trang HTML chuẩn sử dụng các thẻ H1, H2...Nó cũng sử dụng các lệnh của Angular như {}, []...
Metadata
Metadata chỉ cho Angular làm sao để xử lý class. Chúng ta thêm Metadata vào class sử dụng class decorator. Khi chúng ta thêm @Component decorator vào class nó sẽ trở thành component.
Class decorator sử dụng đối tượng cấu hình, cung cấp thông tin Angular cần để tạo component. Ví dụ @Component directive đi với cấu hình như selector, templateURL, directive...
Data Binding
Angular sử dụng Data Binding để lấy dữ liệu từ Component đến View. Nó được hoàn thành sử dụng cú phpas HTML đặc tả được biết đến là Template Syntax
Angular hỗ trợ 4 kiểu của Data binding:
- Interpolation: Data được bind ra từ component sang view
- Property Binding: Data bind ra từ component sang thuộc tính HTML trong view.
- Event Binding: Các sự kiện DOM được bind ra từ view ra method của Component
- Two-way binding/Model binding: Luồng dữ liệu cả hai chiều từ view sang component và ngược lại.
Directive
Directive giúp chúng ta thao tác với View. Một directive là một class, chúng ta tạo ra sử dụng @Directive nó chứa metadata và logic thao tác trên DOM.
View được tạo ra bởi Angular sử dụng template metadata được định nghĩa trong Component. Các template là động và được chuyển đổi sử dụng directive.
Angular hỗ trợ 2 loại directive là Structural directive sẽ thay đổi cấu trúc của view. Còn loại kia là attribute directive sẽ chỉnh sửa style của view.
Services
Service cung cấp dịch vụ cho các Components hoặc các service khác. Angular không có bất cứ đặc tả nào cho Service nó chỉ là các class có export method và chứa một số task. Bạn không cần làm gì cả
export class MyLogger {
AddTolog(msg: any)
{
console.log(msg);
}
}
Và trong bất cứ component nào, chúng ta chỉ cần gọi nó:
log :MyLogger = new MyLogger();
constructor() {
this.log.AddTolog("Component Created");
}
Nó là các Javascript module thuần không có gì đặc biệt. Angular đã làm gì để các service này có sẵn cho component? Nó gọi là cơ chế dependecy injection.
Dependency Injection
Dependency Injection là một phương thức khi tự động tạo một instance của một service được inject vào một component hoặc một service khác khi nó được yêu cầu.
Denpendency injection được dùng hầu hết khi inject service vào component hoặc service khác.
Angular làm điều này sử dụng injector. Khi một component được tạo, Angular sẽ tìm Component metadata các service mà component này yêu cầu. Injector sẽ tạo ra instance của service đó và inject vào component sử dụng constructor của nó.
Nếu service đã tạo thì injector sẽ không tạo mà sử dụng lại. Service cần chỉ ra cho Angular biết nó sẵn sàng được inject vào bất cứ component nào yêu cầu nó bằng cách sử dụng @Injectable decorator.
@Injectible()
export class MyLogger {
AddTolog(msg: any)
{
console.log(msg);
}
}
Và giờ MyLogger class có thể được inject vào bất cứ component nào hoặc service nào.
Tác giả: Bạch Ngọc Toàn
Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.
