Bài 3: AngularJS – Directives
AngularJS cho bạn mở rộng HTML với các thuộc tính mới gọi là Directives . Có vài thuộc tính đặc biệt bắt đầu bằng ng-, các directive này AngularJS đã xây dựng sẳn, ngoài ra AngularJS cũng cho bạn tự định nghĩa directives của riêng bạn. Chúng ta xem một số directives được xây dựng sẳn : ...
AngularJS cho bạn mở rộng HTML với các thuộc tính mới gọi là Directives. Có vài thuộc tính đặc biệt bắt đầu bằng ng-, các directive này AngularJS đã xây dựng sẳn, ngoài ra AngularJS cũng cho bạn tự định nghĩa directives của riêng bạn. Chúng ta xem một số directives được xây dựng sẳn :
- ng-app – directive này bắt đầu một ứng dụng AngularJS
- ng-init – directive này khởi tạo dữ liệu
- ng-model – directive này định nghĩa model, đó là các biến để sử dụng trong AngularJS
- ng-repeat – directive này lặp lại các nhân tố html cho mổi item trong một bộ. Nó như vòng lặp đấy các bạn.
ng-app directive
directive này đã được diễn giải ở bài trước rồi. Nó định nghĩa nơi bắt đầu cho ứng dụng AngularJS. Cũng được sử dụng để load các module AngularJS khác nhau.
ng-init directive
Khởi tạo dữ liệu cho ứng dụng. Nó được sử dụng để đặt các giá trị tới các biến để sử dụng trong ứng dụng.
Ví dụ sau sẽ khởi tạo một mảng các quốc gia. Chúng ta sẽ sử dụng cú pháp JSON để định nghĩa mảng các quốc gia. Nếu các bạn chưa biết JSON là gì thì có thể tham khảo http://www.json.org/.
<div ng-app = “” ng-init = “countries = [{locale:’en-US’,name:’United States’}, {locale:’en-GB’,name:’United Kingdom’}, {locale:’en-FR’,name:’France’}]”>
…
</div>
ng-model directive
Định nghĩa biến để sử dụng trong ứng dụng AngularJS.
Ví dụ ta định nghĩa một biến model có tên là name như sau:
<div ng-app = “”>
…
<p>Enter your Name: <input type = “text” ng-model = “name”></p>
</div>
ng-repeat directive
Như mô tả là nó để đỗ dữ liệu ra như vòng lặp for trong các ngôn ngữ lập trình khác PHP, C, Java ….
<div ng-app = “”>
…
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = “country in countries”>
{{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
</li>
</ol>
</div>
Trong ví dụ ta thấy countries là biến mãng dữ liệu các quốc gia, và giá trị dưới dạng json
Và một điều lưu ý là để bind dữ liệu, như bài 2 thì ta đã biết directive ng-bind. Một cách khác để làm điều này mà không cần sử dụng thẻ html là ta dùng ký hiệu 2 dấu ngoặc nhọn {{.
Việc đổ dữ liệu trong {{ cũng như trong javascript, chuỗi sẽ nằm trong dấu nháy và muốn in rá trị của biến có kết hợp chuỗi thì tao dùng dấu +, cái này nói lại nếu bạn đã từng biết javascript thì nhìn vào đã hiểu roài .
Rồi toàn cảnh cho các directive được sử dụng trong bài này, mời các bạn tạo một file directiveAngularJS.htm với nội dung sau:
<html>
<head>
<script src =http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = “” ng-init = “countries = [{locale:’en-US’,name:’United States’}, {locale:’en-GB’,name:’United Kingdom’}, {locale:’en-FR’,name:’France’}]”>
<p>Enter your Name: <input type = “text” ng-model = “name”></p>
<p>Hello <span ng-bind = “name”></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = “country in countries”>
{{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
</li>
</ol>
</div>
</body>
</html>
Các bạn có thể thay thế <span ng-bind =”name”></span> thành {{name}} vẩn ok nhé, 2 cách.
Kết quả màn hình sẽ là :
Tạo Directives Mới
Để tạo directives bạn sử dụng hàm .directive.
Để gọi directive mới, tạo một nhân tố HTML với cùng tên directive mới.
Khi đặt tên một directive, bạn phải đặt theo phong cách lạc đà, là mổi chữ cái viết hoa đấy, chữ đầu tiên viết thường. Nhưng khi gọi nó, bạn phải sử dụng dấu gạch ngang (-) cho mổi tên.
Ví dụ : tên directive: myTestDirective, và gọi my-test-directive (viết thường).
EX:
<body ng-app=”myApp”>
<my-test-directive></my-test-directive>
<script>
var app = angular.module(“myApp”, []); //khai báo một module app, giống như bạn khởi tạo một đối tượng trong OOP vậy.
app.directive(“myTestDirective”, function() {
return {
template : “<h1>Made by a directive!</h1>”
};
});
</script>
</body>
Diễn giải:
Như ví dụ trên bạn thấy chúng ta đã tao ra một nhân tố html giống với tên directive mới tạo
<my-test-directive></my-test-directive> và cặp thẻ này sẽ là hiễn thị giá trị của directive.
Đoạn code trong thẻ script là thực hiện tạo directive, dòng đầu là tạo một đối tượng angular bằng cú pháp angular.module(“tên đăng ký angular”,[]); ở trên đã đăng ký tên ng-app=”myApp”.
Kết tiếp tạo directive dùng hàm .directive vả trả về một cặp giá trị template: giá trị.
Ngoài tạo một nhân tố html giống tên với directive để nhận giá trị, bạn cũng có thể sử dụng các cách khác như sau:
- Tên directive //đã trình bày trong ví dụ
- Attribute
- Class
- Comment
Attribute
Bây giờ ta thế <my-test-directive></my-test-directive> bằng <div my-test-directive></div>
Class
Thế bằng <div class=”my-test-directive”></div>
Comment
<!– directive: my-test-directive –>
Đến đây khi chạy bạn sẽ thấy được kết quả ở phần đặt giống tên directive và Attribute, còn phần class và comment thì không thấy kết quả. Cho nên chúng ta qua thêm 1 mục nữa để giải quyết cái này.
Restrictions
Bạn có thể giới hạn directives của bạn để chỉ gọi một số phương thức chỉ định mà thôi.
Ví dụ:
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body ng-app=”myApp”>
<my-test-directive></my-test-directive>
<div my-test-directive></div>
<script>
var app = angular.module(“myApp”, []);
app.directive(“myTestDirective”, function() {
return {
restrict : “A”,
template : “<h1>Made by a directive!</h1>”
};
});
</script>
<p><strong>Note:</strong> By setting the <strong>restrict</strong> property to “A”, only the HTML element with the “my-test-directive” attribute has invoked the directive.</p>
</body>
</html>
Như bạn thấy ta đã sử dụng 2 nhân tố html là tên và thuộc tính để nhận giá trị của directive và hiễn thị, tuy nhiên khi chạy bạn chỉ thấy được 1 dòng kết quả là “Made by a directive!” mà thôi , thay vì là 2 dòng, vì ở kết quả trả về ta đã restrict là “A”, tức là chỉ có Attribute mới nhận được giá trị. Nếu bạn không đưa restrict vào thì sẽ hiễn thị 2 dòng kết quả.
Đây là restrict giới hạn nhân tố html nhận giá trị, và riêng đối với nhân tố html nhận giá trị directive là class và comment thì bắt buộc ta phải dùng thêm restrict nó mới ra kết quả.
EX:
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body ng-app=”myApp”>
<div class=”my-test-directive”></div>
<script>
var app = angular.module(“myApp”, []);
app.directive(“myTestDirective”, function() {
return {
restrict : “C”,
template : “<h1>Made by a directive!</h1>”
};
});
</script>
<p><strong>Note:</strong> You must add the value “C” to the restrict property to be able to invoke the directive from a class name.</p>
</body>
</html>
Cho Comment ta thêm một giá trị nữa là replace, nếu không comment sẽ bị ẩn
<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body ng-app=”myApp”>
<!– directive: w3-test-directive –>
<script>
var app = angular.module(“myApp”, []);
app.directive(“myTestDirective”, function() {
return {
restrict : “M”,
replace : true,
template : “<h1>Made by a directive!</h1>”
};
});
</script>
<p><strong>Note:</strong> We’ve added the <strong>replace</strong> property in this example, otherwise the comment would be invisible.</p>
<p><strong>Note:</strong> You must add the value “M” to the <strong>restrict</strong> property to be able to invoke the directive from a comment.</p>
</body>
</html>
Giá trị cho restrict là :
- E cho tên
- A cho Attribute
- C cho Class
- M cho Comment
Mặc định thì E và A có thể được gọi directive ngầm định mà không cần đưa restrict vào.
