Với AngularJS, bạn có thể bao gồm HTML từ một tệp bên ngoài.
AngularJS Bao gồm
Với AngularJS, bạn có thể bao gồm nội dung HTML bằng cách sử dụng lệnh ng-include :
Thí dụ
<body ng-app=””>
<div ng-include=”‘myFile.htm'”></div>
</body>
Bao gồm mã AngularJS
Các tệp HTML mà bạn bao gồm với lệnh 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 và tất cả mã AngularJS sẽ được thực thi, ngay cả mã bên trong tệp được bao gồm:
Thí 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> Bao gồm các tên miền chéo
Theo mặc định, chỉ thị ng-include không cho phép bạn bao gồm các tệp từ các miền khác.
Để bao gồm các tệp từ một miền khác, bạn có thể thêm một danh sách trắng gồm các tệp và / hoặc miền hợp pháp trong chức năng cấu hình của ứng dụng của bạn:
Thí dụ:
<body ng-app="myApp"> <div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://tryit.w3schools.com/**' ]); }); </script> </body> Đảm bảo rằng máy chủ trên đích cho phép truy cập tệp tên miền chéo.