Question

背景：我们正在将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-native方式将Angular模板组合到一个文件中？

Answer 1

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

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

Answer 2

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

一样

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

Answer 3

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

我们使用https://www.npmjs.com/package/gulp-angular-templatecache - 如果您已经拥有gulp版本，那么它只需要几分钟的设置。

Answer 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 directive保存在自己的文件中，并将html保存在自己的文件中在构建期间，我们可以轻松地合并这些文件，这样我们只有两个文件：index.html和app.js，这意味着只有两个服务器请求。

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

4 个答案: