✅ Lập trình Angular là gì ⭐️⭐️⭐️⭐️⭐️

AngularJS là cái gì?

Đây là một mã nguồn mở, 1 framwork cho các ứng dụng web. Được phát triển từ năm 2009, hiện tại được duy trì bởi google và đã ra mắt phiên bản 2.0

Định nghĩa chính thức được đưa ra như sau :

AngularJS là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào.

Để học được AngularJS bạn cần phải có những kiến thức cơ bản javascript, object, string …. Việc bạn có hiểu biết chuyên sâu về javascript sẽ giúp cho bạn dễ dàng học AngularJS. Bản chất của AngularJS là hoạt động dạng Single Page, sử dụng API để lấy data, cho nên bạn cần biết các kĩ thuật DHTML, AJAX.

Đặc trưng của AngularJS

• Phát triển dựa trên Javascript
• Tạo các ứng dụng client-side theo mô hình MVC.
• Khả năng tương thích cao, tự động xử lý mã javascript để phù hợp vứi mỗi trình duyệt.
• Mã nguồn mở, miễn phí hoàn toàn và được sủ dụng rộng rãi.

Các tính năng cơ bản

• Scope : là đối tượng có nhiệm vụ giao tiếp giữa controller và view của ứng dụng.
• Controller : xử lí dữ liệu cho đối tượng $scope, từ đây bên views sẽ sử dụng các dữ liệu trong scope để hiển thị ra tương ứng.
• Data-binding : tự động đồng bộ dữ liệu giữa model và view
• Service : là singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng, cung cấp các phương thức lưu trữ dữ liệu có sãn. ($http, $httpBackend, $sce, $controller, $document, $compile, $parse, $rootElement, $rootScope …..)
• Filter : Lọc các tập con từ tập item trong các mảng và trả về các mảng mới.
• Directive : dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directive có sẵn như ngBind, ngModel…
• Temple : một thành phần của view, hiển thị thông tin từ controller
• Routing : chuyển đổi giữa các action trong controller, qua lại giữa các view.
• MVC & MVVM : mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller) mỗi phần có một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel.
• Deep link : Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể bookmark với công cụ tìm kiếm. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái.
• Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.

💻 GIA SƯ TIN HỌC

Các components chính

• ng-app : định nghĩa và liên kết một ứng dụng AngularJS tới HTML.
• ng-model : gắn kết giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML.
• ng-bind : gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML.

Ưu điểm của angularJS

• Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng.
• Cung cấp khả năng data binding tới HTML, khiến cho người dùng cảm giác linh hoạt, thân thiện.
• Dễ dàng Unit test
• Dễ dàng tái sử dụng component
• Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.
• Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.

Nhược điểm

• Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởi AngularJS không an toàn. Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn hơn.
• Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ bản.

Tại sao chúng ta nên sử dụng Angular

Angular giúp nâng cao năng suất của các lập trình viên.

Việc phát triển Web đã có bước thay đổi đáng kể trong vài năm qua. Với phiên bản ECMAScript (ES) 2015 – chúng ta quen thuộc với cái tên ES6, với những class hay arrow function. Angular 2+ ứng dụng những tính năng mới này giúp việc code với Angular trở nên rõ ràng và dễ học hơn rất nhiều.
Thêm vào đó, với việc ứng dụng Typescript – một ngôn ngữ – hay là một bản nâng cấp đáng giá của Javascript, Angular kết hợp với Typescript, chúng ta có một công cụ tuyệt vời giúp xử lý các vấn đề hạn chế của JS như kiểm tra kiểu dữ liệu, refactor code an toàn hơn,… từ đó cũng hỗ trợ tốt hơn cho việc Debug cũng như giúp các Dev thực sự hiểu rõ mã nguồn của họ hơn.

Cấu trúc phát triển rõ ràng.

