AngularJs - 如何在$ http中使用$ cacheFactory

时间:2015-01-06 02:59:42

标签: angularjs caching

在我的app.run中,我调用MenuSvc来填充$ state,然后我调用LayoutCtrl来填充DOM的导航,可能是缓存并避免再次调用服务器。

1。 $ HTTP:

/* @ngInject */
app.factory('MenuSvc', MenuSvc);
function MenuSvc($http, MenuSvcCache){
    return {
        all: function(){
            return $http({
                method: 'GET',
                url: 'api/menu.json',
                cache: MenuSvcCache
            });
        }
    }
};
MenuSvc.$inject = ['$http', 'MenuSvcCache'];

2。 $ cacheFactory:

/* @ngInject */
app.factory('MenuSvcCache', MenuSvcCache);
function MenuSvcCache($cacheFactory){
    return $cacheFactory('MenuSvc')
};
MenuSvcCache.$inject = ['$cacheFactory'];

第3。 LayoutCtrl:

ng.module('app.Layout').controller('LayoutCtrl', LayoutCtrl);
function LayoutCtrl($cacheFactory, $http, MenuSvc, MenuSvcCache) {
    var layout = this;
    layout.pageTitle = 'LayoutCtrl';

    Init();
    function Init(){
        if (MenuSvcCache) {
            layout.menuItems = MenuSvcCache.get();
            console.log(MenuSvcCache);
        } else {
            MenuSvc.all().success(function (data) {
                layout.menuItems = data;
                console.log(MenuSvcCache);
            })
                .error(function (error) {
                    console.log('Error: ' + error.message)
                });
        }
    }
};

LayoutCtrl.$inject = ['$cacheFactory', '$http', 'MenuSvc', 'MenuSvcCache'];

毋庸置疑,它不起作用。有人看到我的错误吗?

1 个答案:

答案 0 :(得分:0)

我决定从app.run进行put调用并在那里工作(上面的MenuSvcCache保持不变):

<强> 1。 app.run

    app.run(function ($q, $rootScope, $state, $window, MenuSvc, MenuSvcCache) {
    MenuSvc.all().success(function (states) {
        MenuSvcCache.put('MenuSvc', states)
     ..........

<强> 2。 MenuSvc

    same as above but removed the 'cache: true'

第3。 LayoutCtrl

        function Init(){
        if (MenuSvcCache) {
            layout.menuItems = MenuSvcCache.get('MenuSvc');
            console.log(MenuSvcCache);
        } else {
            MenuSvc.all().success(function (data) {
                layout.menuItems = data;
                MenuSvcCache.put('MenuSvc', data)
                console.log(MenuSvcCache);
            })
                .error(function (error) {
                    console.log('Error: ' + error.message)
                });
        }
    }
};

如果您想使用刷新按钮,则添加额外奖励

        layout.clearCache = function () {
        if (MenuSvcCache) {
            MenuSvcCache.removeAll();
        }
    }