angularjs - $templateCache, $templateRequest, ngInclude 一起玩好(er)

Question

我试图在第一页 View 中获取所有部分，以便在应用程序查看期间不会下载 html。

一种方法是在 index.html 中添加模板。 .

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

这样你就有超过 5 个模板 index.html文件变成
无法管理并破坏项目的模块结构。

另一种方法是在 .js 中添加 html。文件，最有可能在 app.js

myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

我认为 .js文件不是 html 代码的地方，同样的问题
就像在 index.html 中一样.

我想做的是在不同的文件中有模板，所以我可以保持我的模块结构并将它们预加载到 index.html 中。

这就是我现在所拥有的。

var cmsAppFirstRun = function ($templateCache, $templateRequest, $rootScope) {
    $templateRequest('views/common/top-bar.html').then(function (response) {
        $templateCache.put('top.bar', response);
        $rootScope.templatesDone = true;
    });
};

angular.module('cmsApp').run(cmsAppFirstRun);

和 html

<div ng-include="'top.bar'" ng-if="$root.templatesDone"></div>

有没有更性感、更棱 Angular 分明的方式来做到这一点？

Answer 1

发现了一些使用 $http 的技术和 $route在 stack answers .

我认为最吸引人的是

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})

这样， route 的所有模板都会在第一次运行时加载。

编辑:我正在使用 UI Router所以在 angular.run() 中看起来有点不同堵塞。此处尚未处理嵌套 View 。

angular.forEach($state.get(), function(state){
            if(state.templateUrl){
                $http.get(state.templateUrl, {cache: $templateCache});
            }
        });

编辑 2:我错过了 $templateRequest ，它可以是 angular.run() 中的 html 模板的路径堵塞。

 $templateRequest('views/cart/modal-confirm-continue-printing.html');
 $templateRequest('views/cart/modal-confirm-trash.html');

编辑 3:由于我使用 grunt 构建应用程序，我发现 https://www.npmjs.com/package/grunt-angular-templates对自动化这个过程很有用。