AngularJS là gì?

AngularJS là một thư viện JavaScript.

Xem thêm: AngularJs Single Page Application là gì?

Nó có thể thêm một trang HTML vào bên trong thẻ <script>.

Sử dụng thư viện AngularJS:

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

1. Kiến trúc thiết kế của AngularJS

architecture_of_an_angular_2_application

angularjs_concepts

Kiến trúc của Angular 2 gồm module, component, template, metadata, data binding, directive, service và dependency injection.

AngularJS được xây dựng trên niềm tin rằng lập trình khai báo nên được sử dụng để tạo ra các giao diện người dùng và kết nối các thành phần phần mềm, trong khi lập trình bắt buộc là phù hợp hơn để xác định logic kinh doanh của một ứng dụng. Khung điều chỉnh và mở rộng HTML truyền thống để trình bày nội dung động thông qua hai cách liên kết dữ liệu cho phép đồng bộ hóa tự động của các mô hình và quan điểm. Kết quả là, AngularJS nhấn mạnh thêm thao tác DOM rõ ràng với mục tiêu nâng cao khả năng kiểm thử và hiệu suất.

Mục tiêu thiết kế AngularJS bao gồm:

  • để tách thao tác DOM từ logic ứng dụng. Khó khăn trong việc này bị ảnh hưởng đáng kể bởi cách thức mã được cấu trúc.
  • để tách các mặt hàng của một ứng dụng từ phía máy chủ. Điều này cho phép việc phát triển tiến bộ song song, và cho phép tái sử dụng của cả hai bên.
  • để cung cấp cấu trúc cho cuộc hành trình của việc xây dựng một ứng dụng: từ thiết kế giao diện người dùng, thông qua văn bản cho logic kinh doanh, để thử nghiệm.

AngularJS thực hiện các mô hình MVC (model view controller) để trình bày riêng biệt, dữ liệu, và các thành phần logic. Sử dụng tiêm phụ thuộc, góc mang truyền thống dịch vụ phía máy chủ, chẳng hạn như điều khiển xem phụ thuộc, các ứng dụng web phía máy khách. Do đó, phần lớn gánh nặng cho máy chủ có thể được giảm.

Các thành phần của Anguarjs

  • Data-Binding: tự động đồng bộ dữ liệu giữa model và view
  • Scope: chứa các đối tượng thuộc về model, chúng hoặt động như liên kết giữa controller và view
  • Controller: đó là những function Javascript bị ràng buộc cho những scope cụ thể
  • Service: AngularJs đi kèm với những service có sẵn, ví dụ $http để tạo XMLHttpRequests. Chúng được khởi tạo một lần.
  • Filter: có tác dụng chọn 1 tập các phần từ từ một mảng và trả về một mảng mới
  • Directive: là những đánh dấu trên DOM (như phần tử, thuộc tính, css và hơn thế). Đây có thể được sử dụng để tạo ra các thẻ HTML tùy chỉnh mới. AngularJS có những directive có sẵn (ngBind, ngModel…)
  • Template: đó là những view được trả về với thông tin từ controller và model. Đó có thể là file lẻ (index.html) hoặc nhiều view trông một page, sử dụng “parttials”
  • Routing: đó là khái niệm về chuyển view
  • Model View Whatever – MVC là một thiết kế cho việc chia ứng dụng thành các phần (model, view, controller), mỗi phần có trách nhiệm riêng. AngularJS không thực hiện MVC một cách chính thống, nhưng có vẻ nó gần với MVVM hơn (model view viewmodel). AngularJS giúp liên tưởng một cách hài hước đến mô hình Model View Whaterver.
  • Deep Linking: cho phép mã hóa trạng thái của ứng dụng trong URL để có thể đánh dấu (bookmark). Ứng dụng có thể được khôi phục từ URL với trạng thái cũ.
  • Dependency Injection: AngularJS có một hệ thống injection có sẵn, giúp lập trình viên dễ dàng hơn để phát triển, hiểu và test.

2. Scope

concepts-controller-angularjs

AngularJS sử dụng thuật ngữ “scope” một cách tương tự như các nguyên tắc cơ bản của khoa học máy tính.

Scope trong khoa học máy tính mô tả khi trong chương trình một ràng buộc cụ thể là hợp lệ. Các đặc điểm kỹ thuật ECMA-262 định nghĩa phạm vi như: môi trường từ vựng trong đó một đối tượng Chức năng được thực hiện ở phía client script web; giống như thế nào phạm vi được xác định trong phép tính lambda.

Là một phần của kiến trúc “MVC” , scope tạo ra “Model”, và tất cả các biến được định nghĩa trong scope có thể được truy cập bằng cách vào “View” cũng như “Controller”. Scope hoạt động như một chất keo và gắn vào “View” và “Controller”.

Trong AngularJS , “Scope” là một loại nhất định của đối tượng mà chính nó có thể trong scope hoặc ra khỏi scope trong bất kỳ một phần nhất định của chương trình, theo các quy tắc thông thường của phạm vi biến trong JavaScript giống như bất kỳ đối tượng khác. Khi thuật ngữ “scope” được sử dụng bên dưới đây, nó đề cập đến Angular scope và không phải là scope của một name binding.

