如何缓存angularjs partials？

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

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

本地存储作为缓存

如果我们希望将模板保留在客户端上,我们也可以使用本地存储.这个angular-local-storage扩展将简化很多东西.

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

>如果我们在客户端上还没有模板,请观察本地存储
>如果需要,发出加载最新的请求…
>把它放入缓存(本地存储和$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);
    }

    }])

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

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