Bài 20: Directive ng-include trong AngularJS - AngularJS căn bản
Nếu bạn là dân lập trình PHP thì bạn cũng biết hàm include hay hàm required trong PHP dùng để import một file PHP khác vào file hiện tại. Đây là phía Server, vconf phía client thì như thế nào? Thông thường chúng ta sẽ sử dụng ajax hoặc là iframe để xử lý vấn đề này. Tuy nhiên nếu sử dụng ...
Nếu bạn là dân lập trình PHP thì bạn cũng biết hàm include hay hàm required trong PHP dùng để import một file PHP khác vào file hiện tại. Đây là phía Server, vconf phía client thì như thế nào? Thông thường chúng ta sẽ sử dụng ajax hoặc là iframe để xử lý vấn đề này. Tuy nhiên nếu sử dụng angular thì bạn sẽ có một cách đơn giản hơn đó là sử dụng đối tượng directive ng-include. Chi tiết thế nào thì chúng ta sẽ tìm hiểu nhé.
1. Directive ng-include trong Angularjs
Để import một file (url web) nào đó vào trong một vị trí nào đó thì tại ví trí đó chúng ta sẽ sử dụng một đoạn code sau:
<div ng-include=" 'https://Zaidap.com.net' "></div>
template-a.html, template-b.html và index.html. Hãy sử dụng ng-include để import hai file template vào file index.Để giải bài này ta sẽ làm các bước như sau.
File template-a.html
<h2 style="border:solid 1px red; margin: 10px;">
CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET <BR/>
ĐÂY LÀ TEMPLATE-A
</h2><br />
<br />
<br />
<h2 style="border:solid 1px red; margin: 10px;">
CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET <BR/>
ĐÂY LÀ TEMPLATE-B
</h2>
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng Directive ng-include Zaidap.com.net</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
*{margin:0;padding:0}
body{margin:20px;}
</style>
<script>
/*
* Author: thehalfheart@gmail.com
* Website: Zaidap.com.net
*/
angular.module('ngInit', []).controller('myController', ['$scope', function($scope) {
}]);Hai template chỉ có nhiệm vụ là hiển thị một đoạn text thôi, còn file index.html thì có nhiệm vụ import hai file kia vào. Chạy lên giao diện sẽ như sau:
2. Các file được include có nhận được biến của $sope hay không ?
Đây là câu hỏi mà chắc chắn bạn phải hỏi đấy nhé, nếu bạn không hỏi thì bạn sẽ không hiểu được toàn bộ directive ng-include này. Nếu như bạn để ý kỹ bằng cách bật firebug lên thì bạn sẽ thấy bản chất khi AngularJS import các template vào là nó đang sử dung ajax đấy nhé, và khi nhận kết quả nó sẽ xử lý các biểu thức khai báo trong kết quả đó, nếu có khai báo mã AngularJS và sử dụng các biến trong $scope thì nó vẫn nhận bình thường.
Bây giờ để các bạn hiểu rõ hơn thì ta làm lại ví dụ trên nhé, ở cả hai template câu chào "Chào mừng các bạn đến với Zaidap.com.net" sẽ được truyền tử giá trị $scope được gán trong controller. Chi tiết ta sẽ làm như sau:
File template-a.html
<h2 style="border:solid 1px red; margin: 10px;">
{{message}} <BR/>
ĐÂY LÀ TEMPLATE-A
</h2><h2 style="border:solid 1px red; margin: 10px;">
{{message}} <BR/>
ĐÂY LÀ TEMPLATE-B
</h2><!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ sử dụng Directive ng-include Zaidap.com.net</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
*{margin:0;padding:0}
body{margin:20px;}
</style>
<script>
/*
* Author: thehalfheart@gmail.com
* Website: Zaidap.com.net
*/
angular.module('ngInit', []).controller('myController', ['$scope', function($scope) {
$scope.message = 'CHÀO MỪNG CÁC BẠN ĐẾN VỚI FREETUTS.NET';
}]);
</script>
</head>
<body ng-app="ngInit" ng-author="thehalfheart@gmail.com" ng-website="Zaidap.com.net">
<div ng-controller="myController">
<div ng-include=" 'template-a.html' "></div>
<div ng-include=" 'template-b.html' "></div>
</div>
</body>
</html>Chạy lên kết quả vẫn giống như ví dụ trước.
3. Lời kết
Vẫn còn vài phần nâng cao nữa đó là các tham số và events của ng-include nhưng mình sẽ không trình bày ở bài này mà sẽ trình bày nó ở một bài khác vì nếu đưa vào bài này luôn bạn sẽ loạn đấy, mình không muốn bạn bị loạn và ngừng xem tuts của mình đâu :D
