Question

我有一个应用程序，当你选择一个项目时，它进入项目部分，它需要异步加载有关项目的所有信息和数据。

我想将所有数据存储在单件服务中，以便我可以访问所有项目子部分（项目标题，项目页脚，主菜单等）中的数据

如果用户单击其他项目，则需要使用不同的URL参数（在本例中为project_id）重新初始化。

app.factory('ProjectService', function($http, project_id) {
var SERVICE = {
    async: function() {
        var promise = $http.get('SOME URL' + project_id).then(function(response) {
            return response.data;
        });
        return promise;
    }
};
return SERVICE;
});

实现此目的的最佳方法是什么？如何在用户点击按钮时使用不同的网址参数重新初始化服务？

Answer 1

检查工作演示：JSFiddle

首先，使用factory可能更适合您的情况。

您需要手动使用延期/承诺。如果已加载请求的id，请立即解析延迟对象。否则，发送HTTP请求（在演示中我刚使用an public API providing fake data）并获取项目信息。

app.factory('ProjectFactory', ['$http', '$q', function ($http, $q) {
    var myProject;
    return {
        project: function (id) {
            var deferred = $q.defer();
            // If the requested id is fetched already, just resolve
            if (!id || (myProject && myProject.id === id)) {
                console.log('get from cache');
                deferred.resolve(myProject);
            } else {
                console.log('sending request...');
                $http.get('http://jsonplaceholder.typicode.com/posts/' + id).success(function (response) {
                    myProject = response;
                    deferred.resolve(myProject);
                }).error(function (response) {
                    deferred.reject(response);
                });
            }
            return deferred.promise;
        }
    };
}]);

使用此工厂：

app.controller('JoyCtrl', ['$scope', '$timeout', 'ProjectFactory', function ($scope, $timeout, ProjectFactory) {
    ProjectFactory.project(1).then(function (project) {
        $scope.project = project;
        ProjectFactory.project(1).then(function (project) {
        });
    }, function (reason) {
        console.log('Failed: ' + reason);
    });
}]);

供参考：$http，$q

Angular JS动态地使用不同的参数初始化服务

1 个答案: