Lập trình Angular - Bài 1: Bắt đầu với Angular

Angular là gì?

Angular là một front-end framework dùng để xây dụng các ứng dụng SPA (Single Page Application) cho thiết bị di động và máy tính. Sự khác biệt đáng chú ý nhất giữa một trang web thông thường và SPA là số lần làm mới trang giảm xuống.

Tìm hiểu thêm về Angular tại đây.
Thiết lập môi trường để lập trình Angular tại đây.

Module trong Angular

Mọi ứng dụng Angular đều có ít nhất một module - đó là module gốc, thường đặt tên là AppModule.

Module giúp tổ chức một ứng dụng thành các khối chức năng riêng biệt gắn kết bằng cách đóng gói các component, pipe, directive và service.

Module Angular là một class có decorator là @NgModule. Decorator là các hàm sửa đổi các lớp Javascript. Về cở bản, chúng được sử dụng để đính kèm siêu dữ liệu vào các lớp để nó biết cấu hình của các lớp đó và cách chúng hoạt động. Một decorator @NgModule gồm các thuộc tính sau:

declarations: dùng để khai báo các class liên quan đến các view như component, directive và pipe.
exports: dùng để khai báo các component có thể sẽ được sử dụng lại ở module khác.
imports: dùng để khai báo các module mà chứa các class (pipe, directive, component) cần thiết cho các component của module hiện tại.
providers: nơi đăng ký các service sẽ được sử dụng ở các component của module hiện tại.
bootstrap: Component gốc là giao diện của ứng dụng. Chỉ có module gốc mới có thuộc tính này và nó cho biết component sẽ được khởi chạy.
entryComponents: Entry component là bất kỳ component nào mà Angular tải theo thứ bậc (có nghĩa là bạn không tham chiếu nó trong template), theo loại. Ví dụ: Define các dynamic component được tạo động bởi với ComponentFactoryResolver,...

Component trong Angular

Component là khối xây dựng cơ bản nhất của giao diện người dùng và các ứng dụng Angular. Một component điều khiển một hoặc nhiều phần của màn hình.

Một component là độc lập và đại diện cho một phần giao diện người dùng có thể tái sử dụng thường được cấu thành bởi 3 phần quan trọng:

Một đoạn mã html được gọi là view - file .html
Một class đóng gói tất cả các dữ liệu có sẵn và tương tác với view đó thông qua một API gồm các thuộc tính và phương thức do Angular kiến trúc. Đây là nơi chúng ta xác định logic ứng dụng (nó làm gì để hỗ trợ view) - file .ts
Và phần tử html nói trên còn được gọi là selector - selector nói cho Angular biết nơi hiển thị template. Ví dụ: với AppComponent mặc định thì seclector là app-root. Angular bất cứ khi nào gặp thẻ app-root trong tệp HTML, nó sẽ thay thế nó bằng template (app.component.html)

Component Angular là một class có decorator là @Component, cung cấp siêu dữ liệu bổ sung xác định các component sẽ được xử lý, khởi tạo và sử dụng trong thời gian chạy.

Component chuyển dữ liệu đến view bằng cách sử dụng một quá trình được gọi là liên kết dữ liệu (Data Binding). Điều này được thực hiện bằng cách liên kết các phần tử DOM với các thuộc tính của component. Ràng buộc có thể được sử dụng để hiển thị các giá trị thuộc tính cho người dùng, thay đổi style của phần tử, phản hồi sự kiện của người dùng,...

Một component phải thuộc về một NgModule để component hoặc ứng dụng khác có thẻ sử dụng được.

Một class chỉ nên giữ 1 trách nhiệm duy nhất.

Lưu ý: các modal component nằm ở phía component mẹ vì chúng là các component bắt buộc không được khai báo trên component html template

Khối xây dựng Angular: Template

Template được sử dụng để định nghĩa view component. Template trông giống như HTML thông thường, nhưng nó cũng có một số điểm khác biệt như *ngFor, {{name}}, (click) và [hero] sử dụng template syntax Angular để nâng cao khả năng của HTML. Template cũng có thể bao gồm các component tùy chỉnh như <button-custom> ở dạng thẻ html không thông thường. Các component này kết hợp liền mạch với HTML gốc trong cùng một bố cục.

Khối xây dựng Angular: Service

Hầu hết mọi thứ đều có thể là một service, bất kỳ giá trị, function hoặc tính năng nào mà ứng dụng của bạn cần. Service thường là một class có mục đích hẹp, được xác định rõ ràng. Nó nên làm một cái gì đó cụ thể và làm nó tốt. Mục đích chính của Angular Service là chia sẻ tài nguyên giữa các component.

Các lớp Component nên tinh gọn, công việc của component là kích hoạt trải nghiệm người dùng (trung gian giữa view và logic ứng dụng) và không có gì hơn. Chúng tùm nạp dữ liệu từ máy chủ, xác thực đầu vào của người dùng hoặc đăng nhập trực tiếp vào bảng điều khiển. Chúng ủy thác các nhiệm vụ như vậy và mọi thứ không quan trọng cho các service.

Cacs service được cung cấp cho các component thông qua dependency injection bằng cách khai báo service là tham truyền vào trong hàm constructor của component.

Khối xây dựng Angular: Các tài nguyên khác

Các tài nguyên bên ngoài như Cơ sở dữ liệu, API, ... là cơ bản vì chúng sẽ cho phép ứng dụng của chúng ta tương tác với thế giới bên ngoài.

Cấu trúc project Angular

Trong thư mục gốc của dự án, bạn cần quan tâm đến 3 thư mục quan trọng và một số file quan trọng:

src: đây là thư mục quan trọng nhất, nó chứa tất cả các file tạo nên ứng dụng Angular của chúng ta.
e2e: Thư mục này dành cho các unit test End-to-end của ứng dụng, được viết bằng Jasmine và chạy bởi người chạy thử nghiệm protractor e2e.
node_modules: Các gói package đã được cài đặt trong dự án bằng lện npm install hoặc yarn install
packages.json: Xác định các phụ thuộc (dependencies) và một số nội dung hữu ích khác như các tập lệnh sẽ giúp chúng ta rất nhiều để sắp xếp quy trình phát triển (đóng gói, biên dịch, chạy ứng dụng, ...).
tsconfig.json: Tệp cấu hình chính. Nó cần phải ở trong thư mục gốc vì đó là nơi mà trình biên dịch typescript sẽ tìm kiếm nó.
angular.json: Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng ta có thể build ứng dụng Angular. Nơi để import styles hoặc script như bootstrap, font-awesome, jquery,...

Bên trong thư mục /src chứa mã chưa biên dịch của chúng ta. Đây là nơi mà hầu hết các công việc cho ứng dụng Angular của bạn sẽ diễn ra. Khi chúng ta chạy lệnh ng serve, mã của chúng ta bên trong thư mục /src sẽ được đóng gói và chuyển thành phiên bản Javascript chính xác mà trình duyệt hiểu được (hiện tại, ES5). Điều đó có nghĩa là chúng ta có thể làm việc ở cấp độ cao hơn bằng cách sử dụng TypeScript, nhưng biên dịch xuống dạng cũ hơn của Javascript mà trình duyệt cần.

Trong thư mục này, bạn sẽ tìm thấy hai cấu trúc thư mục chính.

app - có tất cả các component, mdoule, page mà bạn sẽ xây dựng ứng dụng.
environments - thư mục này để quản lý các biến môi trường khác nhau như dev và prod. Ví dụ, chúng ta có thể có một cơ sở dữ liệu cục bộ cho môi trường phát triển (development) và một cơ sở dữ liệu sản phẩm cho môi trường sản xuất (production). Khi chúng ta chạy, nó sẽ sử dụng theo mặc định là dev env. Nếu bạn muốn chạy ở chế độ sản xuất, bạn cần thêm cờ --prod vào lệnh ng serve.
index.html - Đó là trang lưu trữ ứng dụng nhưng bạn sẽ không sửa đổi tệp này thường xuyên. Tất cả các tập lệnh và kiểu cần thiết để làm cho ứng dụng hoạt động sẽ được đưa vào tự động bởi quy trình gói webpack, vì vậy bạn không phải thực hiện việc này theo cách thủ công. Điều duy nhất mà bạn có thể đưa vào tệp này, là một số thẻ meta (nhưng bạn cũng có thể xử lý chúng thông qua Angular).

Và có các thư mục phụ nhưng cũng quan trọng khác

assets - trong thư mục này, bạn sẽ tìm thấy hình ảnh, dữ liệu mẫu json và bất kỳ nội dung nào khác mà bạn có thể yêu cầu trong ứng dụng của mình.

Angular best practice: Thư mục app

Đây là cốt lõi của dự án. Chúng ta hãy xem cấu trúc của thư mục này để bạn có ý tưởng tìm mọi thứ ở đâu và nơi để thêm các module của riêng bạn để điều chỉnh dự án này cho phù hợp với nhu cầu cụ thể của bạn.

Thư mục shared

Các tệp SharedModule nằm trong thư mục này để chứa các component, directive và pipe dùng chung và chia sẻ chúng với các module cần chúng.

Nó import CommonModule bởi vì component của nó cần các directive chung. Bạn sẽ nhận thấy rằng nó xuất lại các module khác. Nếu bạn xem lại ứng dụng, bạn có thể nhận thấy rằng nhiều component yêu cầu directive SharedModule cũng sử dụng NgIf và NgFor từ CommonModule và liên kết với các thuộc tính component với [(ngModel)], một directive trong FormsModule. Module thực hiện kê khai các thành phần này sẽ phải import CommonModule, FormsModule và SharedModule.

Thư mục styles

Tại đây, bạn sẽ tìm thấy tất cả các biến, mixin, shared styles, v.v., sẽ làm cho ứng dụng của bạn có thể tùy chỉnh và mở rộng.

Có thể bạn chưa biết Sass? Nói một cách ngắn gọn, nó là một tập hợp siêu css sẽ dễ dàng và tăng tốc chu kỳ phát triển của bạn một cách đáng kinh ngạc.

Thư mục services

Tại đây bạn sẽ tìm thấy tất cả các service cần thiết trong ứng dụng này. Mỗi service chỉ có các chức năng liên quan đến nó.

Các thư mục khác

Để đạt được mã dạng module, chúng ta nên tạo mỗi thư mục cho từng component. Trong các thư mục đó, bạn sẽ tìm thấy mọi tệp liên quan cho các trang được bao gồm trong component đó. Điều này bao gồm html cho bố cục, sass cho style và component trang chính.

app.component.html

Tệp này đóng vai trò là khung của ứng dụng. Thông thường có một <router-outlet> để hiển thị các tuyến đường và nội dung của chúng. Nó cũng có thể được bao bọc bởi nội dung mà bạn muốn có trong mọi trang (ví dụ: thanh công cụ).

app.component.ts

Tệp này là thành phần Angular cung cấp chức năng cho tệp app.component.html.

app-routing.module.ts

Nơi chúng ta cấu hình định tuyến chính. Các tuyến này được đăng ký với Angular RouterModule trong AppModule. Nếu bạn sử dụng các module tải chậm, các tuyến con của các module tải chậm khác được xác định bên trong các module đó.

app.module.ts

Đây là module chính của dự án sẽ khởi động ứng dụng.