Kiến trúc tổng quát của Angular 5

Kiến trúc tổng quát của Angular 5
access_time 12/4/2017 12:00:00 AM
person Đào Minh Giang

Xin nhắc lại Angular là một Framwork mạnh mẽ được phát triển bởi Google. Nó được sử dụng để xây dựng các ứng dụng tương tác với người dùng thông qua giao diện Web. Angular cho cung cấp cho lập trình viên nền tảng công nghệ hiện đại dựa trên kiến trúc Hướng dịch vụ SOA và cho phép tích hợp với hàng loạt các nền tảng công nghệ lập trình hiện đại như .Net, Java, Php …

Với đặc trưng mạnh mẽ của các phiên bản trước kia như Angular 1.x, từ phiên bản Angular 2 (Hiện nay là phiên bản Angular 5) trở đi , nền tảng công nghệ có sự thay đổi lớn, ở đây ngôn ngữ lập trình được thực hiện đó là TypeScrip (Ngôn ngữ lập trình hiện đại và hướng đối tượng), và framework này cũng phân chia việc phát triển ứng dụng thành nhiều các module riêng biệt, điều này giúp cho lập trình viên có thể tiếp cận theo cách hướng mô hình một cách dễ dàng hơn.

Ngoài ra theo hướng tiếp cận này giúp cho lập trình viên phát triển và nâng cấp ứng dụng dễ dàng và đỡ tốn kém hơn.

1. Kiến trúc mức cao của ứng dụng

 Ứng dụng được xây dựng và phát triển trên nền tảng Angular 4,5 có thể được mô tả theo sơ đồ cây tổng quát sau :


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

Components : Được dịch là thành phần, nó chức đựng các chức năng tương tác phía giao diện với người dùng. Component có chứa Html, css hoặc scss, và các đoạn mã được viết bằng ngôn ngữ Typescrip nhằm thực hiện gắn kết (Tương tác) giữa giao diện ứng dụng và các dịch vụ (service ) ở phía Server.

Trong hình vẽ trên thì các component trực thuộc Module. Và nó được nạp vào ứng dụng là nhờ Module.

Component sử dụng Dịch vụ (Service) để lấy dữ liệu hoặc thao tác với dữ liệu và hiển thị chúng thông qua các đoạn mã chương trình được viết bằng TypeScript.

Component có thể sử dụng các đối tượng là thể hiện của dịch vụ thông qua cơ chế Dependency Injection (Thể hiện của Dependency Injecttion - DI là rất dễ hiểu, lập trình viên chỉ cần khai báo đối tượng thông qua hàm khởi tạo của lớp).

Directive được sử dụng trong template của Component nhằm để mở rộng các hành vi của Html.

Dữ liệu có thể được hiển thị tương ứng với các file html trong component. Angular cung cấp cơ chế gắn kết dữ dữ liệu với giao diện (template) của component cơ chế đó được gọi là databinding.

Thông qua cơ chế Databinding, bất kỳ thay đổi dữ liệu trong Angular, thì giao điện tương tác sẽ tự động cập nhật các thay đổi dữ liệu đó. Tương tác về sự thay đổi dữ liệu trong Angular với phía giao diện (UI) có thể theo hướng 1 chiều hoặc 2 chiều.

Hình ảnh dưới đây mô tả các thành phần cơ bản của Angular :


Hình số 2 : Các thành phần cơ bản Angular 5

2. Các thành phần cơ bản của Angular 5

2.1 Giới thiệu Module

Angular 5 chia sự phát triển ứng dụng thành các Module khác nhau. Tất cả các ứng dụng của Angular đều có 1 module gốc, module gốc được gọi là AppModule và có ít nhất một lớp NgModule.

Tùy theo quy mô của ứng dụng, với ứng dụng nhỏ chỉ cần một module là đủ. Tuy nhiên với các ứng dụng lớn có thể có chứa rất nhiều các Module khác nhau.

Chú ý trong một Module có thể chứa nhiều các Module con khác. Các module con được gọi là các SubModule. Ví dụ được mô tả ở hình dưới đây.

 

Hình số 3 : Module chứa nhiều các Submodule.

Mỗi Module có chứa @ngModule. Với các đặc chưng có chứa Metadata nhằm để định nghĩa các thuộc tính được sử dụng như sau :

+ declarations: Khai báo các lớp View (Bao gồm Component, directive và Pipe nhằm thực hiện hiển thị thông tin do vậy người ta gọi là các lớp hiển thị (View class).

+ Exports: Khi chúng ta sử dụng các Component tại Module, chúng ta muốn các Component này được sử dụng tiếp ở các Module khác thì chúng ta sẽ khai báo các Component này tại mảng đối tượng trực thuộc từ khóa Export này.

+ Imports: Chúng tả muốn sử dụng các Module khác trong module này, thì chúng ta phải khai báo chúng tại mảng đối tượng trực thuộc từ khóa Imports.

+ Providers : Khai báo các service được sử dụng trong module.

Hình sau mô tả các thành phần của Module :

 

Hình số 4: Mô tả các thành phần thuộc tính của Module

 

2. Cách phân chia ứng dụng theo Module
Khi xây dựng ứng dụng với quy mô từ trung bình trở lên, người ta thường hay sử dụng ngôn ngữ mô hình hóa ví dụ như UML để thực hình mô hình hóa hệ thống phần mềm. Trong ngôn ngữ UML có nhiều các biểu đồ khác nhau. Để mô hình hóa chức năng của hệ thống, các kỹ sư sẽ sử dụng biểu đồ Usecase để mô hình hóa 1 chức năng hoặc một nhóm chức năng của phần mềm, Khi muốn gom nhóm các chức năng lại với nhau thì người ta sẽ sử dụng biểu đồ biểu đồ thành phần (Component Diagram – Chứa nhiều biểu đồ Usecase) .

Vởi các ứng dụng được viết bằng Angular 5 chúng ta có thể ánh xạ biểu đồ thành phần  sang thành các Module ứng dụng. Với các SubModule tương ứng với các biểu đồ Usecase trực thuộc biểu đồ thành phần.

Ví dụ ta xây dựng 1 chương trình quản lý nhân sự, chương trình này bao gồm có chứa ít nhất 2 biểu đồ thành phần (1 biểu đố Authortication – Dùng để kiểm tra truy cập hệ thống và 1 biểu đồ thành phần sử dụng để Quản lý nhân sự  - Hrm). Tương ứng sang Angular 5 ta cũng sẽ có 3 modules đó là : Application Module (Đóng vai trò là RootModule) và 2 module thành phần bao gồm AuthorModule và HrmModule.

Hình dưới đây mô tả Module gốc của ứng dụng

 

Hình số 5: Module gốc của ứng dụng

Hình mô tả Module xác thực thông tin (AuthModule) của ứng dụng.

 

Hình số 6: Module Auth ứng dụng

Chúng ta dễ dàng nhận thấy trong hình số 5,6 đó là hình ảnh của Module có chứa các router nhằm định tuyến các đường dẫn của ứng dụng. Trong hình số 6, AuthorModule chứa các Component như : LoginComponent, ForgotPasswordComponent … Đó chính là các thành phần tương ứng với các Usecase như Login Usecase, ForgotPassword Usecase.

Kết luận

Vậy kết thúc bài số 1 tôi đã mô tả một cách tổng quát nhất về kiến trúc mức cao của Framework Angular 5 và khái niệm về Module trong việc xây dựng ứng dụng với Angular 5. Bài số 2 tôi sẽ trình bày tiếp các thành phần tiếp theo trực thuộc kiến trúc mức cao này.



vertical_align_top
share
Chat...