Angular trong phát triển ứng dụng web, part 2
Tiếp tục series Angular trong phát triển ứng dụng web, ở phần 2 này chúng ta sẽ đi vào mô hình làm việc và tính năng của Angular. Nhưng trước tiên mình sẽ điểm lại những tính năng chính của framework:- Template: Cho phép người dùng xây dựng các component (thành phần) riêng có thể đóng gói và tái sử dụng cao.
- Data-Binding: Tính năng tự động đồng bộ hóa dữ liệu giữa hai chiều model và view khi view có sự thay đổi nào đó.
- Service: Có thể là một value, phương thức hoặc tính năng nào đó mà ứng dụng cần.
- Dependency injection: Cho phép người dùng có thể nhúng service hoặc đoạn code và đưa chúng vào bất kỳ nơi nào cần.
Đầu tiên mình sẽ đi vào cấu trúc của một dự án Angular

- Folder e2e: Chứa các file liên quan đến việc testing. Angular sử dụng thư viện protractor để thực hiện automation test trên các trình duyệt.
- Folder node_modules: Nơi chứa các thư viện và được download về cho dự án angular. Nó được quản lý bằng NPM có nghĩa là ta dùng NPM để xoá, thêm các thư viện.
- Folder src: Nơi chứa các source khi chương trình chạy. Đây là nơi tập trung các dòng code của ứng dụng angular.
- Folder app: Angular cli tạo ra folder này giống như folder cha của ứng dụng, Angular cli tạo ra như một ví dụ mẫu để sau này ta tạo các component khác. Trong folder app thường có:
- app-routing.module.ts: file này dùng để điều hướng.
- component.css: chúng ta định nghĩa các css mà component sẽ dùng.
- component.html: nơi chúng ta viết các files html. Là tầng view mà người dùng có thể thấy được.
- component.spec.ts: file này dùng cho việc testing (kiểm thử).
- component.ts (component class): là file xử lý các nghiệp vụ nó giống như Controller bên Spring Web.
- module.ts: file dùng để cấu hình cho module app.
- .editorconfig: File này dùng để cấu hình nếu trình soạn thảo code chúng ta dùng là Visual Studio. Mình có thể thay đổi cấu hình tại đây.
- .gitignore: Dùng để mô tả file nào được đưa lên github file nào không được đưa lên.
- json: Dùng để cấu hình lại Angular Cli.
- browserslist: Những phiên bản browser sẽ tương thích với dự án angular.
- config.js: File này dùng để chạy các testing (kiểm thử) các chức năng.
- json: File này chứa các thư viện cần thiết cho dự án angular, ngoài ra nếu ta thêm một thư viện bên thứ 3 vào thì khai báo trong này.
- js: Dùng để kiểm tra code có chất lượng hay không, có dễ đọc hay dễ bảo trì không, có theo chuẩn không.
Cơ chế hoạt động của Angular
Để Angular render giao diện và hiển thị lên trình duyệt chúng ta chạy command “ ng serve -o “ (trong đó -o là option mở giao diện web dev trên cửa số trình duyệt mới). Ta có thể hiểu cơ chế hoạt động của Angular như sau:- Angular sẽ load file index.html.
- Angular tiếp tục nạp các thư viện và các thư viện bên thứ 3 vào.
- Tiếp đó Angular sẽ load file main.ts.
- Trong file main.ts Angular sẽ load module cha là app.modules.ts.
- modules.ts load lên module cha component (root) hay còn gọi là root component. Trong dự án Angular ta sẽ có nhiều component. Mỗi component là 1 phần của view hiển thị cho người dùng.
- Trong module component sẽ có các file html, css (view) lúc đó sẽ hiển thị trang web cho người dùng.
Trang đầu tiên mà Angular gọi là…
File index.html là file đầu tiên mà Angular sẽ gọi khi ứng dụng được triển khai. Nội dung file index.html có dạng.

