Giới thiệu Angular 6x - Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về Angular 6x miễn phí dành cho tất cả các đối tượng. Đây là series tự học Angular hoàn toàn miễn phí, mỗi series được phân tích cụ thể, rõ ràng, cùng với những ví dụ đơn giản và dễ hiểu. Giúp các bạn có cái nhìn tổng quan nhất về những điều cơ bản của Angular 6 , có thể học angular bất cứ nơi đâu, bất cứ khi nào mà bạn muốn. Sau đây mình sẽ giải thích vì sao chọn Angular, giới thiệu sơ lược Angular 6 , cũng như phiên bản phát hành của Angular .

1. Vì sao chọn Angular?

Hiện nay có rất nhiều các framework JavaScript như Angular , React , Vue , Backbone ,... giúp các bạn phát triển các ứng dụng web một cách nhanh chóng. Nhưng để lựa chọn framework nào cho ứng dụng là một vấn đề nan giải. Bởi mỗi thứ đều có điểm mạnh yếu riêng. Nhiều người cảm thấy tốt khi sử dụng React , Backbone ,... nhưng với mình, lần đầu tiên tiếp xúc với Angular , mình tìm hiểu nó rất nhanh, bởi cấu trúc của nó khá rõ ràng, ra nhiều version mới giúp hỗ trợ trong việc phát triển ứng dụng. Sau đây mình sẽ nói về những ưu điểm của Angular :

• Phát triển với nhiều ứng dụng lớn.
• TypeScript : Ngoài việc sử dụng Javascript , Angular còn được viết typescript. Typescript là 1 superset của Javascript .
• Hiệu năng và tương thích cao.
• Cấu trúc rõ ràng, dễ dàng phát triển và mở rộng.
• Giao diện người dùng đơn giản.
• Có lực lượng hỗ trợ đông đảo: do là mã nguồn mở nên có rất nhiều tài liệu, câu hỏi về Angular như Google , Youtube , Staskoverflow ,...

2. Tổng quan về Angular6

Angular 6 là một javascript framework để xây dựng các application web bằng JavaScript , HTML và TypeScript , là một supperset của JavaScript . Angular cung cấp các tính năng tích hợp cho animation , http service và các tài liệu lần lượt có các 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.

Trước khi học về Angular 6 , yếu tố cần là bạn phải hiểu về:

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

3. Các version của Angular

Có 5 version của angular :

Angularjs/Angular v1

Dựa trên mô hình MVC ( Model – View – Controller ).

• Model là thành phần trung tâm thể hiện hành vi của ứng dụng và quản lí dữ 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 .

Angular v2

Hầu như viết lại hoàn toàn của Angularjs . Controllers và $scope ( Angular 1 ) được thay thể bởi 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 . Thay vì viết một file HTML dài và định nghĩa các event trong các html component như trong Angular v1 thì view được chia thành nhiều component với khai báo class từ đó giúp dev dễ dàng tái sử dụng mã nguồn.

Angular v4

Đây là một phiên bản cập nhật từ Angular v2 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 v5

Đã được phát hành vào tháng 11 năm 2017. Theo mục tiêu về tốc độ và kích thước, nó nhanh hơn và có kích thước nhỏ hơn so với Angular 4 . 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.
• 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 di 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.
• Hỗ trợ Lambda : biểu thức lambda với tên thích hợp có thể được sử dụng thay cho các hàm.
• Tối ưu hóa khi build: Xây dựng tối ưu hóa giới thiệu. Nó tối ưu hóa kích thước và cải thiện tốc độ ứng dụng. Angular CLI sử dụng Tối ưu hóa một cách tự động.
• Trình biên dịch cải tiến: Trình biên dịch tăng từ Angular 5 trở lên. Dẫn đến sự biến đổi của TypeScript cũng thay đổi theo từ 2.3 trở đi.

Angular v6

Được phát hành vào tháng 5 năm 2018 chứng tỏ là một bước đột phá lớn.

• Cập nhật CLI, command line interface: thêm 1 số lệnh mới như ng-update để chuyển từ version trước sang version hiện tại; 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ộ.
• Cập nhật CDK (Component Development Kit): Hỗ trợ tạo các thành phần UI tùy chỉnh, responsive web, tạo pop-ups mà không cần thư viện Material Angular .
• Cập nhật Angular Material : Component tree được thêm vào, mat-tree , a styled version and cdk-tree, để thể hiện cấu trúc phân cấp như cây.
• Sử dụng Rxjs
• Angular Element: 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: cho phép nhiều Validators được áp dụng trên form builder.
• Tree Shaking trên service: giúp loại bỏ mã code chết.

4. Lời kết

Trong bài này, mình đã giới thiệu tổng quan đến các bạn vì sao chọn Angular , Angular 6 và các phiên của Angular . Đây là một bài giới thiệu tổng quan, giúp cho bạn hiểu hơn và lựa chọn framework phù hợp cho dự án sắp tới của mình. Bài tiếp theo, mình sẽ hướng dẫn các bạn cách cài đặt môi trường cũng như công cụ lập trình phổ biến và được nhiều lập trình viên sử dụng. Các bạn cố gắng theo dõi nhé!