1. Tổng quan về Angular

Angular là một javascript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript , HTML và TypeScript . Angular cung cấp các tính năng tích hợp cho animation , http service và có những tính năng như auto-complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt.

Bạn Đang Xem: Giới thiệu tổng quan về Angular

Để học được angular thì bạn cần phải biết các kiển thức cơ bản sau:

• HTML
• CSS
• JavaScript
• TypeScript
• Document Object Model (DOM)

1.1.Các phiên bản của Angular

Angular js : Phiên bản đầu tiền tài angular là AngularJS được bắt nguồn từ năm 2009 và đc ra mắt vào 20/10/2010, do lập trình viên Misko Hevery tại Google viết ra như thể một dự án kiểu “viết cho vui”. Lúc đó angular js được viết theo mô hình MVC (Model-View-Controller) trong đó :

• Model là thành phần trung tâm thể hiện hành vi của ứng dụng và quản lí tài liệu.
• View được tạo ra dựa trên thông tin của Model .
• Controller đóng vai trò trung gian giữa Model và View và để xử lý logic .

Angular 2 :

• Sau phiên bản angular js thì vào tháng 3 năm 2015 phiên bản bản angular 2 ra đời nhằm thay thế Angular Js với những khái niệm mới nhằm đơn giản hóa và tối ưu cho quá trình phát triển sử dụng framework này. Angular 2 thay đổi hoàn toàn so với angular js bằng việc thay Controllers và $scope ( Angular js ) bằng components và directives . Components = directives + template , tạo nên view của ứng dụng và xử lí các logic trên view. Angular 2 hoàn toàn được viết bằng Typescript. Angular 2 nhanh hơn angular js ,tương trợ đa nền tảng đa trình duyệt, cấu trúc cdoe được tổ chức đơn giản và dễ sử dụng hơn.

Angular 4 :

• Ra mắt vào tháng 3/2017 đây là một phiên bản nâng cấp từ Angular 2 nên kiến trúc không thay đổi nhiều ngoài việc giảm thiểu code được tạo ra từ đó giảm kích thước tệp được đóng gói xuống 60%, đẩy nhanh quá trình phát triển ứng dụng.

Angular 5 :

• Đã được phát hành vào trong ngày 1 tháng 11 năm 2017 với mục tiêu thay đổi về tốc độ và kích thước nên nó nhanh hơn và nhỏ hơn angular 4. Các tính năng mới so với angular 4:
• Sử dụng HTTPClient thay vì sử dụng HTTP : bởi vì nó nhanh, an toàn và hiệu quả hơn.
• Với phiên bản Angular 5 mặc định sử dụng RxJs 5.5
• Multiple export aliases : Một component có thể được xuất bằng nhiều bí danh (aliases) để giảm bớt quá trình vận chuyển.
• Internationalized Pipes for Number, Date, and Currency: Các pipe mới được giới thiệu để tiêu chuẩn hóa tốt hơn.
• Tối ưu hóa build production bằng việc sử dụng phương tiện build optimizer được tích hợp sẵn vào trong CLI. Phương tiện này tối ưu tree shark và loại bỏ code dư thừa.
• Cải thiện tốc độ biên dịch bằng việc dùng TypeScript transforms, giờ đây khi build sẽ sử dụng lệnh “ng serve -aot”. AOT sẽ cải thiện performace khi load page và nó được dùng để làm deploy app lên production

Angular 6:

• Update CLI, command line interface: thêm một số lệnh mới như ng-update để chuyển từ version trước sang version ngày nay; ng-add để thêm các tính năng của ứng dụng để trở thành một ứng dụng web tiến bộ.
• Angular Element: Được cho phép các component của Angular được triển khai dưới dạng component web, sau đó có thể được sử dụng trong bất kỳ trang HTML nào một cách dễ dàng.
• Multiple Validators: được chấp nhận nhiều Validators được ứng dụng trên form builder.
• Tree-shakeable providers: giúp loại bỏ mã code chết.
• Sử dụng RxJS 6 với syntax thay đổi.

Angular 7 :

• Được phát hành vào 18 tháng 10 năm 2018 với những thay đổi như :
• ScrollingModule : Để scroll load tài liệu.
• Drag and Drop: Tất cả chúng ta có thể dễ dàng thêm tính năng kéo và thả vào trong 1 mục
• Angular 7.0 đã update RxJS 6.3

Angular 8 :

• Ra mắt 28 tháng 5 năm 2019 với CLI workflow improvements, Dynamic imports for lazy routes ….

Angular 9 :

• Ra mắt mới đây 6 tháng hai năm 2020,Angular 9 vận chuyển tất cả những ứng dụng để sử dụng trình biên dịch Ivy và thời kì đuổi theo mặc định. Angular đã được update để hoạt động với TypeScript 3.6 và 3.7

2.Giới thiệu về Angular

2.1: Component

Components là một khối code trong app Angular. Nó là sự việc phối hợp của cục template html và nhúng kèm code TypeScript (hoặc Javascript). Các components là độc lập với nhau và độc lập với mạng lưới hệ thống. Nó có thể được cài vào hoặc tháo thoát khỏi mạng lưới hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình hiển thị hiển thị, gồm giao diện html và code logic xử lý sự kiện đi kèm control đó. Một component cũng sẽ có thể to lớn như thể cả 1 màn hình hiển thị chứa nhiều control hoặc một nhóm nhiều màn hình hiển thị. Tức là là một component cũng sẽ có thể chứa và gọi được nhiều component khác nối vào

Xem Thêm : Thiên thạch là gì?

