无法在 Angularjs 中使用 templateUrl 加载模板
Posted
技术标签:
【中文标题】无法在 Angularjs 中使用 templateUrl 加载模板【英文标题】:Couldn't load template using templateUrl in Angularjs 【发布时间】:2013-04-21 12:17:30 【问题描述】:我正在学习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 位于同一文件夹中)。
谁能帮我弄清楚发生了什么?
【问题讨论】:
【参考方案1】:问题是您在文件系统之外运行您的示例(使用file://
协议)并且许多浏览器(Chrome、Opera)在使用file://
协议时会限制XHR 调用。 AngularJS 模板是通过 XHR 下载的,这与 file://
协议的使用相结合会导致您遇到错误。
在解决这种情况时,您有多种选择:
使用 Web 服务器运行您的示例(有许多简单的解决方案,例如 https://code.google.com/p/mongoose/ 或几行 node.js 脚本) 使用<script>
指令将模板嵌入到您的index.html 文件中:http://docs.angularjs.org/api/ng.directive:script,这样您的模板将与主HTML 文件一起下载,不再需要通过XHR 加载它们
更改您的浏览器设置以允许通过file://
协议进行XHR 调用。例如,这可以像这样在 Chrome 中完成:Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
【讨论】:
谢谢~~我还发现,由于我使用的是WebStorm,我实际上可以像在内置Web服务器中一样启动页面 使用脚本标签的好建议。为一个简单的项目省去了一些麻烦。 如果我在手机上运行它会怎样?我的项目使用cordova,例如【参考方案2】:Chrome 不允许 file:
协议上的 ajax 请求。
查看:Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 以了解解决方法,或者您可以在您的计算机上运行 Web 服务器。
【讨论】:
谢谢~~ 我也刚想通了。顺便说一句,我找到了这个链接 [blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/…,因为我使用的是 WebStorm,所以我可以将我的网站作为本地 Web 服务器启动 这是相关的铬问题(1055 颗星...):code.google.com/p/chromium/issues/… 所以如果我的项目目录中运行着一个服务器,我的 templateUrl 应该是什么样的?现在我有directives/filename.html
【参考方案3】:
如果您安装了 Node 和 NPM,则运行:npm install http-server -g
然后导航到包含您的应用程序的文件夹并运行:http-server
我在这个 SO 帖子中找到了答案:Quick Node Server
可以在这里下载Node(NPM自带Node):Node
希望这会有所帮助!
【讨论】:
如果您已经安装了节点,则可以超级快速地为您的项目提供服务。在我的 Windows 环境中为我工作:) 只需重新加载我的项目,一切正常。我遇到了同样的问题,它 Angular 无法检索模板 url 的本地文件。 所以如果我的项目目录中运行着一个服务器,我的 templateUrl 应该是什么样的?现在我有directives/filename.html
【参考方案4】:
您也可以使用 expressjs 网络服务器来加载您的 index.html 文件。
安装快递服务器
npm install express -S
server.js 文件
const express = require('express')
const path = require('path');
const app = express();
通过指定路径加载angularjs文件
注意:假设您的角度文件(模块/控制器/指令文件和 index.html 文件)位于公共目录中。
app.use(express.static(path.join(__dirname, 'public')));
监听(使用节点 server.js 启动应用)
app.listen(8080, () => console.log('App listening on port 8080'));
package.json 文件
"scripts":
"dev": "node server.js"
,
"dependencies":
"express": "^4.16.4"
,
运行npm run dev
启动服务器。
public/index.html 文件
<!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>
【讨论】:
以上是关于无法在 Angularjs 中使用 templateUrl 加载模板的主要内容,如果未能解决你的问题,请参考以下文章
Angularjs[25] - 自定义指令(restrict, template, replace)