组合Angular模板以减少请求的策略？答案

【问题标题】：Strategy for combining Angular templates to reduce requests?组合Angular模板以减少请求的策略？
【发布时间】：2014-07-26 15:48:12
【问题描述】：

背景：我们正在将 ASP.NET 应用程序从传统的 WebForms 移植到 Web API + Angular。该应用程序主要用于互联网连接较差的国家/地区，我们在实践中发现延迟是比带宽更大的问题。因此，我们的首要任务是减少对服务器的请求总数，即使这意味着预加载脚本或用户可能最终不需要的其他资源。

问题： 当我们用 Angular 指令和模板替换 WebForms 用户控件 (*.ascx) 时，小的 HTML 模板文件的数量正在激增；所以你必须为任何给定的视图发出大量的服务器请求，这在高延迟环境中是一个大问题。

一种可能的方法：我正在考虑使用T4 将应用程序使用的所有模板合并到一个文件中，看起来像这样：

myApp.templates = {};

myApp.templates.myFirstDirective = "<div> ... lots of markup here ... </div>"
myApp.templates.mySecondDirective = "<table> ... more markup ... </table>"

该文件将被浏览器请求一次并被缓存，因此后续页面加载不需要进一步往返服务器。然后模板将可用于所有指令，这样他们就无需引用templateUrl，而是像这样提取所需的模板

return {
    link: link,
    template: myApp.templates.myFirstDirective,
    ... etc
}

问题：这是个好主意吗？有没有更好或更原生的方式将 Angular 模板组合到一个文件中？

【问题讨论】：

标签： javascript asp.net angularjs performance

【解决方案1】：

也许使用$templateCache-Service 是可能的。阅读它here。

如果我理解正确，这基本上就是您已经计划好的，不同之处在于您的 JavaScript 中不需要 HTML 字符串，但您可以在 .html 文件（或包含所有嵌入模板的一个大 HTML 文件）中编写 HTML通过 index.html 中的ng-include）。

【讨论】：

【解决方案2】：

你可以把它们放在有点像 Ember 的页面中

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

【讨论】：

【解决方案3】：

我们在开发过程中保留这些 html 文件，但在需要优化构建时将它们组合成单个 .js 文件（然后我们将其添加到我们的主捆绑 .js 文件中）。

我们使用https://www.npmjs.com/package/gulp-angular-templatecache - 如果您已经有 gulp 构建，那么实际上只需几分钟的设置。

【讨论】：

【解决方案4】：

我所做的是在我的主要 html 正文之后定义我的所有模板。这样做还提供了一种方法来自动化从不同的指令文件构建单个文件的过程例如：

<!DOCTYPE HTML>
<html>
<head>
  <script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="MyApp">
  <my-directive></my-directive>
  <script src="app.js"></script>
</body>
</html>
<content>
  <script type="text/ng-template" id="template1.html">
    <h1>Hello</h1>
  </script>
</content>

我的 app.js：

 angular.module('MyApp',[])
.directive('myDirective', function() {
    return {
        scope:{

        },
        restrict:'AE',
        templateUrl:'template1.html',
        replace:false
    }
})

这样，我们可以轻松地将所有 javascript for 指令保存在自己的文件中，并将这些指令的 html 保存在自己的文件中在构建期间，我们可以轻松地合并这些文件，这样我们就只有两个文件：index.html 和 app.js，这意味着只有两个对服务器的请求。

【讨论】：