Angular-ui-router templateUrl 不适用于 Chrome 和 IE，但适用于 Firefox答案

【问题标题】：Angular-ui-router templateUrl not working with Chrome and IE, but works for FirefoxAngular-ui-router templateUrl 不适用于 Chrome 和 IE，但适用于 Firefox
【发布时间】：2017-04-22 17:38:38
【问题描述】：

创建了一个非常简单的 Angular ui-router 文件进行测试，我发现 stateProvider 中的“templateUrl”（我的示例代码中的“联系人”状态）不适用于 Chrome 和 IE，但适用于 Firefox，但是，“模板'('home' state in my example code) 属性在 Chrome/IE/Firefox 中有效。

我的测试项目在同一个文件夹下只包含两个html文件：

index.html

<html>
<head>
    <script src="http://unpkg.com/angular@1.5/angular.js"></script>
    <script src="http://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js"></script>
</head>

<body ng-app="main-app">
    <a ui-sref="home">Home</a>
    <a ui-sref="contact">Contact</a>
  </br>
    <ui-view></ui-view>
</body>
<script>
    var myApp = angular.module('main-app', ['ui.router']);
    myApp.config(function($stateProvider) {
        var homeState = {
            name: 'home',
            url: '/home',
            template: 'hello world!'
        }
        var aboutState = {
            name: 'contact',
            url: '/contact',
            templateUrl: 'contact.html'
        }
        $stateProvider.state(homeState);
        $stateProvider.state(aboutState);
    });
</script>

</html>

contact.html

Phone: 416-1113333

【问题讨论】：

标签： angular-ui-router

【解决方案1】：

您的示例没有任何问题，您似乎正在尝试通过 file:// 协议为应用程序提供服务，但 Chrome 等浏览器在使用 file:// 协议时不允许 XHR 调用。

Here is same 示例可通过 HTTP 服务器访问，该服务器在浏览器中的工作方式相同。

另一种选择是：

使用<script> 指令将模板嵌入到您的index.html 文件中： http://docs.angularjs.org/api/ng.directive:script 所以你的模板与主 HTML 文件一起下载，不再需要通过 XHR 加载它们
更改浏览器设置以允许通过file:// 调用 XHR 协议。例如，对于 Chrome，请关注this answer 了解更多详情

【讨论】：

谢谢瓦迪姆！！！它就像你说的那样工作。 1. 通过 HTTP 服务器（例如 nodejs express）。 2. 或者继续使用 file:// 协议访问，使用参数启动 chrome：--allow-file-access-from-files，例如“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --allow-file-access-from-files