AngularJS: Include trong AngularJS


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript

AngularJS cho phép ta đưa vào (include) HTML từ một file khác bằng cách sử dụng chỉ thị ng-include.

Ví dụ

<body ng-app="">

<div ng-include="'myFile.htm'"></div>

</body>

Include code của AngularJS

Bản thân các HTML ta cũng có thể đưa vào chỉ thị ng-include và có thể chứa code của AngularJS.

myTable.htm:

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

Khi đưa file "myTable.htm" vào trang web thì tất cả các code của AngularJS đều được thực thi ngay cả khi có code đó nằm trong file được đưa vào.

Ví dụ:

<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl'function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

</body>

Include thông qua các domain (tên miền)

Mặc định thì chỉ thị ng-include sẽ không cho phép bạn include các file từ các domain khác.

Để include các file từ một domain khác thì ta có thể thêm một danh sách trắng (whitelist) các file và/hoặc các domain hợp lệ trong hàm cấu hình của ứng dụng.

Ví dụ:

<body ng-app="myApp">

<div ng-include="'https://tryit.v1study.com/angular_include.php'"></div>

<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'http://tryit.v1study.com/**'
    ]);
});
</script>

</body>

Hãy chắc chắn rằng server đích sẽ cho phép truy cập thông qua file domain.


Các khóa học qua video:
Lập trình C Java C# SQL Server PHP HTML5-CSS3-JavaScript
« Prev: AngularJS: API trong AngularJS
» Next: AngularJS: Animation trong AngularJS
Copied !!!