$ templateCache,$ templateRequest,ngInclude一起玩好(呃)

时间:2015-03-16 10:00:06

标签: angularjs angularjs-ng-include

我试图在第一页视图中获取所有部分内容,以便在应用程序查看期间不会下载任何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中一样。

我想做的是,在不同的文件中有模板,所以我可以保留我的模块结构并在索引上预加载它们。

这就是我现在所拥有的。

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>

这样做是否有更性感,更有棱角的方式?

2 个答案:

答案 0 :(得分:2)

stack answers中使用$http$route找到了一些技巧。

我认为最吸引人的是

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});
      }
    }
})

这样,路由中的所有模板都会在首次​​运行时加载。


编辑:我使用UI Router,因此在angular.run()块中看起来有点不同。此处尚未处理嵌套视图。

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 usefoul用于自动执行此过程。

答案 1 :(得分:1)

不确定是否可以帮助您,但在我的项目中,我使用gulp-ngtemplate生成一个包含所有html文件的js文件作为“$ templateCache.put()”指令。