如何使用angularJS指向生产中的html模板答案

【问题标题】：how to point to a html template in production using angularJS如何使用angularJS指向生产中的html模板
【发布时间】：2017-12-22 17:47:50
【问题描述】：

所以我使用 data-ng-include 在 div 中显示 html 模板。我遇到的问题是，在我的本地...... html 的路径工作正常，一切正常。但是，一旦我运行 gulp build 并在生产中运行该应用程序，我认为路径不正确并且 UI 无法找到要显示的正确模板。

例如..

HTML：

<div id="abc" ng-init="init()">
    <div ng-controller="splitController" data-ng-include="templateURL"></div>
</div>

模板网址：

$scope.templateURL = '/app/components/preview/split/split.html';

有谁知道当应用程序被内置到 prod 中时如何定位 html 路径？

谢谢

【问题讨论】：

当您运行应用程序时，它试图拉取的路径是什么？
它正在拉动productionUrl.com/app/components/preview/split/split.html 但找不到 404
但是当从 localhost 访问时，它在 localhost:8080/app/components/preview/split/split.html 中运行良好
嗯，您是否尝试过使用相对于您在上面发布的 html 的路径？而不是绝对路径。您也可以尝试将路径直接放入 ng-include 中（只是为了排除问题），例如ng-include="'path/to/your/file.html'"，注意双引号中的单引号，因为下面的答案是在
另外，直接转到您的生产服务器上的 split.html 文件只是为了验证它确实存在。

【解决方案1】：

首先，将控制器和 ng-include 分开。为每个元素创建单独的元素

<div id="abc" >
    <div ng-controller="splitController" ng-init="init()">
         <div ng-include="templateURL"></div>
    </div>
</div>

然后在url中，一定要在双引号里面加上单引号。

$scope.templateURL = "'/app/components/preview/split/split.html'";

【讨论】：

在双引号内添加单引号实际上会抛出错误 bc 如果将单引号添加到路径
为了识别路径，ng-include需要用单引号括起来
如果他的路径是在控制器中定义的，则不需要用单引号和双引号括起来。仅当路径直接注入ng-include 时。因为他使用变量templateURL，所以他的方式很好。