14、深入探索AngularUI Bootstrap定制与移动开发

onion

于 2025-12-02 14:15:19 发布

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS实战进阶文章标签： AngularUI Bootstrap $templateCache 外部模板

本文链接：https://blog.youkuaiyun.com/onion/article/details/155543821

AngularJS实战进阶专栏收录该内容

16 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

深入探索AngularUI Bootstrap定制与移动开发

1. 利用$templateCache加载模板

在AngularJS中，当请求模板时，它会在底层使用 $templateCache 服务来缓存请求及其响应。这个缓存的内容在AngularJS的生命周期内会一直存在，页面重新加载时会被清除，但路由改变时会保留。我们可以直接使用 $templateCache 服务，避免使用脚本标签或模板URL等中介。

$templateCache 服务有设置和获取方法，分别用于缓存模板和后续检索模板。以下是缓存模板的示例代码：

angular.module('myApp.directives', []).run(function($templateCache) {
    $templateCache.put('bar-chart.html', 
        '<div class="container" ng-style="setContainer()">' +
           '<div class="bar" ng-repeat="bar in bars" ng-style="setDetails(bar, $index)">{
  
  {bar.color}} - {
  
  {bar.percentage}}%</div>' +
        '</div>'
    );
});

由于它是Angula