AngularJS 포함
AngularJS를 사용하면 외부 파일에서 HTML을 포함할 수 있습니다.
AngularJS 포함
AngularJS를 사용하면 ng-include 지시문을 사용하여 HTML 콘텐츠를 포함할 수 있습니다.
예시
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
AngularJS 코드 포함
ng-include 지시문과 함께 포함하는 HTML 파일에는 AngularJS 코드도 포함될 수 있습니다.
myTable.htm:
<table>
<tr ng-repeat="x in
names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
웹 페이지에 "myTable.htm" 파일을 포함하면 포함된 파일 내부의 코드를 포함하여 모든 AngularJS 코드가 실행됩니다.
예시
<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>
교차 도메인 포함
기본적으로 ng-include 지시문은 다른 도메인의 파일을 포함하는 것을 허용하지 않습니다.
다른 도메인의 파일을 포함하려면 애플리케이션의 구성 기능에 법적 파일 및/또는 도메인의 화이트리스트를 추가할 수 있습니다.
예시:
<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>
대상의 서버가 도메인 간 파일 액세스를 허용하는지 확인하십시오.