Điều quan trọng của một Frameworks đối với lập trình viên đó là cấu trúc phát triển ứng dụng của nó, và Angular mang đến một kiến trúc rất rõ ràng, dựa trên ba yếu tố chính: class, các dependency được thêm vào và mô hình MVVM (model-view-view/model).
Angular sử dụng class trong ES6 với một loạt các thuộc tính để xây dựng toàn bộ các cấu trúc chủ chốt, giả sử bạn muốn tạo một Angular component – Tạo một class và thêm vào các thuộc tính cần thiết. Hay bạn muốn tạo một Angular module – Hãy tạo một class và thêm vào đó các thuộc tính cần thiết. Về cơ bản sẽ là như vậy, Angular cung cấp một cấu trúc rõ ràng để xây dựng từng tính năng cho ứng dụng của bạn.
Các dependency mạnh mẽ được sử dụng trong ứng dụng khi cần thiết, và khi cần tích hợp bất kì dependency nào, như HTTP hay Router, chúng ta chỉ cần thêm nó vào bên trong constructor của class.
Mô hình MVVM cũng giúp Angular chiếm lợi thế trong xây dựng ứng dụng client-side, thường ta sẽ có 3 điều cần quan tâm chính: đó là giao diện người dùng, mã nguồn điều khiển giao diện và mô hình dữ liệu (data) cho giao diện. Angular với MVVM phân biệt hoàn toàn rõ ràng các yếu tố trên nhờ mô hình MVVM:

• Phần giao diện (view) được định nghĩa trong một template bao hàm HTML dành cho một component nhất định. Template có thể là toàn bộ Layout hoặc bất cứ mảnh ghép nào trong Layout đó.
• Model được định nghĩa như là các thuộc tính của component class. Có thể hiểu là dữ liệu, dựa vào đó để phần View sử dụng để thực thi.
• view/model là class quản lý cả view cũng như model. Là phần code sẽ xử lý việc truy xuất dữ liệu, đồng thời thực thi các tương tác của người dùng trên view.
  Với việc ứng dụng các điểm tích cực của các thành phần trên, Angular khiến việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn.

💻 GIA SƯ DẠY LẬP TRÌNH

Extensive binding

Rất nhiều ứng dụng Web làm việc với dữ liệu (data). App sẽ truy xuất dữ liệu từ Server và hiển thị dữ liệu đó tới người dùng trên view, sử dụng template. Và các tương tác của người dùng sẽ được khiến dữ liệu thay đổi, được view ghi nhận và lưu lại trên server. Data Binding trong Angular giúp bạn thực thi tiến trình trên rất dễ dàng. Đơn thuần từ việc ràng buộc thành phần HTML trong template với các thuộc tính trong class và dữ liệu sẽ tự động xuất hiện trên màn hình. Với các tương tác của người dùng đòi hỏi thay đổi dữ liệu, Angular sử dụng phương pháp two-way binding. Bất kì thay đổi dữ liệu đến từ view sẽ tự động cập nhật thuộc tính “model” bên trong class.
Thêm vào đó, Angular cũng hỗ trợ property binding – cho phép chúng ta điều khiển DOM bằng cách ràng buộc thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên trong view. Ví dụ, chúng ta ràng buộc thuộc tính hidden đối với một thẻ img với thuộc tính hideImg bên trong class. Khi thuộc tính hideImg nhận giá trụ true, img sẽ tự động hidden và ngược lại khi hideImg nhận giá trị false, thẻ img sẽ tự động hiển thị tới người dùng.
Cuối cùng, Angular hỗ trợ event binding, có nghĩa là chúng ta có thể xử lí bất kì event nào từ phía view, như HTML event. Về cơ bản chúng ta sẽ gắt event với một method bên trong class. Mỗi khi event xuất hiện, method tương ứng sẽ được thực thi.
Extensive binding giúp quá trình hiển thị dữ liệu, điều khiển DOM, thực thi các event một cách trơn tru và dễ dàng.

Hỗ trợ đầy đủ tính năng điều hướng (routing)

Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ cung cấp nhiều view khác nhau tương ứng với với các chức năng chính. Ví dụ như một trang web với các trang giới thiệu, trang nội dung, trang chi tiết, trang đăng nhập, đăng ký,… Chúng ta sẽ cần hiển thị đúng view vào đúng thời điểm. Đó là mục đích của điều hướng (routing). Và Angular cung cấp đầy đủ tính năng cho việc này, chúng ta định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng. Và chúng ta sẽ kích hoạt route dựa trên tương tác của người dùng (user). Chúng ta có thể truyền thêm dữ liệu vào các route, giúp view hiển thị nội dung một cách dynamic, có thể bảo vệ route để người dùng chỉ có thể truy cập sau khi đã đăng nhập hoặc có quyền truy cập, có thể ngăn chặn việc người dùng ngay lập tức rời một trang khi các thao tác còn dang dở cho đến khi họ thực sự xác nhận việc rời đi hoặc lưu lại tiến trình sử dụng,…Angular đồng thời cũng hỗ trợ child-route cho việc điều hướng bên trong một route. Việc điều hướng giữa các view bên trong ứng dụng Angular thực sự rất linh hoạt và mạnh mẽ.

Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng.

