在一个外部 .html 上包含角度模板答案

【问题标题】：Including angular templates on one external .html在一个外部 .html 上包含角度模板
【发布时间】：2014-07-17 15:02:11
【问题描述】：

在 Angular 中，您可以在页面本身中创建一个模板，例如：

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

我想知道您是否可以将一堆这些放在一起放在外部页面中，例如“templates.htm”，然后引用整个页面，基本上是说“在 templates.htm 中查找模板内容.htm。”

【问题讨论】：

我可以用 jQuery 加载它，但我希望角度管道或某处有什么东西。
您可以请求external.html的原始html并使用$compile服务编译，它会为您将这些模板放入$templateCache。
喜欢：$compile(returnedData)($rootScope);?
是否可以跨隔离范围边界使用？
是的，但请注意，它仅适用于在上述语句之后编译的指令。

标签： javascript angularjs templates angularjs-directive

【解决方案1】：

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

示例： http://plnkr.co/edit/EcEySnmmm3hsLimDHfYr?p=preview

关键概念是删除np-app 并在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']);
  });
});

【讨论】：

对。手动引导。不敢相信我忘记了。感谢 runTarm！

【解决方案2】：

虽然从技术上讲不能直接回答您的问题，但使用html2js 是一个非常干净的解决方案并且可能是最佳性能明智的。

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

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

【讨论】：

是的，我也鼓励使用 html2js，但这只是违反了 OP 的keep my file system clean 规则：p
一个 .js 文件这么重要吗？或者是多个小的 .html 文件 - 我说让你的模板靠近你的代码，所以将所有小模板放在一个位置违背了我的经验，最好在构建过程中解决这个问题，但这只是我
我完全同意，因为我总是做同样的事情。我能看到的唯一问题是，对于不熟悉构建系统的人来说，需要一些时间才能使其正常工作。
我可能会使用它，除了我们的整个系统是 ASP.NET。使用节点为时已晚。而且，我想要一个文件中的所有模板。
嗯，我当然也能理解，我希望你不会介意我把这个答案留在这里——别人可能会觉得它有用

【解决方案3】：

这不是像使用 ng-include 一样简单吗？

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

（注意src的单引号）

@Aaron：添加更多关于我所做的信息。这是我的 index.html 的正文（主页）

      <body ng-app="">
        <ng-include src="'mytemplates.html'"></ng-include>
        <p><a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load external template                    1</a>
        </p>
        <p><a ng-click="currentTpl='/tp2.html'" id="tpl-link">Load external template 2</a>
        </p>
        <p><a ng-click="currentTpl='/tp3.html'" id="tpl-link">Load external template                 3</a>
         </p>
         Content:
        <div id="tpl-content" ng-include src="currentTpl"></div>
        </body>

这里是 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>

当我单击链接时，我可以看到模板确实已加载。我错过了什么吗？

【讨论】：

很遗憾没有。处理 ng-include 的 $digest 处理需要 mytemplates.html 中模板的指令。由于 ng-templates 尚未加载，它将 404 查找模板文件。
@AaronF：在我所做的事情上添加了更多脚本。但是再次阅读您的评论，我想我需要做更多的思考.. :)
这是我正在尝试做的一个示例：plnkr.co/edit/KMU2mIGpAlZJCnNXfnFZ?p=preview（使用您的 ng-include 提案。）
@AaronF：我在 plnkr 链接中没有看到任何文件。它是正确的链接吗？
这是私人的。这是一个公共分叉：plnkr.co/edit/b0mUzpS8FdsWt6z72lYa?p=preview