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

Strategy for combining Angular templates to reduce requests?

本文关键字：请求 策略 Angular 组合      更新时间：2023-09-26

背景:我们正在移植一个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模板组合到一个文件中?

也许可以使用$templateCache -Service。点击这里阅读。

如果我理解正确，它基本上是你已经计划的，不同的是，你不需要HTML字符串在你的JavaScript，但你可以写HTML在。HTML文件(或一个大的HTML文件包含所有模板嵌入通过ng-include在你的index.html)。

你可以把它们放在页面中，就像Ember

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

我们在开发过程中保留这些html文件，但当我们需要优化构建时，将它们合并为单个.js文件(然后我们将其添加到主bundle .js文件中)。

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

我所做的是在我的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，这意味着只有两个请求服务器。

相关文章：