- 22eb52b7ae39d210.js: sử dụng Webpack để triển khai chạy ứng dụng angular.
- 1abcbd05316f6609.js: hỗ trợ chạy trên nhiều trình duyệt.
- 1a28e5c215027b7d.js: các code của ứng dụng mình.
main.ts
File main.ts có nội dung như bên dưới đây.
- Chúng ta thấy import platformBrowserDynamic để nói với Angular là sẽ load ứng dụng Angular bằng trình duyệt trên desktop.
- Tiếp đến chúng ta thấy Angular import AppModule. AppModule là component cha của cả ứng dụng Angular. Angular tổ chức code theo modules phân tầng. Module cha có nhiều module con, module con có nhiều module con trong đó nữa. Như vậy AppModule là module cha của ứng dụng Angular. Tất cả các ứng dụng Angular phải có ít nhất 1 module cha để load lên đầu tiên ta gọi nó là root module. Sau đó đến các module thành phần bên trong.
Root Module
Đầu tiên Angular sẽ load file AppModule. File AppModule được mô tả sau đây.


- imports : Dùng để nhúng các modules bên ngoài và các thirdparties sẽ được dùng chung với ứng dụng Angular.
- declarations : Nơi sẽ khai báo các components cha, con các directive hoặc service mà ta sử dụng trong dự án Angular.
- bootstrap : Chỉ ra component nào Angular sẽ load lên khi Angular Module được load.
Component
Trong @NgModule ta có bootstrap : [AppComponent] nói cho Angular biết là phải load AppComponent lên. Code Component được hiển thị như sau:
- Cấu tạo 1 component gồm 3 files. 1 là file Class Component, 2 là file html hiển thị view, 3 là file css.

- Class Component được đánh dấu với @Component trong đó có 3 thuộc tính selector, templateURL và styleUrls.
- selector dùng để chỉ ra DOM element nào mà component này sử dụng. Chúng ta thấy selector tên là app-root. Trong trường hợp bất kỳ nếu chúng ta nhúng thẻ <app-root></app-root> vào template đều được compiled bằng AppRootComponent và nhận bất kỳ tính năng đính kèm nào.

- templateUrl : trong component, chúng ta có chỉ định ‘./app.component.html” điều đó có nghĩa là sẽ load template từ file app.component.html trong cùng một directory với component.
- styleUrls : Tương tự templateUrl, chúng ta cũng chỉ định [‘./app.component.css], điều này có nghĩa là chúng ta sẽ sử dụng CSS trong file app.component.css cho component này.

Giờ mình sẽ điểm qua những tính năng cơ bản của Angular
- Template
- Khi mà các view trong html trở nên phức tạp hoặc được dùng đi dùng lại trong Angular thì khi đó template sẽ để giải quyết được vấn đề. View thường được sắp xếp phân cấp, cho phép bạn sửa đổi hoặc hiển thị và ẩn toàn bộ các phần trong giao diện.
- Hệ thống view phân cấp có thể bao gồm các view từ các component trong cùng một NgModule, nhưng cũng có thể bao gồm view từ các component được xác định trong các NgModule khác.


- One way binding được hiểu là dữ liệu được truyền 1 chiều. Có thể từ view sang component hoặc ngược lại từ component sang view.
- Từ component sang view chúng ta sử dụng Property Binding để hiển thị dữ liệu như sau:
- Chúng ta sử dụng để hiển thị giá trị từ component sang view.


- Ngược lại nếu từ view truyền dữ liệu về component thì ta dùng Property binding như sau [disabled]=”isDisabled”.


- Event Binding chúng ta sử dụng để bind các sự kiện như click chuột, sự kiện bàn phím etc. Để xử dụng ta dùng cú pháp sau để thực hiện sự kiện khi chuột click vào nút Save. Sau đó nó sẽ gọi hàm showStatus bên class component.




- Gọi API truyền data từ backend hoặc từ bên ngoài.
- Chia sẻ code logic hoặc data để các component có thể dùng chung.
- Dễ dàng truy cập các phương thức và thuộc tính trên các component khác trong toàn bộ dự án.
- Dễ dàng debugs khi có vấn đề.
- Có thể được sử dụng lại ở nhiều module.




Trên đây mình tạm kết thúc part 2 trong series về framework Angular. Cảm ơn các bạn đã đọc bài và ủng hộ. Hẹn gặp lại các bạn trong các phần tiếp theo về framework thú vị này nhé!
862 lượt xem