Kích thước và hiệu năng có mối liên quan mật thiết khi chúng ta làm việc trên nền tảng Web. Một component nhỏ hơn sẽ giúp nâng cao hiệu suất khởi động – giảm cả thời gian download cũng như thời gian cũng như thời gian compile trên trình duyệt. Giảm kích thước component và giúp tăng hiệu suất là một ưu điểm cũng như mục tiêu mà Angular mong muốn mang đến cho các lập trình viên.
Giảm kích thước ứng dụng có thể thực hiện bằng nhiều cách. Đầu tiên chúng ta có thể giảm tối đa kích thước của từng component tới mức tối thiểu có thể. Tiếp theo các component sẽ được sắp xếp bên trongtrong Angular Module bằng 1 cách đề cho các nhóm logic có liên quan đến nhau sẽ được download cùng với nhau. Và bước thứ ba, lazy loading bên trong các route sẽ chỉ downloaad những module cần thiết cho việc hiển thị nội dung cần thiết tới người dùng, và sẽ không bao giờ download những nội dung không cần thiết.
Chúng ta có một trình biên dịch tên là AOT, trình biên dịch này sẽ chạy một lần trong thời gian build ứng dụng. Trình duyệt sau đó sẽ download phiên bản chưa được biên dịch của ứng dụng và render ứng dụng tới người dùng ngay lập tức mà không cần biên dịch nó lần đầu trong trình duyệt. Thêm nữa là sẽ koong cần download trình biên dịch Angular, giúp làm giảm đáng kể kích thước (size) của ứng dụng cần tải về.

Document và cộng đồng (community)

Document cho Angular 2+ – angular.io – rất đầy đủ và chi tiết, bao hàm giới thiệu cơ bản giúp bạn làm quen nhanh chóng với Angular, giới thiệu chi tiết, từ cơ bản đến nâng cao các API của Angular, cũng như có hẳn một Tutorial Basic được xây dựng nên bởi Angular team, cung cấp cho bạn nhanh chóng nắm bắt các thuộc tính cơ bản của Framework.
Angular cũng có một cộng đồng sử dụng rất lớn, đồng thời được phát triển bởi gã khổng lồ Google, khiến Angular không ngừng trưởng thành với các phiên bản luôn được cập nhật, hiện chúng ta đã có phiên bản Angular 6+ mới cam kết LTS từ Google.

Các phiên bản Angular

Phiên bản sớm nhất của Angular đặt tên là Angular 2. Sau đó đổi tên thành Angular. Sau đó team Angular phát triển một phiên bản mới thường xuyên và bản mới nhất stable là Angular 8.2.14.

Hiện tại đã có bản beta của Angular 9 phát hành vào 25.9.2019.

Lịch sử phát hành

ANGULAR VERSION	DATE	DESCRIPTION
Angular 2	14.09.2016	Initial Version of Angular
Angular 4	23.03.2017	Version 4
Angular 5	11.11.2017	Version 5
Angular 6	03-05-2018	Version 6
Angular 7	18-10-2018	Version 7
Angular 8	25-08-2019	Version 8
Angular 9	13-11-2019	9.0.0-rc.2

Sự khác nhau chính giữa AngularJS và Angular

Hỗ trợ ES6

Angular được viết hoàn toàn bằng TypeScript và tuân thep đặc tả ECMAScript 6. Nghĩa là nó hỗ trợ ES6 Module, class framework…

Các component là controller mới

Trong AngularJS có các Controllers. Trong Angular Controllers được thay thế bởi Angular Component. Các controller và view trong AngularJS được định nghĩa như sau:

//View 
<body ng-controller=’appController’>     
    <h1>vm.message<h1> 
</body> 
 
//Controller angular.module(‘app’).controller(‘appController’,appcontroller) {     
    message=’Hello Angular’; 
}

Trong Angular bạn sử dụng Component. Component đơn giản được viết bằng TypeScript như sau:

import { Component } from '@angular/core'; 
 
@Component({     
    selector: 'app',     
    template: '<h1>{{message}} </h1>' 
}) 
export class AppComponent  {
      message: string=’Hello Angular’; 
}

Trong Angular, một component được hiển thị bằng UI element. Bạn có thể có nhiều component trong một trang SPA. Mỗi component là một thành phần độc lập với các component khác và quản lý một phần trong trang. Các component có thể có các component con và component cha.

