Chứa AngularJS

Sử dụng AngularJS, bạn có thể bao gồm HTML từ tệp bên ngoài.

Chứa AngularJS

Sử dụng AngularJS, bạn có thể sử dụng ng-include Hướng dẫn bao gồm nội dung HTML:

Mô hình

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

Thử ngay

Bao gồm mã AngularJS

Tệp HTML mà bạn bao gồm bằng hướng dẫn ng-include cũng có thể chứa mã AngularJS:

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

Để bao gồm tệp "myTable.htm" trong trang web của bạn, tất cả mã AngularJS sẽ được thực thi, ngay cả mã trong tệp bao gồm:

Mô hình

<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>

Thử ngay

Bao gồm chéo domain

Mặc định, hướng dẫn ng-include không cho phép bạn bao gồm tệp từ một domain khác.

Để bao gồm tệp từ một域 khác, bạn có thể thêm danh sách trắng hợp lệ cho tệp và/hoặc domain trong hàm config của ứng dụng của bạn:

Mô hình

<body ng-app="myApp">
<div ng-include="'https://tryit.codew3c.com/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'https://tryit.codew3c.com/**'
  ]);
});
</script>
</body>

Thử ngay

Hãy đảm bảo rằng máy chủ mục tiêu cho phép truy cập tệp qua domain khác.