ng-include
라는 지시자는 HTML 안에 다른 HTML 을 부분 포함할때 사용하는 것으로, 마치 HTML 의 iframe
, PHP 의 include
의 기능을 한다.
사용방법은 다음과 같다. <div ng-include src="'header.html'"></div> //또는
<div ng-include="'footer.html'"></div>
주의해야할 점은 ng-include
src
속성은 홀따옴표(')로 파일명을 감싸줘야하는데 이유는 디렉티브가 스코프내에서 파일명을 찾게되므로 문자열로 지정할수있도록 홀따옴표를 사용한다고 한다. 그런데,
외부 도메인을 쓰고있는 HTML을 가져오다가 Cross Domain 문제가 생겼다.
이럴땐,
resourceUrlWhitelist
를 사용해서 접속 하고자하는 도메인을 접속 가능한 도메인으로 지정을 해줘야한다. 방법은 다음과 같다.
HTML
<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>
AngularJS
var app = angular.module('myApp', [])
app.config(['$sceDelegateProvider'], ($sceDelegateProvider) => {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://tryit.w3schools.com/**',
//'/^(http|https)?:\/\/(.*\.)?shaking.com\/\?(.*)/'
]);
});
바로 run 가능한 URL : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_include_crossdomain 이처럼 https 나 외부 도메인을 사용하는 HTML 을 불러와야할 경우
resourceUrlWhitelist
을 사용하면된다. 추가로 http, https 상관없이 지정 도메인에 대한 모든 HTML 을 접근할 수 있도록 하는 정규식(위 소스엔 주석처리 해놨다)은 다음과 같다.
/^(http|https)?:\/\/(.*\.)?shaking.com\/\?(.*)/