Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 20: Directive ng-include trong AngularJS
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://freetuts.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.
Bài viết này được đăng tại [free tuts .net]
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 Freetuts.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: freetuts.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 freetuts.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 Freetuts.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: freetuts.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="freetuts.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