Cấu trúc của Component:

Từ khóa @Component sẽ giúp khái niệm bộ khuông html cho nó. Và phía bên dưới là một class CategoryListComponent dùng để làm viết code logic. Trong khái niệm bộ khuông html, tất cả chúng ta có một số tính chất cần lưu ý sau đây:

• selector : Là tên gọi được đặt để gọi một component trong code html. Ở ví dụ vừa rồi, từ khóa hello-ng-world được đặt tên cho component này. Khi cần gọi component này ra ở màn hình hiển thị html cha, ta sẽ gọi là html tag <app-category-listvàgt;</app-category-listvàgt;. Gọi như vậy thì component con sẽ tiến hành render ra component cha.**
• template : Là tự khái niệm khuông html cho component .
• templateUrl : Là đường dẫn url tới file html phía ngoài để load file đó vào làm khuông html cho component này.
• styles : Là viết style css luôn vào file component này. Cách này chỉ dùng cho component đơn giản.
• styleUrls : Là đường dẫn url đến file style css độc lập cho component này.

2.2:Binding

Angular có cách code Binding (kết nối giữa html và data) tài liệu theo phong cách 2 chiều, tức là html input thay đổi thì biến javascript sẽ ngay tức thời nhận giá cả tương đối rẻ trị trả về và trái lại, giá trị trong js thay đổi thì ngay tức thời màn hình hiển thị html thay đổi theo.Để bind một chuỗi ra ngoài màn hình hiển thị html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}} Ví dụ tất cả chúng ta có một Component đơn giản như sau:

2.2:To-way binding

Từ khóa ngModel lúc này sẽ không phải là tính chất html mà nó là từ khóa của Angular. Khi tất cả chúng ta viết [(ngModel)] tất cả chúng ta sẽ gắn chặt giá trị của input html với biến title.Dẫn đến người dùng gõ vào ô input thì thẻ h1 sẽ nhận giá trị tương ứng của title.

3.Xử lý sự kiện

Để gắn 1 sự kiện của control html với một hàm javascript, ta viết như sau:

Khi tất cả chúng ta muốn (click) tức là muốn bind sự kiện click chuột của người dùng ở control này gọi là goBack().

4.ngModule

Module là một khái niệm rộng nhất của Angular. Một module có thể gồm có chứa các components, directives, pipes, v.v.

Module có thể được biên dịch (compile) dưới dạng ahead-of-time (AoT). Tức thị biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời gì từ trên đầu. Hãy tưởng tượng component có html và js viết riêng, khi load trang thì 2 thứ này mới nhào nặn chung để hiển thị html+data lên màn hình hiển thị. AoT là thứ html+data đã nhào sẵn.

Module cũng sẽ có thể gọi module con và bắt tay được với những module khác.

Xem Thêm : Hàm ROUND là gì? Cách sử dụng hàm ROUND trong Excel đầy đủ nhất

Ví dụ về module tất cả chúng ta có thể gặp gỡ ngay ở trong category.module.ts

Các tính chất của module được khái niệm như sau:

• imports: Khái niệm sự phụ thuộc (Dependency) của module này, module phụ thuộc sẽ tiến hành load trước rồi module này mới load.
• declarations: Khái niệm tất cả những component sẽ được sử dụng trong module này. Nếu chưa khái niệm thì những component trong module sẽ không còn thể gọi nhau vì không tìm thấy nhao.
• bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module này sẽ sở hữu một component gốc chứa layout gốc sẽ tiến hành render ra ở file index.html.

6.Service

Để tạo ra một service thì tất cả chúng ta cần import và mô tả một class với từ khóa @injectable lấy từ @angular/core module.

Nếu muốn dùng chung service mà không muốn khao báo nhiều lần,component nào thì cũng phải tiêm nó vào.Thì lúc này còn có thể khai báo service ở phần providers của component hoặc module

7.Router

7.1. Router Outlet

Mỗi một Router sẽ sở hữu một URL để load component. Và để biết được là component sẽ render ra ở chỗ nào thì tất cả chúng ta viết đoạn code sau vào khuông html cần chèn:

7.2. Tùy chỉnh cấu hình Route cho ứng dụng Angular

Để tùy chỉnh toàn bộ Router cho một ứng dụng Angular thì tất cả chúng ta cần tạo ra một đối tượng người sử dụng JSON chứa các tính chất như sau:

• path: Đường dẫn URL của component ngày nay.

• component: Ứng với đường dẫn phía trên thì load component nào.

• redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng. Ví dụ, khi người dùng gõ URL linh tinh, tất cả chúng ta muốn chuyển hướng và load trang trang chủ hoặc trang báo lỗi 404 thì hãy ghi rõ URL trang trang chủ hoặc 404 vào redirectTo.

• pathMatch: Tùy chỉnh cấu hình xem chính sách kiểm tra url là ra làm sao. khi giá trị là full thì tức là toàn bộ url từ trên đầu đến cuối sẽ phải xác thực như trong bộ JSON Router. Còn khi giá trị là prefix thì chuỗi trước tiên của url (dấu sược trước tiên) sẽ tiến hành kiểm tra. Mặc định nếu không nói gì thì prefix sẽ tiến hành chọn. Hãy xem đoạn code ví dụ về Router phía bên dưới:

Lời kết:Trong bài này, tôi đã giới thiệu tổng quan đến những bạn vì sao chọn Angular và các version của Angular . Đây là một bài giới thiệu tổng quan, mong nội dung bài viết sẽ khiến cho bạn hiểu hơn về Angular.