logo标签列表

Angularjs中使用templateUrl无法加载模板

angularjs
34

我正在学习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在同一文件夹中）。

有人可以帮我弄清楚发生了什么吗？

4个回答
71
问题在于您正在使用文件系统运行示例（使用file://协议），而许多浏览器（Chrome、Opera）会限制使用file://协议时的XHR调用。 AngularJS模板通过XHR下载，这与使用file://协议结合使用会导致出现错误。
要解决这种情况，有几个选项：
谢谢~~ 我还发现，由于我正在使用WebStorm，我实际上可以像内置的Web服务器一样启动页面。 - Ethan Li
使用脚本标签的建议非常好。对于一个简单的项目，这为我节省了一些麻烦。 - Laurentiu L.
如果我是从移动设备上运行它呢？我的项目使用Cordova，例如。 - Victor Ferreira
14
如果您已经安装了Node和NPM，则运行：npm install http-server -g 然后导航到包含您的应用程序的文件夹并运行：http-server 我在这个SO帖子中找到了答案：Quick Node Server 您可以在此处下载Node（NPM随Node一起提供）：Node 希望这可以帮助！
如果您已经安装了Node，那么这是一种非常快速的为您的项目提供服务的方法。在我的Windows环境中运行良好 :) 只需重新加载我的项目，一切都正常工作。我遇到了同样的问题，即Angular无法检索模板URL的本地文件。 - rekordboy
如果我的项目目录中有一个运行的服务器，那么我的templateUrl应该是什么样子的？现在我有directives/filename.html。 - user3465521
3
谢谢~~我也刚刚想到了。顺便说一下，我找到了这个链接[http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/]，因为我正在使用WebStorm，所以我可以将我的网站作为本地Web服务器启动。 - Ethan Li
以下是相关的Chromium问题（1055颗星...）：https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified - Guillaume86
如果我的项目目录中有一个运行的服务器，那么我的templateUrl应该是什么样子的？现在我有directives/filename.html。 - user3465521
0

您也可以使用ExpressJS Web服务器来加载您的index.html文件。 安装Express服务器 npm install express -S

server.js文件

const express = require('express')
const  path = require('path');

const app = express();

通过指定路径加载angularjs文件

注意：假设您的angular文件（模块/控制器/指令文件和index.html文件）位于公共目录中。

app.use(express.static(path.join(__dirname, 'public')));

监听（使用node 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接