此自定义服务如何工作/更新数据?

时间:2015-08-06 13:29:01

标签: angularjs caching angular-ui-router

我编写了一个服务,它应该在第一次调用服务器时填充数据,然后将其保存在内存中并返回相应的时间。因为我也想在ui-Router中使用它,它应该返回一个promise。

这是服务:

(function () {
"use strict";

angular
    .module("common.services")
    .service("dataCache", ["tabResource", "fieldResource", "$q", "$http", dataCache]);

function dataCache(tabResource, fieldResource, $q, $http) {
    var self = this;
    self.tabs = null;

    var getTabs = function () {
        // create deferred operation
        var deferred = $q.defer();
        if (self.tabs !== null) {
            toastr.warning("tabs from cache");
            deferred.resolve(self.tabs);
        } else {
            // get the data from the server
            $http.get('http://localhost:40000/api/tab')
                .then(function(response) {
                    self.tabs = response.data;
                    deferred.resolve(self.tabs);
                    toastr.warning("tabs from server");
                }, function (response) {
                    deferred.reject(response);
                });

        }
        return deferred.promise;
    };

    return {
        tabs: getTabs()
    };
}
}());

这些是不同的状态,其中'标签'使用:

                .state("relationCustom", {
                url: "/relations/customisation",
                templateUrl: "webApp/relations/relationCustomView.html",
                controller: "RelationCustomCtrl as vm",
                resolve: {
                    tabResource: "tabResource",
                    fieldResource: "fieldResource",
                    // tabs: function (tabResource) {
                    //    return tabResource.query({}, function () { toastr.success('Tabs geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    //}
                    tabs: function (dataCache) {
                        return dataCache.tabs;
                    }
                    , fields: function (fieldResource) {
                        return fieldResource.query({}, function () { toastr.success('Velden geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    }
                }
            })
            .state("relationDetailTab", {
                url: "/relations/:customerName/:relId/:tabId",
                templateUrl: "webApp/relations/relationDetailTabView.html",
                controller: "RelationDetailTabCtrl as vm"
                ,
                resolve: {
                    relationTabResource: "relationTabResource",
                    relationTab: function (relationTabResource, $stateParams) {
                        var relId = $stateParams.relId;
                        var tabId = $stateParams.tabId;
                        return relationTabResource.query({ id: relId, id2: tabId }).$promise;   // query expects array <-> get expects object
                    }
                    //, tabs: function (tabResource, dataCache) {
                    //    return tabResource.query({}, function () { toastr.success('Tabs geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    //}
                    , tabs: function (dataCache) {
                        return dataCache.tabs;
                    }
                    , fields: function (fieldResource, dataCache) {
                        return fieldResource.query({}, function () { toastr.success('Velden geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    }
                }
            })
            .state("relationDetailTabEdit", {
                url: "/relations/:customerName/:relId/:tabId/edit",
                templateUrl: "webApp/relations/relationDetailTabEditView.html",
                controller: "RelationDetailTabEditCtrl as vm",
                resolve: {
                    relationTabResource: "relationTabResource",
                    relationTab: function (relationTabResource, $stateParams) {
                        var relId = $stateParams.relId;
                        var tabId = $stateParams.tabId;
                        return relationTabResource.query({ id: relId, id2: tabId }).$promise;   // query expects array <-> get expects object
                    }
                    //, tabs: function (tabResource) {
                    //    return tabResource.query({}, function () { toastr.success('Tabs geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    //}
                    , tabs: function (dataCache) {
                        return dataCache.tabs;
                    }
                    , fields: function (fieldResource) {
                        return fieldResource.query({}, function () { toastr.success('Velden geladen...'), function () { toastr.error('Tabs laden MISLUKT!') } }).$promise;
                    }
                }
            });
        $urlRouterProvider.otherwise("/");   // Default route
    }]);

我确实在服务代码的各行上设置了断点,并且只在第一次加载应用程序时才输入代码。当我去另一个州时,似乎没有任何服务代码被执行。谁能解释一下为什么?但更奇怪的是,当我将新标签保存到服务器时,它会自动显示在“标签”中。在其他州,显然(根据提琴手)没有服务回叫服务器。我很高兴一切正常,但我真的很想了解......

1 个答案:

答案 0 :(得分:0)

最后它不是一个有角度的问题,而是一个javascript问题。在评论的帮助下,我解决了这个问题。

服务代码的变化:

return {
    tabs: getTabs
};

州的变化:

tabs: function (dataCache) {
                    return dataCache.tabs();
                }

这样,该函数实际上是在状态

的解析块中调用的