Angularjs의 templateUrl을 사용하여 템플릿을 로드할 수 없습니다.
Angularjs와 templateUrl을 사용하여 템플릿을 로드하는 방법을 배우고 있습니다.
간단한 지시가 있습니다.
var mainApp = angular.module("mainApp", []);
mainApp.directive("request", function() {
return {
restrict: "E",
scope: {
data: "@"
},
templateUrl: "te.html"
}
})
다음과 같이 지시어를 사용하려고 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
div {
background-color: cornflowerblue;
}
#appPanel {
width: 900px;
height: 1000px;
}
</style>
</head>
<body>
<div id="appPanel" ng-app="mainApp" class="container">
<div class="row-fluid" style="height: 15%">
<div class="span12">
title
</div>
</div>
<div class="row-fluid" style="height: 85%">
<div class="span3" style="height: 100%">
actions
</div>
<div class="span9" style="height: 100%" ng-controller="AppCtrl">
<div ng-repeat="request in data.requests">
<request data="request"></request>
</div>
</div>
</div>
</div>
</body>
</html>
페이지를 열면 다음과 같은 예외가 발생합니다.
XMLHttpRequest cannot load file:///Users/chenguangli/Documents/workspace-web/ournotes/te.html. Origin null is not allowed by Access-Control-Allow-Origin. default.html:0
Error: Failed to load template: te.html
at Error (<anonymous>)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:4503:17
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8898:11
at wrappedErrback (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6806:57)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6882:53
at Object.Scope.$eval (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8011:28)
at Object.Scope.$digest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:7876:25)
at Object.Scope.$apply (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8097:24)
at done (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9111:20)
at completeRequest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9274:7) js/angular.js:5704
js/angular.js:5704
js/angular.js:4800
wrappedErrback js/angular.js:6808
js/angular.js:6882
Scope.$eval js/angular.js:8011
Scope.$digest js/angular.js:7876
Scope.$apply js/angular.js:8097
done js/angular.js:9111
completeRequest js/angular.js:9274
xhr.onreadystatechange js/angular.js:9244
도메인 간에 템플릿파일을 로드하려고 하지 않습니다(te.html은 default.html과 같은 폴드에 있습니다).
무슨 일인지 누가 좀 도와줄래?
문제는 파일 시스템 외부에서 예제를 실행하고 있다는 것입니다(이 예에서는file://protocol) 및 많은 브라우저(Chrome, Opera)가 XHR 콜을 제한합니다.file://프로토콜입니다.각진JS 템플릿은 XHR을 통해 다운로드되며, 이 템플릿과file://protocol을 실행하면 오류가 발생합니다.
이 상황을 해결하기 위해서는 몇 가지 옵션이 있습니다.
- 웹 서버를 사용하여 예제를 실행합니다(https://code.google.com/p/mongoose/ 또는 몇 줄의 node.discript 등 간단한 솔루션이 많이 있습니다).
- 를 사용하여 템플릿을 index.html 파일에 삽입합니다.
<script>directive: http://docs.angularjs.org/api/ng.directive:script 를 사용하면 템플릿이 메인 HTML 파일과 함께 다운로드되고 XHR을 통해 로드할 필요가 없어집니다. - 를 통해 XHR 콜을 허용하도록 브라우저 설정을 변경합니다.
file://프로토콜입니다.예를 들어 Chrome에서 다음과 같이 수행할 수 있습니다. Google Chrome이 XMLHttpRequest를 사용하여 로컬 파일에서 URL을 로드하도록 허용
노드 및 NPM이 설치되어 있는 경우 다음을 실행합니다.npm install http-server - g
그런 다음 앱이 들어 있는 폴더로 이동하여 http-server를 실행합니다.
이 SO 포스트에서 답을 찾았습니다.퀵 노드 서버
여기서 노드를 다운로드할 수 있습니다(NPM은 Node와 함께 제공됩니다).노드
이게 도움이 됐으면 좋겠네요!
Chrome은 에서 Ajax 요청을 허용하지 않습니다.file:프로토콜입니다.
Chrome 베타 8에서는 Google Chrome --allow-file-access-from-files가 비활성화되어 있거나 컴퓨터에서 웹 서버를 실행할 수 있습니다.
expressjs 웹 서버를 사용하여 index.html 파일을 로드할 수도 있습니다.Express 서버 설치npm install express -S
server.disc 파일
const express = require('express')
const path = require('path');
const app = express();
경로를 지정하여 angularjs 파일 로드
메모: 앵귤러 파일(module/controller/directive 파일 및 index.html 파일)이 퍼블릭디렉토리 내에 있다고 가정합니다.
app.use(express.static(path.join(__dirname, 'public')));
listen (node server.display에서 앱을 시작합니다)
app.listen(8080, () => console.log('App listening on port 8080'));
패키지.json 파일
{
"scripts": {
"dev": "node server.js"
},
"dependencies": {
"express": "^4.16.4"
},
}
실행합니다.npm run dev서버를 기동합니다.
퍼블릭/index.filename 파일
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
div {
background-color: cornflowerblue;
}
#appPanel {
width: 900px;
height: 1000px;
}
</style>
</head>
<body>
<div id="appPanel" class="container">
<div class="row-fluid" style="height: 15%">
<div class="span12">
title
</div>
</div>
<div class="row-fluid" style="height: 85%">
<div class="span3" style="height: 100%">
actions
</div>
<div class="span9" style="height: 100%" ng-controller="AppCtrl">
<div ng-repeat="request in data.requests">
<request data="request"></request>
</div>
</div>
</div>
</div>
</body>
</html>
언급URL : https://stackoverflow.com/questions/16251420/couldnt-load-template-using-templateurl-in-angularjs
'programing' 카테고리의 다른 글
| ng-cloak 디렉티브를 올바르게 사용하는 방법 (0) | 2023.03.18 |
|---|---|
| 다른 구성 요소 경고를 렌더링하는 동안 구성 요소를 업데이트할 수 없습니다. (0) | 2023.03.18 |
| NodeJs - JWT 토큰에서 사용자 정보를 검색하시겠습니까? (0) | 2023.03.18 |
| 스프링 부트 액추에이터(스프링 액추에이터 (0) | 2023.03.18 |
| JPA를 사용하여 LocalDate를 유지하는 방법 (0) | 2023.03.18 |