Kiến trúc tổng quát của Angular 5 - Bài số 2

Kiến trúc tổng quát của Angular 5 - Bài số 2
access_time 1/22/2018 12:00:00 AM
person Đào Minh Giang

Kiến trúc tổng quát của Angular 5 – Bài 2

2.2 Giới thiệu về Component

2.2.1 Tổng quát về Component.

Component là một thành phần không thể thiếu của ứng dụng được xây dựng bằng Angular nói chung và Angular 5 nói riêng. Một ứng dụng được viết bằng Angular chứa nhiều các Component khác nhau. Mỗi component thực thi một nhiệm vụ nào đó của ứng dụng.

Với các ứng dụng lớn, các nhà thiết kế kiến trúc thường chia ứng dụng ra thành nhiều các Module khác nhau. Mỗi module khi đó sẽ chứa nhiều các component. Chúng ta xem lại kiến trúc Angular :


Hình số 1 : Kiến trúc Angular

Trong hình số 1, ứng dụng Angular khi khởi tạo, nó sẽ tự động gọi Component gốc (root component – app.component), sau đó ứng dụng sẽ nạp các component khác có liên quan.

Mô tả tổng quát theo sơ đồ hình cây như sau :


Hình số 2 : Kiến trúc hình cây của các Component

Component có thể liên quan tới bất kỳ một phần tử hoặc một nội dung nào đó của một trang ví dụ quá trình sinh ra nội dung của biểu đồ khi hiển thị chi tiết một phần tử nào đó hay khi lập trình muốn phân tách nội dung của một trang ra thành nhiều các phần nhỏ khác nhau, khi đó mỗi phần nhỏ có thể là một component.

Về cơ bản thì Component trong ứng dụng Angular được sử dụng để tạo ra giao diện từ tập hợp các HTML hoặc được sử dụng để tạo ra Control mới với một nghiệp vụ cụ thể của bài toán, chính vì vậy khi sử dụng Component lập trình viên thường kết hợp với Bootstrap hoặc với Angular Marterial … để tạo giao diện tương tác với người sử dụng.

2.2.2 Tạo component.

Lập trình viên thường hay sử dụng Angular Cli để tạo Component. Cú pháp tạo component như sau :

ng g component my-new-component

Để hiểu chi tiết hơn về tạo Component thông qua Angular Cli các bạn có thể vào url sau :

https://github.com/angular/angular-cli

2.2.3 ví dụ Component

Chúng ta tạo Component có tên là BasicType trong ứng dụng Angular 5 với cú pháp như sau :

ng g component BasicType

Sau đó chúng ta bổ sung Code vào Component như sau :


Hình số 3 : Các thành phần Component

Một Component được hợp nhất bởi các thành phần như HTML - giao diện dùng để tương tác với người sử dụng, CSS, SCSS (dùng để thiết lập các Style) cho giao diện, .ts chứa ccs đoạn mã TypeScrip (Khi thực hiện chạy sẽ dịch ra file Javascript), file này chứa các đoạn mã để thực thi các nhiệm vụ của các thành phần giao diện HTML. Ngoài ra component còn chứa thành phần spec.ts được sử dụng dùng để kiểm định (Test) lại các chức năng gắn với Component vừa được phát triển.

Để biết chi tiết các component, các bạn có thể vào trang angular.io để đọc và nghiên cứu thêm.

2.3 Thư viện Angular

Angular coi như là một con tầu chứ một tập hợp các Module Javascript, mỗi tên thư viện Angular được sử dụng với tiền tố @angular.


Hình số 4 : Thư viện Angular

Ví dụ trong Hình số 3 sử dụng từ khóa import để khai báo việc sử dụng @angular/core.

Khi chúng ta sử dụng các component, đôi khi chúng ta sẽ gặp lỗi khi thực hiện biên dịch đặc biệt khi chúng ta sử dụng với component với Angular marterial, lý do là chúng ta không import các thư viện cần thiết cho ứng dụng hoặc cho Module chứa component này.

