如何缓存angularjs部分？

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，我们的应用程序的其余部分将按预期运行（无需其他更改）

本地存储作为缓存

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

所以，让我们将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 键/值并检查它也很重要。如果本地存储已过时...必须重新加载所有模板。