Giới thiệu Angular

Giới thiệu về Angular

Angular là một Javascript Framework được phát triển bởi google để 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, materials và 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ị giống nhau trong trình duyệt. Các bài hướng dẫn về angular này sẽ giúp bạn tìm hiểu và sử dụng Angular 7.

Giới thiệu các version angular

AngularJS

Phiên bản đầu tiền của angular là AngularJS được bắt đầu từ năm 2009 và đc ra mắt vào 20/10/2010 bởi lập trình viên Misko Hevery tại Google. 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í 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 và để xử lý logic.

Angular 2

• Ra mắt tháng 3 năm 2015 phiên bản bản angular 2 ra đời nhằm thay thế Angular Js với các 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 ,hỗ 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 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 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.
• Tối ưu hóa build production bằng việc sử dụng công cụ build optimizer được tích hợp sẵn vào trong CLI. Công cụ 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 để deploy app lên production

Angular 6

Được phát hành vào ngày 4 tháng 5 năm 2018 với những thay đổi so với Angular 5:

• 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ộ.
• 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-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ư:

• Support TypeScript 3.1
• ScrollingModule: Để scroll load dữ liệu.
• Drag and Drop: Chúng ta có thể dễ dàng thêm tính năng kéo và thả vào một mục
• Angular 7.0 đã cập nhật RxJS 6.3

Angular 8

Được phát hành vào tháng 3 và 4 năm 2019 với những thay đổi như:

• Support TypeScript 3.4

Angular 9

• Support TypeScript 3.7

Điều kiện tiên quyết

Để bắt đầu học Angular thì bạn nên có một số kiến thức sau:

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

Giới thiệu kiến thức trong angular 7

Các khái niệm cơ bản của angular:

• Data blinding.
• Two Way blinding.
• View Child, Input, Output.
• Directive ,Pipe ,Service, Module.
• Router