Directive

AngularJS có rất nhiều directive. Một số directive được sử dụng nhiều nhất là ng-repeat và ng-if.

<ul>     
    <li ng-repeat =customer in vm.customers> 
        {{customer.name}}     
    </li> 
</ul> 
<div ng-if=”vm.isVIP”>     <h3> VIP Customer </h3> </div>

Angular cũng có các directive, nhưng cú pháp khác nhau. Nó có một dấu * ở trước tên directive chỉ ra nó là một structural directive.

<ul>     
    <li *ngFor =#customer of customers>         
        {{customer.name}}     
    </li> 
</ul> 
<div *ngIf=”vm.isVIP”> 
    <h3> VIP Customer </h3> 
</div>

Các directive về style như ng-style, ng-src và ng-href cũng đã bị bỏ đi. Nó được thay thế bởi thuộc tính cho HTML. Tạo một custom directive dễ dàng với Angular:

@Directive({     
   selector: '[MyDirective]' 
}) 
class MyDirective { }

Data Bindings

Cơ chế binding dữ liệu thì vẫn thế, chỉ có cú pháp thay đổi một chút

Interpolation

//AngularJS   
<h3> {{vm.customer.Name}}</h3>  
 
//Angular 
<h3> {{customer.Name}}</h3>

Chú ý là chúng ta sử dụng controller alias VM để chỉ ra thể hiện của controller trong AngularJS. Trong Angular thì context này được ẩn đi.

One way binding

//AngularJS 
<h3> ng-bind=vm.customer.name></h3> 
 
//Angular 
<h3 [innerText]=”customer.name” ></h3>

Angular có thể binding với bất cứ thuộc tính nào của HTML.

Event Binding

//AngularJS 
<button ng-click=”vm.save()”>Save<button>  
 
//Angular 
<button (click)=”save()”>Save<button> 

AngularJS sử dụng ngClick directive để bind vào sự kiện. Trong Angular ngClick directive bị bỏ đi. Bạn có thể bind trưc jtieesp nó cho DOM events.

Two-way binding

//AngularJS 
<input ng-model=”vm.customer.name”>  
 
//Angular 
<input [(ng-model)]=”customer.name”> 

$scope đã ra đi

Angular không sử dụng $scope nữa. AngularJS sử dụng để kiểm tra xem form có thay đổi không dựa trên đối tượng $scope. Sau đó nó sẽ trigger watcher và sau đó nó chạy lặp đi lặp lại việc này.

Angular sử dụng zone.js để tìm ra thay đổi. Zone.js áp dụng để vá trên tất cả những hoạt động toàn hệ thống một cách bất đồng bộ như là click event, timer event, HTTP request…Nó được liên quan mật thiết với Angular. Khi có các thay đổi xuất hiện trong ứng dụng Angular. Angular sẽ chạy các cơ chế tìm sự thay đổi trong toàn ứng dụng.

Filter được đổi tên thành Pipe

Trong AngularJS, chúng ta sử dụng Filters như sau:

<td>{{vn.customer.name | uppercase}}</td> 

Angular thì sử dụng cú pháp tương tự nhưng tên sẽ là Pipe

<td>{{customer.name | uppercase}}</td>

Khởi động theo Platform cụ thể

Trong AngularJS chúng ta sử dụng ng-app directive trong HTML và Angular sẽ khởi động sau đó attach chính nó vào ng-app.

<body ng-app=’app’> </html> 

Khởi động trong Angular dược hoàn thành trong code. Khởi động ứng dụng Angular không đơn giản như trong AngularJS. Code dưới đây giải thích làm cách nào mà Angular khởi động AppModule sử dụng platformBrowserDynamic module.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import {AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); 
 

Khởi động cũng tuỳ theo platform trong Angular. Bạn có thể có các cơ chế khởi động khác nhau cho mobile và web application.

Services

AngularJS có Services, Factories, Providers, Constants và các giá trị sử dụng để sử dụng lại code. Những thành phần này được inject vào Controllers để sử dụng.

Hỗ trợ Mobile

AngularJS không được xây dựng để hỗ trợ mobile từ trong tư duy. Angular được thiết kế để phát triển mobile.

Tóm lại

Angular đã được thay đổi mạnh mẽ từ AngularJS trong nhiều mặt và trở nên nhanh hơn và dễ học hơn. Các yếu tố trên đây là danh sách ngắn gọn và chưa hoàn thiện.