`cd ~/myProjectFolder`

Question

我是angular.js的新手，只是试图了解基础知识，希望这很简单，但我无法在templateUrl中加载。

我的index.html如下：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>AngularJS Tutorials</title>
</head>
<body>
  <div ng-app="app">
    <h1>Introduction to Angular.JS</h1>
    <div ui-view></div>
  </div>



  <!-- Scripts -->
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script src="js/angular-ui-router.min.js"></script> 
  <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

我的app.js是：

angular
    .module('app', [
        'ui.router'
    ])
    .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'templates/home.html'
            })
    }])

我的home.html是：<h1>home template</h1>

所以我不知道为什么这不起作用，但错误是：

XMLHttpRequest cannot load file:///Users/code/Desktop/angular/templates/home.html. Cross origin requests are only supported for HTTP.

先谢谢，Gab

Answer 1

此错误是由于浏览器提出的安全限制造成的。您可以尝试以下步骤：

尝试在其他浏览器中运行您的代码
通过将内容放在index.html标记内，在script内添加模板。这些脚本元素应出现在ng-app之后。（ref link）

<script type="text/ng-template" id="home.html"> Content of the template goes here </script>

Answer 2

首先使用<ng-view> </ng-view>加载模板。第二个是为每个局部视图使用<script type="text/ng-template" id="home.html">。第三件事不是强制性的，但最后使用是有意义的。这是小提琴，你看看 fiddle

Answer 3

如果你想在本地运行你的页面，我建议你安装一个http服务器并在那里运行它... 然后你避免像那样的CORS问题

实施例：安装了node.js

`cd ~/myProjectFolder`

`npm i http-server`

`http-server ./`

然后您也可以在浏览器中输入localhost:8080，而不必将其指向某个URI /文件夹

Angular.js模板未加载

3 个答案:

`cd ~/myProjectFolder`

`npm i http-server`

`http-server ./`