ng-view 中的 ng-include 出现 404 问题答案

【问题标题】：404 issue with ng-include inside of ng-viewng-view 中的 ng-include 出现 404 问题
【发布时间】：2014-06-25 12:42:50
【问题描述】：

我到处寻找答案，但不幸的是我什么也没找到。

我有一个可以工作的 Angular 应用程序，如下所示：

...
<div class="container" ng-app="myApp">
<div class="page-title">
    <h1>
    Hello
    </h1>
</div>

<div ng-view></div>

</div>
...

我正在使用 ngRoute 将 html 部分加载到 ng-view div 中。

我的 JS：

var myApp = angular.module('myApp', [
    'ngRoute',
    'myControllers'
]);

myApp.config(['$routeProvider', '$httpProvider',
    function($routeProvider, $httpProvider) {
        $routeProvider.
                when('/step1', {
                    templateUrl: 'template1.html',
                    controller: 'Step1Controller'
                }).
                when('/step2', {
                    templateUrl: 'template2.html',
                    controller: 'Step2Controller'
                }).
                when('/step3', {
                    templateUrl: 'template3.html',
                    controller: 'Step3Controller'
                }).
                otherwise({
                    redirectTo: '/step1'
                });
      }]);

到这里为止，一切都像魅力一样。我已经完成了我需要的几乎所有事情（一个多步骤向导）。

在最后一步，我需要使用<script type="text/ng-template" id="specialTemplate.html"></script> 来生成一些特殊的模板（一棵树）

因此，在我的最后一步页面部分（template3.html）中，我执行了以下操作：

<ul>
    <li ng-repeat="item in [1,2,3]" ng-include="'specialTemplate.html'"></li>
</ul>


<script type="text/ng-template"  id="specialTemplate.html">
 Test
</script>

我在这里卡住了。我在控制台上遇到 404 错误（他试图在我的浏览器 url 指向的同一目录中查找 specialTemplate.html），并且模板没有加载。

当我进行一些测试时，我看到如果ng-include 在ng-view 之外，但在与我当前工作流程分离的干净ng-controller 内，它确实会找到并加载模板，但这不会对我没有帮助，因为我必须在我的工作步骤流程中渲染树。

是否无法在ng-view 中加载基于<script> 的模板？

提前感谢您的帮助。

编辑： 版本：AngularJS v1.3.0-beta.3

【问题讨论】：

AngularJS 版本？我在 Plunker 中尝试了你的代码，它运行良好。很难说它是否与环境有关。
您好，对不起，版本是：AngularJS v1.3.0-beta.3
现在不知道。在 Plunker 和本地 Visual Studo 中都进行了尝试，并且成功了。 Plunker：plnkr.co/edit/ShYX02vIIP2qhMMoNELr?p=preview

标签： html angularjs angularjs-ng-include ng-view

【解决方案1】：

可能是当您尝试从ngView 中获取specialTemplate.html 时，它会更改ngInclude 指向的url。尝试硬编码specialTemplate.html 的路径。或者您可以尝试将您的 script 放在 li 中，因为这也可能是范围问题。

【讨论】：

【解决方案2】：

如果您在本地 Windows 系统中进行测试，那么问题可能是没有从 http-server 提供您的页面。

作为修复，请使用以下命令全局安装 http-server：

npm install -g http-server

记得在 Linux 系统上使用 sudo。安装服务器后，使用以下命令启动服务器：

http-server

现在，在浏览器中转到 http://127.0.0.1:8080/ 并导航到您想要的页面。

【讨论】：