[AngularJS] Phần 20: Nhúng trong AngularJS

Cập nhật lần cuối: 23/09/2023 lúc 16:04:09

Nhúng nội dung trang
Với AngularJS, bạn có thể nhúng HTML từ một tập tin bên ngoài bằng cách dùng chỉ thị ng-include.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

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

</body>
</html>

Nội dung tập tin dammio.html như sau.

<!DOCTYPE html>
<html>
<body>
<h1>Nội dung trang dammio.html!</h1>
</body>
</html>

Nhúng mã nguồn
Bạn có thể nhúng cả mã nguồn thông qua chỉ thị ng-include. Ví dụ trang dammio.com có nội dung như sau.

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

Sau đó bạn nhúng trang dammio.html vào trang web chứa ứng dụng AngularJS, tất cả đoạn mã AngularJS đều được thực thi ngay sau đó, kể cả đoạn mã trong tập tin nhúng.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'dammio.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>

<p>Nội dung dữ liệu được lấy từ trang customers.php, sau đó hiển thị trên 1 bảng khi nhúng mã nguồn tập tin "dammio.html".</p>

</body>
</html>

Nhúng chéo domain
Theo mặc định, chỉ thị ng-include không cho phép bạn nhúng tập tin từ các domain khác vì lý do bảo mật. Để nhúng tập tin từ các domain khác, bạn có thể thêm 1 danh sách trắng các tập tin hoặc các domain hợp lệ trong hàm config của ứng dụng. Ví dụ sau là hiển thị trang chủ của trang ihay.vn trên trang giao diện chứa đoạn mã AngularJS.

<?php
header("Access-Control-Allow-Origin: *");
?>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<div ng-include="'http://www.ihay.vn/index.html'"></div>

<script>
var app = angular.module('myApp', [])

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'http://www.ihay.vn/**'
  ]);
});

</script>
</body>
</html>

Bạn phải chắc chắn server đích cho phép truy cập tập tin domain chép và phải chạy đoạn mã trên ở môi trường server hỗ trợ PHP.

Liên quan: [AngularJS] Phần 4: Các chỉ thị trong AngularJS

Kết luận: Chỉ thị ng-include cho phép bạn nhúng tập tin chứa mã HTML, JavaScript và cả nội dung ở các trang ở domain khác so với trang hiện tại.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 20: Nhúng trong AngularJS. https://www.dammio.com/2017/09/11/angularjs-phan-20-nhung-trong-angularjs.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 20: Nhúng trong AngularJS}, year = {2017}, url = {https://www.dammio.com/2017/09/11/angularjs-phan-20-nhung-trong-angularjs}, urldate = {2025-10-31} }

Kết nối