3. Bootstrap

angularjs-directives

Các nhiệm vụ thực hiện bởi AngularJS bootstrapper xảy ra trong ba giai đoạn sau khi DOM đã được tải:

  • Tạo ra một Injector mới
  • Biên soạn (complication) các chỉ thị (directives) trang trí (decorate) cho DOM
  • Liên kết của tất cả các directive tới scope

AngularJS directive cho phép lập trình viên xác định tùy chỉnh và tái sử dụng HTML – giống như những phần từ (element) và thuộc tính (attribute) định nghĩa các liên kết dữ liệu (data binding) và các hành vi (behavior) của các thành phần hiện thị. Một trong những phần phổ biến nhất sử dụng các chỉ thị (directive):

ng-app

  • Khai báo phần tử gốc của ứng dụng AngularJS, bên dưới nó các chỉ thị (directive) có thể được dùng để khai báo các liên kết (binding) và định nghĩa hành vi (behavior).

ng-bind

  • Thiết lập giá trị text của một phần tử DOM cho giá trị trị của một biểu thức. Ví dụ <span ng-bind=”name”></span> hiển thị giá trị của ‘name’ bên trong thẻ span. Bất cứ thay đổi của biến ‘name’ trong scope của chương trình ảnh hưởng ngay tới phần tử DOM đó.

ng-model

  • Giống như ng-bind, nhưng thiết lập một ràng buộc dữ liệu (data binding) hai chiều, giữa view và scope.

ng-model-options

  • Cung cấp điều chỉnh cách model cập nhật được hoàn thành.

ng-class

  • Cho phép các thuộc tính class được nạp tự động.

ng-controller

  • Chỉ định một lớp controller Javascript đánh giá lại (evaluate) các diễn tả (expression) HTML

ng-repeat

  • Khởi tạo 1 phần tử trên từng phần của một danh sách

ng-show & ng-hide

  • Hiện hoặc ẩn một cách có điều kiện một phần tử, dựa trên giá trị của biểu thức. Ẩn và hiện đạt được bởi thiết lập style display CSS.

ng-switch

  • Khởi tạo có điều kiện một mẫu (template) từ một tập hợp các lựa chọn, dựa trên giá trị của biểu thức lựa chọn.

ng-view

  • Chỉ thị cơ bản (base directive) đóng vai trò kiểm soát các định tuyến (route) để giải quyết JSON trước khi vẽ (rendering) các mẫu (template) được điều phối bởi những controller cụ thể.

ng-if

  • Chỉ thị so sánh (if) cơ bản cho phép hiện phần tử theo sau nếu điều kiện là đúng. Khi điều kiện là sai, phần tử sẽ bị xóa khỏi DOM. Khi đúng, một bản sao của phần tử sẽ được thêm vào.

ng-animate

  • Module hỗ trợ chuyển động cho Javascript và CSS3. Khung chính của chuyển động CSS3 được móc (hook) bên trong lõi và các tùy chỉnh chỉ thị (custom directive).

4. Liên kết dữ liệu hai chiều (two-way data binding)

two_way_data_binding-angularjs

Liên kết dữ liệu hai chiều là tính năng đáng chú ý của AngularJS, giảm sự phụ thuộc với server. Các mẫu (template) được thể hiện (render) trong HTML theo những dữ liệu chứa trong một scope đã được định nghĩa trong phần model. $scope service trong Angular phát hiện các thay đổi trong phần model và thay đổi các thể hiện HTML trong view thông qua controller. Tương tự vậy, các thay đổi ở view sẽ phản ánh lại trong model. AngularJS phát hiện các thay đổi trong model bằng cách so sánh các giá trị hiện tại với giá trị lưu trữ trước đó trong một tiến trình kiểm tra.

5. Debug AngularJS

Sử dụng Chrome plugin có tên là Batarang.

6. Hiệu suất

angularjs-performance

AngularJS thiết lập mô hình chu kỳ. Mỗi chu kỳ có thể xem như một vòng lặp, trong đó AngularJS kiểm tra nếu có bất cứ thay đổi của tất cả các biến được theo dõi trong tất cả $scope. Vì thế, nếu một $scope.myVar được định nghĩa trong một controller và biến này đươc theo dõi, AngularJS sẽ theo dõi mọi thay đổi trên myVar trong mỗi vòng lặp.

Cách này dẫn tới việc hiện thị chậm khi AngularJS kiểm tra quá nhiều biến trong $scope mỗi chu kỳ. Tốt nhất nên giữ ít hơn 2000 biến trên từng page.

Tham khảo:

http://www.w3schools.com/angular/angular_intro.asp

https://en.wikipedia.org/wiki/AngularJS

https://www.tutorialspoint.com/angularjs/angularjs_overview.htm

Xem thêm:

https://angularjs.org/

Học AngularJS:

http://www.w3schools.com/angular/

http://www.tutorialspoint.com/angularjs/

1 thought on “AngularJS là gì?”

Leave a Reply

Your email address will not be published. Required fields are marked *