怎样缓存angularjs谐音？ [英] how to cache angularjs partials?

问题描述

什么是在angularjs生产缓存谐音的简单/现代的方式？

What's the simplest/modern way of caching partials in angularjs production?

目前的code如下：

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

凡templateUrl显然是一个HTTP路径到一个单独的文件。在移动设备上加载时间该文件是明显，我很想只是一切缓存

Where the templateUrl is obviously an http path to a separate file. On mobile the loading time for that file is noticeable and I'd love to just cache everything.

推荐答案

答案的主要部分是 $ templateCache 。摘录：

The main part of the answer is the $templateCache. An extract:

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

任意的HTML模板，可以移动到 $ templateCache ，和我们的应用程序将采取行动的预期，其余的（不需要其他变化）

Any of the html templates, can be moved to the $templateCache, and the rest of our application will act as expected (no other changes required)

在的情况下，我们想保持模板在客户端上，我们可以使用本地存储为好。这角本地存储扩展程序会简化很多东西。

In case, that we would like to keep the template on the client, we can use the local storage as well. This angular-local-storage extension would simplify lot of stuff.

那么，让我们调整的run（）到

1. 观察本地存储，如果我们还没有的的模板的客户端


2. 问题加载最新的要求，如果需要的话...


3. 把它放入缓存（本地存储和 $ templateCache ）

1. observe the local-storage, if we do not already have the template on the client
2. issue the request to load the latest, if needed...
3. put it into the caches (local-storage and $templateCache)

调整后的code

.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);
    }

    }])

所以，就这样，我们从本地存储的利润。它充满了从服务器模板，保持在那里...并因此未加载下一次

So, this way, we do profit from the local-storage. It is filled with the "template" from the server, kept there... and therefore not loaded next time.

请注意：很重要的是还注入一些版本键/值进行检查。如果本地存储过时......所有的模板必须重新加载

NOTE: Very important is also to inject some version key/value and check it. If the Local storage is out-dated... all templates must be reloaded.

这篇关于怎样缓存angularjs谐音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！