Common Directives - Những chỉ thị phổ biến trong angularJS
Mở đầu Nếu bạn đã từng nghe hay đọc về AngularJs thì chắc chắn không thể bỏ qua khái niệm directive. Đây là công nghệ được sử dụng rất nhiều trong AngularJS. Directive là một hướng dẫn để AngularJS biết cách thao tác và xử lý với thành phần trong HTML và DOM để thay đổi các hành vi và cách thể ...
Mở đầu
Nếu bạn đã từng nghe hay đọc về AngularJs thì chắc chắn không thể bỏ qua khái niệm directive. Đây là công nghệ được sử dụng rất nhiều trong AngularJS. Directive là một hướng dẫn để AngularJS biết cách thao tác và xử lý với thành phần trong HTML và DOM để thay đổi các hành vi và cách thể hiện trên trang web như hiển thị một đoạn thông báo, ẩn văn bản, thêm vào các class... Chúng ta có rất nhiều những chỉ thị(directive) được dựng sẵn trong AngularJS, bài viết này tôi xin giới thiệu về những chỉ thị phổ biến mà chúng ta hay dùng trong khi làm việc với các ứng dụng hay framework có sử dụng AngularJS.
1. ng-app Directive
Chỉ thị đầu tiên phải kể đến ngApp, khi directive này được khởi tạo Angular sẽ hiểu đây là thành phần root của ứng dụng Angular, kế tiếp nó sẽ khởi tạo các thông số, cấu hình bên trong(boostraps). Điều thú vị là chúng ta có thể sử dụng nó mà không cần bất kỳ tham số nào, hay nói khác đi thì các ứng dụng sẽ được boostraps một cách tự động như ví dụ dưới đây:
<!doctype html> <html ng-app> <head> <title>First Application</title> <script src="angular.js"></script> </head> <body> </body> </html>
Tuy vậy nhưng trong khi sử dụng chúng ta vẫn nên khai báo một module name, cũng như các thành phần khác của ứng dụng như controller, services, filters và các directives khác nữa.
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script> var shopping = angular.module("shopping", []); </script> </head> <body> </body> </html>
Trong cùng một trang HTML sẽ chỉ có một ngApp directive được nạp vào framework và boostraps một cách tự động. Tuy nhiên chúng ta cũng có sử dụng những ngApp khác trên cùng trang này bằng manually boostraps.
2. ng-controller Directive
ng-controller directive cho phép chúng ta tạo ra 1 controller và đính kèm nó vào DOM của HTML. Khi sử dụng directive này thì các thuộc tính và phương thức được khai báo trong controller sẽ được bind ra view thông qua đối tượng phạm vi $scope.
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script> var shopping = angular.module("shopping", []); shopping.controller("shoppingCtrl", function ($scope) { }); </script> </head> <body ng-controller="shoppingCtrl"> </body> </html>
Nested Controller
Trong một số trường hợp một controller trở nên quá phức tạp, sẽ là tốt hơn nếu chúng ta có thể chia nhỏ các controller ra để quản lý các tác vụ, angular hỗ trợ việc sử dụng các controller lồng nhau (nested controller)
<body ng-controller="shoppingCtrl"> <div ng-controller="shoppingNestedCtrl"> </div> </body>
Tuy nhiên cũng có một số lưu ý khi sử dụng controller trong các ứng dụng dùng angularjs, đó là
- Controller chỉ xử lý và đưa ra các bussiness logic chứ không nên thao tác trực tiếp DOM của HTML
- Không dùng controller để xử lý dữ liệu input và output, thay vào đó dùng form controller (với input) và services trong anglarjs(với output).
3. ng-bind Directive
ng-bind directive dùng thay thế nội dung của các elements bằng kết quả mà expression cung cấp, nó cũng tương tự như dấu {{}} vậy. Vì sao phải sử dụng directive này trong khi có thể in kết quả của expression thông qua {{}} ? Đó là vì trong lúc page được load sẽ có thời điểm mà trạng thái của expression được hiển thị, nhưng nếu sử dụng directive này thì nó sẽ ẩn các thuộc tính của các phần tử
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script> var shopping = angular.module("shopping", []); shopping.controller("shoppingCtrl", function ($scope) { $scope.shopName = "Fahasha"; }); </script> </head> <body ng-controller="shoppingCtrl"> <h3 ng-bind="shopName"></h3> </body> </html>
4. ng-bind-html Directive
Trong trường hợp mà kết quả của expression là một chuối có chứa đoạn mã HTML, angular cung cấp 1 directive có tên là ng-bind-html để thay thế cho ng-bind. Các thức hoạt động của nó thì tương tự như ng-bind, tuy nhiên có một lưu ý là ng-bind-html có sử dụng thư viện phụ trợ là angular-sanitize.js nên khi sử dụng ta cần khai báo thêm module ngSanitize.
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script src="angular-sanitize.js"></script> <script> var shopping = angular.module("shopping", ['ngSanitize']); shopping.controller("shoppingCtrl", function ($scope) { $scope.shopName = "<span>Fahasha</span>"; }); </script> </head> <body ng-controller="shoppingCtrl"> <h3 ng-bind-html="shopName"></h3> </body> </html>
5. ng-bind-template Directive
ng-bind-template dùng thay thế cho ng-bind trong trường hợp cần cần thể hiện nhiều biểu thức
ng-bind-template="{user.lastName}{user.firstName}"
ng-bind-template rất hữu ích trong trường hợp các thẻ mà nội dung bên trong nó không thể chứa các thẻ HTML ví dụ title, option, meta.
6. ng-repeat Directive
ng-repeat directive rất hữu ích trong việc duyệt các mảng, collection hay objects. Có thể sử dụng với các phần tử là các rows trong một bảng, hay các phần tử của một list.
Để sử dụng directive này chúng ta cần dữ liệu expression trả ra là một mảng hoặc một collection
variable in array
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script> var shopping = angular.module("shopping", []); shopping.controller("shoppingCtrl", function ($scope) { $scope.productTypes = ['Type1', 'Type2', 'Type3', 'Type4']; }); </script> </head> <body ng-controller="shoppingCtrl"> <ul> <li ng-repeat="type in productTypes"> <span ng-bind="type"></span> </li> </ul> </body> </html>
7. ng-show và ng-hide Directive
Hai directive này có chức năng đối lập nhau tương ứng là hiển thị và ẩn một phần tử trên view.
<ul ng-show="productTypes.lenght > 0"> <li ng-repeat="type in productTypes"> <span ng-bind="type"></span> </li> </ul>
8. ng-click và các event directives
onClick là sự kiện mà đối tượng HTML nào cũng có. Sự kiện này xảy ra dùng chuột click vào phạm vi hiển thị của đối tượng HTML. ng-click directive cho phép người dùng có thể bind bất cứ sự kiện click nào vào đối tượng HTML
<!doctype html> <html ng-app="firstApplication"> <head> <title>First Application</title> <script src="angular.js"></script> <script> var shopping = angular.module("shopping", []); shopping.controller("shoppingCtrl", function ($scope) { $scope.productTypes = ['Type1', 'Type2', 'Type3', 'Type4']; $scope.showProduct = function () { alert("UNDER-CONTRUCTION"); }; }); </script> </head> <body ng-controller="shoppingCtrl"> <ul> <li ng-repeat="type in productTypes"> <span ng-bind="type" ng-click="showProduct()"></span> </li> </ul> </body> </html>
Bên cạnh ng-click cũng có những directives tương ứng cho các sự kiện khác : ngBlur, ngChange, ngCopy, ngCut, ngDblClick, ngFocus, ngKeyPress, ngKeyDown, ngKeyUp, ngMousedown, ngMouseenter, ngMouseleave, ngMousemove, ngMouseover, ngMouseup, ngPaste
9. Kết luận
Trên đây là những directive phổ biến được hỗ trợ sẵn trong angularjs. Bên cạnh đó chúng ta có thể tự tạo các directive dành riêng cho các tác vụ mong muốn. Directive là một công nghệ mạnh mẽ, hỗ trợ tạo ra cách thành phần có thể tái sử dụng do đó tiết kiệm rất nhiều thời gian và công sức của developers.
