Javascript 组合角度模板以减少请求的策略？_Javascript_Asp.net_Angularjs_Performance

Javascript 组合角度模板以减少请求的策略？

javascript asp.net angularjs performance

Javascript 组合角度模板以减少请求的策略？,javascript,asp.net,angularjs,performance,Javascript,Asp.net,Angularjs,Performance,背景：我们正在将ASP.NET应用程序从传统WebForms移植到Web API+Angular。该应用程序主要用于互联网连接不良的国家，我们在实践中发现，延迟是一个比带宽更大的问题。因此，我们的首要任务是减少对服务器的请求总数，即使这意味着预加载用户可能最终不需要的脚本或其他资源问题：当我们用角度指令和模板替换WebForms用户控件（*.ascx）时，小HTML模板文件的数量正在激增；因此，您必须对任何给定视图发出大量服务器请求，这在高延迟环境中是一个大问题一种可能的方法：我正在考虑使用

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

问题：当我们用角度指令和模板替换WebForms用户控件（*.ascx）时，小HTML模板文件的数量正在激增；因此，您必须对任何给定视图发出大量服务器请求，这在高延迟环境中是一个大问题

一种可能的方法：我正在考虑使用将应用程序使用的所有模板合并到一个文件中，该文件如下所示：

myApp.templates = {};

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

问题：这是个好主意吗？是否有更好或更具角度的原生方式将角度模板组合到单个文件中

也许可以使用

$templateCache

-服务。读一读

如果我理解正确的话，这基本上是您已经计划好的，不同的是您不需要JavaScript中的HTML字符串，但是您可以在.HTML文件中编写HTML（或者一个大的HTML文件，其中包含通过

ng include

在index.HTML中嵌入的所有模板）.

可能使用

$templateCache

-服务是可能的。读一读

ng include

在index.HTML中嵌入的所有模板）.

你可以把它们像灰烬一样放在页面上

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


内容

你可以把它们像灰烬一样放在页面上

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


内容

我要做的是在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>

通过这种方式，我们可以轻松地将所有javascript for指令保存在自己的文件中，并将这些指令的html保存在自己的文件中

在构建期间，我们可以轻松地合并这些文件，这样我们就只有两个文件：index.html和app.js，这意味着只有两个对服务器的请求。

我要做的是在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>

通过这种方式，我们可以轻松地将所有javascript for指令保存在自己的文件中，并将这些指令的html保存在自己的文件中

在构建期间，我们可以轻松地合并这些文件，这样我们就只有两个文件：index.html和app.js，这意味着只有两个服务器请求。

我们在开发期间保留这些html文件，但在需要优化构建时，将它们合并成单个.js文件（然后添加到主bundle.js文件中）

我们使用-如果您已经有了gulp build，则只需几分钟即可完成安装。

我们将在开发期间保留这些html文件，但在需要优化构建时，将它们合并到单个.js文件中（然后将其添加到主bundle.js文件中）

我们使用-如果你已经有了吞咽构建，那么它实际上只需要几分钟的设置