FRAMEWORK GẦN NHƯ ĐẦY ĐỦ VÀ ĐI THEO CODE PRACTICE NHẤT ĐỊNH
Angular có nhiều concept nhất định để giúp các bác phát triển dễ dàng hơn và đặc biệt là code có thể maintain bởi bất cứ ai. Mình đã tham gia project upgrade từ angularJS cũ kỹ lên angular hiện đại, và mình vẫn có thể đọc được code của người cũ để viết ở dạng angular mới. Hơn nữa qua các update lớn project chưa khi nào break cả.
Angular thiên về xử lý data và event dễ dàng, nhưng về UI thì không bằng React.
GẦN GŨI HTML, JS, CSS CHAY
Với Angular bạn vẫn có thể làm việc như đang làm project HTML, JS, CSS chay, vì 1 component nó sẽ chia ra 3 file là Typescript, HTML và CSS và các bạn có thể viết code như mình đang viết chay, xào thêm thành phần Angular là xong.
CLI TỐT NHẤT
Angular có bộ lệnh CLI để có thể tạo các thành phần của Angular như component, service, directive, pipe và nó sẽ tự setup sẵn code Angular, và việc còn lại của bạn là viết code ngay, không cần setup gì thêm.
QUẢN LÝ STATE DỄ
Như các bác thấy ở bài trước về Download UI, mình dùng Angular thay vì React vì cơ chế quản lý state dễ dàng để timing đúng cho animation, hơn nữa state có thể áp dụng để add/remove class css, ẩn/hiện element,...
Với Angular, bạn chỉ cần khai báo biến ở class của component, xong bạn đã tạo 1 biến có state, nếu bạn muốn thay đổi giá trị của biến đó và state sẽ thay đổi theo thì bạn chỉ việc... thay đổi giá trị biến đó là xong, không cần phải có một method riêng để thay đổi state. Và cũng dễ dàng với array và object, chỉ việc thay đổi giá trị trong array/object là bên UI cũng sẽ update theo.
Angular có [ngClass] để bạn có thể đặt điều kiện để class đó có hiển thị hay không, rất phù hợp cho animation, hoặc ẩn hiện UI tuỳ theo data.
CÓ SẴN ROUTING
Khi làm SPA (Single page application) thì routing là thành phần quan trọng để có thể chuyển trang mà không reload lại, tiếc là React không có và phải tìm thư viện bên thứ 3, còn Angular là có sẵn, khi tạo app angular bạn có thể tuỳ chọn để setup sẵn routing, và các công cụ cho Routing cũng có như việc phân tích URL để lấy parameter, redirect,...
MAIN CONCEPT QUAN TRỌNG
Angular có các concept quan trọng nhưng cũng giúp cho phát triển dễ dàng hơn:
- Component: Cái này ai cũng hiểu 🙂
- Service: Như cái tên, các bác sẽ làm dịch vụ với các function custom để có thể phục vụ xử lý code bên component của các bác.
- Directive: Các bác có thể làm custom directive và gọi vào 1 thành phần HTML để có thể thay đổi behavior của nó (như giao diện, data, validate,...). Đồng thời các built in Directive như ngClass, ngFor, ngModel sẽ giúp việc xử lý data trên HTML dễ dàng.
- FormControl: Quản lý form toàn diện với validation, lấy data từ biểu mẫu dễ dàng
- HTTP Client: Kết hợp với RxJS các bác có thể lấy data từ API dễ dàng mà không cần dùng library ngoài.
- Lifecycle: Xử lý tuỳ theo quá trình component render, như ngOnInit khi component bắt đầu render, ngOnChange khi component thay đổi, ngOnDestroy khi component được xoá đi,... Các bác đọc document để thấy danh sách lifecycle hook đầy đủ để tận dụng.
- Pipe: Các bác tạo custom pipe để có thể thay đổi cách hiển thị của data trên HTML (VD như: data | pipe, thì pipe sẽ thay đổi format hiển thị của data và return về value mới, như USD 199.2 thì sửa thành $199,20 chẳng hạn) mà không thay đổi giá trị gốc của data.
KẾT LUẬN
Angular còn nhiều nữa nhưng mình liệt kê những thành phần chính đã giúp mình làm project lớn của công ty suôn sẻ nhưng vẫn có thể đảm bảo code maintain được bởi người khác. Qua bài này mình mong các bác có thể suy nghĩ đến Angular cho project của mình. Đương nhiên React cũng có cái đặc biệt của riêng nó nhưng mình nhường cho group về React vốn cũng đã phổ biến trong group rồi.
Chia sẻ bởi: Quang Anh Nguyễn
