如何缓存angularjs partials？

Question

在angularjs生产中缓存部分的最简单/最现代的方法是什么？

目前代码如下:

$routeProvider.when('/error', {templateUrl: 'partials/error.html', controller: 'ErrorCtrl'});

其中templateUrl显然是指向单独文件的http路径.在移动设备上,该文件的加载时间是显而易见的,我很乐意只缓存所有内容.

Answer 1

答案的主要部分是$ templateCache.提取物:

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
    $templateCache.put('templateId.html', 'This is the content of the template');
});

任何html模板都可以移动到$templateCache,我们的应用程序的其余部分将按预期运行(无需其他更改)

本地存储作为缓存

如果我们希望将模板保留在客户端上,我们也可以使用本地存储.这种角度局部存储扩展将简化许多东西.

所以,让我们调整run()为

1. 观察local-storage,如果我们还没有客户端上的模板
2. 如果需要,发出加载最新的请求......
3. 把它放入缓存(local-storage和$templateCache)

调整后的代码

.run([                  'localStorageService','$templateCache','$http',
    function myAppConfig(localStorageService , $templateCache , $http) {

    // The clearAll() should be called if we need clear the local storage
    // the best is by checking the previously stored value, e.g. version constant 
    // localStorageService.clearAll();

    var templateKey = "TheRealPathToTheTemplate.tpl.html";

    // is it already loaded?
    var template = localStorageService.get(templateKey);

    // load the template and cache it 
    if (!template) {
        $http.get(templateKey)
            .then(function(response) {

                // template loaded from the server
                template = response.data;

                localStorageService.add(templateKey, template);
                $templateCache.put(templateKey, template);
            });
    } else {

        // inject the template
        $templateCache.put(templateKey, template);
    }

    }])

所以,通过这种方式,我们可以从中获利local-storage.它充满了来自服务器的"模板",保存在那里......因此下次不会加载.

注意:非常重要的是注入一些version键/值并检查它.如果本地存储已过时...必须重新加载所有模板.