Để sử dụng các thư viện này ở mức độ Module chúng ta import nó vào trong @NgModule


Hình số 5 : Sử dụng thư viện mức Module

2.4 Structure Directive

Được sử dụng phổ biến trong Angular 5. Mục tiêu của Structure Directive là dùng để thay đổi cấu trúc DOM bằng việc thêm bớt các phần tử trong DOM. Structure Directive là các lớp được sử dụng với chỉ chỉ dẫn Directive. Khi sử dụng Structure directive, chúng đi liền với * ở đầu.

Ví dụ Directive NgForOf dùng để hiển thị danh sách các phần tử trong tập hợp dữ liệu.


Hình số 6: Directive NgFor

Ngoài ra Angular chứa một loạt các Directive khác gắn với các điều kiện để kiểm tra tính logic khi hiển thị và thao tác dữ liệu như NgIf, NgSwitch.

2.5 Data Binding

Người sử dụng tương tác với chương trình với mục tiêu nhằm để tra cứu dữ liệu, chỉnh sửa dữ liệu và xóa dữ liệu. Để thực hiện các chức năng trên, người dùng sẽ phải thực hiện thông qua giao diện của chương trình.

Với các lập trình viên có kinh nghiệm khi lập trình ứng dụng theo mô hình MVVM (Model, View và ViewModel) thì quá trình gắn kết xử lý dữ liệu của View và Model là thường xuyên trong quá trình phát triển ứng dụng.

Với Angular 5, mô hình phát triển ứng dụng cũng chính là MVVM, trong đó Model chính là các cấu trúc dữ liệu (Thường là các Interface) và View chính là giao diện của ứng dụng. Quá trình gắn kết giữa dữ liệu với giao diện được gọi là Data binding.

Vậy Data Binding trong Angular 5 chính là quá trình gắn kết dữ liệu giữa Component và Template. Data Biding cung cấp quá trình liên kết giữa các thành phần HTML của Template và dữ liệu.


Hình số 7 : Data binding trong Angular 5

Trong hình trên thể hiện Angular có 4 cách để thể hiện Data binding.

+ Interpolation : Sử dụng cặp {{}} để thực hiện render ra giá trị khi thực hiện gắn kết giữa Data và template của component. Cách gắn kết này được thực hiện theo cơ chế một chiều (Chỉ đọc thông tin), nó tiện lợi khi lập trình viên muốn hiển thị dữ liệu đơn giản.

 + Property Biding : Cơ chế gắn kết thông qua thuộc tính. Cách thể hiện của đặc tính này là thông qua []. Đây cũng là cơ chế gắn kết 1 chiều.

 + Even Binding : Cơ chế gắn kết sự kiện. Các gắn kết này cho phép lập trình viên viết các phương thức trực thuộc Component sau đó gán cho các sự kiện của các phần tử ở phía template của component đó.

+ Gắn kết 2 chiều [( )] : thực hiện gửi giá trị từ Component cho Template và gửi những giá trị thay đổi của Tempate lại cho Component. Điều đó có nghĩa là những giá trị thay đổi trên Template sẽ tự động được thay đổi trên Component.

Ví dụ : Thực hiện gắn kết dữ liệu.


Hình số 8 : Code của Compoent chứa dữ liệu, Phương thức Add và Event

 Phần giao diện Template thực hiện cơ chế Binding 2 chiều [()], có nghĩa là khi người sử dụng thay đổi giá trị nhập vào 2 ô, khi đó giá trị NumberOne và NumberTwo sẽ tự động cập nhật.


Hình số 9 : Giao diện ứng dụng

Khi người dùng Click vào nut Submit khi đó hàm Add sẽ được gọi và totalNumber sẽ hiển thị thông qua cơ chế binding Interpolation.

vertical_align_top
share
Chat...