Javascript 在一个external.html上包含角度模板

在angular中，您可以在页面本身中创建模板，如下所示：

<script type="text/ng-template" id="something.htm">
    <div>This is a template.</div>
</script>

这是一个模板。

---

我想知道你是否可以把它们放在一个外部页面中，比如“templates.htm”，然后引用整个页面，本质上就是说“在templates.htm中查找模板something.htm。”

这难道不像使用ng include那么简单吗

      <ng-include  src="'mytemplates.html'"></ng-include>

（注意带src的单引号）

@亚伦：补充更多关于我所做的事情的信息。 这是my index.html（主页）的主体

加载外部模板1

加载外部模板2

加载外部模板3

内容：

这是mytemplates.html

           <script type="text/ng-template" id="/tpl.html">
                Content of the template 1
           </script>
           <script type="text/ng-template" id="/tp2.html">
                Content of the template 2.
           </script>

           <script type="text/ng-template" id="/tp3.html">
                Content of the template 3.
           </script>

模板1的内容
模板2的内容。
模板3的内容。

---

当我点击链接时，我可以看到模板确实被加载了。我遗漏了什么吗？

虽然从技术上讲，这不是对您问题的直接回答，但一个非常干净的解决方案，而且可能是最好的性能解决方案

它将接受您提供的.html模板，并将它们转换为一个或多个.js文件，其中包含填充模板缓存的代码。然后，只需包含生成的.js文件，就完成了。客户端不应请求.html文件-它将首先检查缓存

---

它确实需要对构建设置进行一些更改，但可以完全自动化。

如果您不介意性能稍有下降，下面是我在评论中所说的一个工作示例

示例：

关键概念是删除

np应用程序

，并在加载

templates.html

后手动引导应用程序

$.get('templates.html').done(function (rawHtml) {
  angular.module('app').run(function ($compile) {
    $compile(rawHtml)({});
  });

  angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
  });
});

---

我可以用jQuery加载它，但我希望在angular管道中或其他地方有一些东西。你可以请求external.html的原始html并使用

$compile

服务进行编译，它会为你将这些模板放入

$templateCache

中。比如：$compile（returnedData）（$rootScope）；？这是否可以跨隔离作用域边界使用？是的，但请注意，它只适用于在上述语句之后编译的指令。不幸的是，不能。处理ng的$digest处理mytemplates.html中需要模板的指令。由于ng模板尚未加载，它将404查找模板文件。@AaronF:在我所做的工作上添加了更多脚本。。但是再次阅读你的评论，我想我需要做更多的思考：）下面是一个我正在尝试做的例子：（使用你的ng include提案。）@AaronF:我在plnkr链接中没有看到任何文件。它是正确的链接吗？它是私有的。这里有一个公共叉子：是的，我也会鼓励使用html2js，但这违反了OP的

保持我的文件系统干净

规则：pis one.js文件这么大？或者是多个小的.html文件-我说让你的模板靠近你的代码，所以把所有的小模板放在一个单一的位置违背了我的经验，最好在构建过程中处理这个问题，但这只是meI非常同意，因为我总是做同样的事情。我能看到的唯一问题是，对于不熟悉构建系统的人来说，构建系统需要一些时间才能正常工作。我可能会使用它，但我们的整个系统都是ASP.NET。现在使用node已经太晚了。而且，我希望所有的模板都在一个文件中。嗯，我当然也能理解，我希望你不会介意我把这个答案放在这里——其他人可能会发现它很有用。手动引导。真不敢相信我竟然忘了。谢谢伦塔姆！

$.get('templates.html').done(function (rawHtml) {
  angular.module('app').run(function ($compile) {
    $compile(rawHtml)({});
  });

  angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
  });
});