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

106 lượt xem

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.

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ình luận Facebook

Để lại bình luận

2 Comments on "[AngularJS] Phần 20: Nhúng trong AngularJS"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
trackback

[…] Đăng ngày 11 Tháng Chín, 201711 Tháng Chín, 2017 bởi dammio 11 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 0 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz