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()调整为

如果我们在客户端上还没有模板，请观察local-storage
发出加载最新的请求，如果需要......
将其放入缓存（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键/值并进行检查。如果本地存储已过时......必须重新加载所有模板。

如何缓存angularjs partials？

1 个答案:

本地存储作为缓存