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 지시는 다른 도메인에서의 파일을 포함하지 않도록 허용하지 않습니다。

다른 도메인에서의 파일을 포함하려면, 응용 프로그램의 config 함수에 유효한 파일과/또는 도메인의 자유 목록을 추가할 수 있습니다：

예제

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

직접 시도해 보세요

목표 서버가 콜스프레이 파일 접근을 허용하는지 확인하십시오.