Tìm hiểu AngularJS
Bài đăng này đã không được cập nhật trong 8 năm
I. Mở đầu
AngularJS được phát triển bởi Google. Mục tiêu của AngularJS là tạo ra các single-page application. Ban đầu Angular JS được phát triển theo định hướng MVC, nhưng qua quá trình phát triển thì AngularJS đã chuyển hướng qua gần với MVVM, vì $scope object có thể được xem như một ViewModel và được bọc bởi một function *Ctrl được xem như Controler.
II. AngularJS Views và Directives
- Escaping HTML From The Model: Nếu dữ liệu thu được từ model có chứa các thẻ HTML, thì chúng sẽ được đóng gói lại trước khi đưa vào template. Nghĩa là HTML chỉ hiển thị ở dạng text.
- Directive là 1 cặp thẻ HTML mở rộng do người dùng định ngĩa,nó làm nhiệm vụ mô tả dữ liệu,bạn đã làm việc với AngularJS cũng có thể biết 1 số cặp thẻ Directive như ngApp, ngController ....
- Bản chất chúng ta dùng Directive là để Js tái sử dụng (Directive có thể hoạt động độc lập như module).Mỗi 1 Derective cần có template và lấy dữ liệu ở scope và thông qua service link và compile để render thành 1 giao diện mong muốn.Trong Directive bạn cũng có thể định nghĩa hay sử dụng controller.
1. Interpolation Directive
Interpolation directive là một trong nhiều directive căn bản của AngularJS. Interpolation directive được dùng để in ra dữ liệu trong template. Nó được sử dụng như sau:
<span>{{myData.text}}</span>
2. ng-bind Directive
Dùng để thay thế cho Interpolation directive.
<div ng-controller="MyController" >
<span ng-bind="myData.textf()"></span>
</div>
- Chú ý là nó data hiển thị sẽ nằm trong nháy kép mà không nằm trong {{ }}
3. ng-show, ng-hide Directives
Được sử dụng để show hoặc hide các thành phần html dựa trên data model.
<div ng-controller="MyController" >
<span ng-show="myData.showIt"></span>
<span ng-hide="myData.showIt"></span>
</div>
Các html elements này được ẩn đi dựa vào css, nên các thành phần này vẫn tồn tại ở trong DOM.
4. ng-switch Directive
ng-switch directive được sử dụng để thêm hoặc xóa các html element từ DOM dựa vào điều kiện.
<div ng-controller="MyController" >
<div ng-switch on="myData.switch">
<div ng-switch-when="1">Shown when switch is 1</div>
<div ng-switch-when="2">Shown when switch is 2</div>
<div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
</div>
</div>
Giả sử myData.switch có giả trị là 2 thì thẻ
<div ng-switch-when="2">Shown when switch is 2</div>
sẽ được in ra.
5. ng-if Directive
giống như ng-switch nhưng đơn giản hơn:
<div ng-controller="MyController" >
<div ng-if="myData.showIt">Data</div>
</div>
Thẻ này sẽ được show ra nếu myData.shoIt trả về là true. Giống như ng-show, ng-hide Nó cũng dựa vào điều kiện true, hay false để thực hiện hành vi của mình điều khác biệt ở đây là ng-if sẽ xóa html element khỏi DOM, còn ng-hide ng-show chỉ ẩn hiện html element dựa trên css.
6. ng-include Directive
Được sử dụng để include HTML fragment từ file khác vào trong HTML template.
<div ng-controller="MyController" >
<div ng-include="'fragment.html'"></div>
</div>
- Chú ý tên file phải nằm trong một nháy đơn nữa.
Ngoài có thể include HTML fragment dựa vào condition:
<div ng-controller="MyController" >
<div ng-include="myData.showIt &&'fragment-1.html' || 'fragment-2.html'"></div>
</div>
Trong ví dụ trên thì fragment-1.html sẽ được include nếu myData.show là true, ngược lại thì sẽ include fragment-2.html
7. ng-repeat Directive
ng-repeat directive được sử dụng để lặp qua các mảng item và generate ra HTML.
<ol>
<li ng-repeat="item in myData.items">{{item.text}}</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>
Ví dụ trên sẽ tạo ra các li tương ứng với các item trong mảng myData.items
Ngoài ra thì còn việc lặp còn có syntax khác như ví dụ dưới đây:
<ol>
<li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li>
</ol>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
});
</script>
Trong đó (name, value) là một phần của directive để AngularJS lặp qua các properties của object
8. Các biến đặc biệt trong ng-repeat
ng-repeat derective còn có các biến đặc biệt như: $index, $first, $middle, $last khi lặp qua một collection.
$indexchỉ vị trí của item trong collection.- 3 biến còn lại thuộc kiểu boolean, nó phụ thuộc vào vị trí của item trong collection.
III. Filtering
ng-repeat hỗ trợ việc filter lọc dữ liệu:
<div ng-repeat="item in myData.items | filter: itemFilter"></div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
$scope.itemFilter = function(item) {
if(item.text == "two") return false;
return true;
}
}
});
</script>
itemFilter là một functions của $cope object. Function này sẽ trả về giá trị True hoặc False. Nếu là true thì item trong collection sẽ được sử dụng trong ng-repeat, ngược lại nó sẽ bị bỏ qua.
1. Formatting Filters
Trong AngularJS có nhiều các filter theo định dạng dữ liệu nó được sử dụng kết hợp với iterpolation directive.
- date: Định dạng biến theo kiểu date
<span>{{myData.theDate | date: 'dd-MM-yyyy'}}</span>
-
currency: Định dạng biến kiểu tiền tệ
-
number: định dạng biến kiểu số.
<span>{{myData.theNumber | number: 2}}</span>
- lowercase: Convert biến thành chữ thường.
- uppercase: Convert biến thành chữ hoa
- json: Converts biến thành JSON string
2. Array Filters
AngularJS cũng hỗ trợ các filter cho mảng:
- limitTo: giới hạn kích thước mảng, ngoài ra thì filter này cũng hỗ trợ cho string(độ dài của string)
- filter: filter theo function
- orderBy: Sort mảng theo trường và điều kiện sort
IV. AngularJS $scope
$cope trong angularjs được dùng cho view và nó có cấu trúc kiểu cây. một scope gốc (root), và nhiều scope con. Mỗi view có một scope của riêng nó. Một biến được gán vào một scope của một view controller thì chỉ được truy cập ở controller đó. Cách controller khác không có quyền truy cập biến của sope đó.
`
1. Các đặc điểm, tính chất của Scope
a. Scope là nơi để định nghĩa và lưu giữ Model của ứng dụng
- Là nơi lưu trữ thông tin sẵn sàng để hiển thị. Mỗi Controller khi được gắn kết vào HTML (bằng khai báo ng-controller) đều tạo riêng một đối tượng $scope chung cho nó và khối HTML tương ứng.
b. Scope đóng vai trò làm ngữ cảnh của expression
- Scope được trang bị cơ chế móc nối trực tiếp (live binding) với View: chúng ta có thể dựa vào Scope để cập nhật Data Model ngay tức thì khi View thay đổi, cũng như dựa vào Scope để cập nhật View mỗi khi có sự thay đổi trong Data Model. Nhờ đặc điểm này mà chúng ta có thể đảm bảo được sự nhất quán của trạng thái ứng dụng.
c. Dữ liệu trong Scope gắn kết 2 chiều với View
- Mỗi khi chỉnh sửa thông tin trên View thì dữ liệu tương ứng bên trong Scope thay đổi theo và ngược lại mỗi khi dữ liệu trong Scope thay đổi cũng sẽ làm thay đổi thông tin trên View.
d. Cơ chế observer
- scope cung cấp cơ chế theo dõi (observe) sự thay đổi của Model thông qua hàm $watch(), cho phép đăng ký các bộ xử lý sự kiện mỗi khi có thay đổi.
- Scope được trang bị hàm $watch() cho phép đăng ký một hàm theo dõi sự thay đổi giá trị của một trường dữ liệu trong Scope. Mỗi khi trường dữ liệu này thay đổi giá trị, hàm theo dõi sẽ được kích hoạt.
e. Cơ chế lan truyền (propagate)
- Scope cung cấp cơ chế lan truyền (propagate) những thay đổi của Model, do bên ngoài phạm vi AngularJS (controllers, services, AngularJS event handlers) tác động, lên View thông qua hàm $apply().
V. Các function chính trong AngularJS
1. $watch()
- Khi tạo ra các biến trong scope thì angularjs sẽ tạo ra một function có tên là
watch. Hàm watch này có nhiệm vụ theo dõi bất cứ một sự thay đổi nào của biến trong scope hay nói cách khác $watch cho phép dễ dàng lắng nghe khi có sự thay dổi thuộc tính hay đối tượng. Nó được tạo ra bằng câu lệnh. $scope.$watch(). - $watch có thể sử dụng trong directive( scope.$watch), controller
- hàm watch phải được truyền với 2 tham số: 1 là giá gị hàm value function và 1 là listener function.
Cấu trúc: $watch(watchExpression, listener, [objectEquality]);
watchExpressionđược gọi mỗi khi gọi hàm $digest(), giá trị trả về đó sẽ được watchlistenerchỉ được gọi khi giá trị của watchExpression thay đổi.
2. $digest()
- Hàm $scope.$digest() sẽ lặp qua tất cả các watch trong scope object và con của các $cope object. Khi $digest() lặp qua các watch, Nó sẽ gọi giá trị của giá trị của từng hàm watch, nếu value function của hàm watch khác so với lần cuối hàm $digest() gọi thì listener function cho watch được gọi.
3. $apply()
- Hàm $apply() cho phép thêm một số lệnh trước khi nó tự động gọi hàm $digest(). Mục đích của $apply() là tạo sự thuận tiện đồng thời đảm bảo rằng không bị quên gọi hàm $digest() sau khi thực thi xong các lệnh.
document.getElementById("resetAddress").addEventListener('click',function() {
$scope.address = 'Pham Hung street';
$scope.$digest();
});
References
Example: Sample app
All rights reserved
