Angular js $http factory patterns

Question

I've a factory named as 'userService'.

.factory('userService', function($http) {
    var users = [];

    return {
        getUsers: function(){
            return $http.get("https://www.yoursite.com/users").then(function(response){
                users = response;
                return users;
            });
        },
        getUser: function(index){
            return users[i];
        }
    }
})

In the first page, On button click I want to call getUsers function and it will return the 'users' array.

I want to use 'users' array in the second page. How can I do it?

P.s: I'm using getters and setters to store the response in first page and access the same in second page. Is this the way everyone doing?

dfsq · Accepted Answer · 2014-10-30 15:54:36Z

3

1). getUsers. For consistence sake I would still use the same service method on the second page but I would also add data caching logic:

.factory('userService', function($q, $http) {

    var users;

    return {
        getUsers: function() {
            return users ? $q.when(users) : $http.get("https://www.yoursite.com/users").then(function(response) {
                users = response;
                return users;
            });
        },
        getUser: function(index){
            return users[i];
        }
    };
});

Now on the second page usage is the same as it was on the first:

userService.getUsers().then(function(users) {
    $scope.users = users;
});

but this promise will resolve immediately because users are already loaded and available.

2). getUser. Also it makes sense to turn getUser method into asynchronous as well:

getUser: function(index){
    return this.getUsers().then(function(users) {
        return users[i];
    });
}

and use it this way in controller:

userService.getUser(123).then(function(user) {
    console.log(user);
});

edited Oct 30, 2014 at 15:54

answered Oct 30, 2014 at 15:38

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Brett Over a year ago

It might also be prudent to include logic in the getUser() method to handle cases where users is empty or null.

dfsq Over a year ago

@Brett I agree. However I still have doubts here what approach is better here: throwing an error in case getUser is called when users are not available, or make getUser also return promise like getUsers.

Gangadhar Jannu Over a year ago

@dfsq Thanks for the answer. What I did was I've created two functions first one for service call and in that i've assigned response to data. In the second function I am returning the data. However If I repeatedly make service calls the same data was carry forwarding. I hope your answer will solve the problem. :)

Gangadhar Jannu Over a year ago

@dfsq I've a same doubt when the data is not available what is better approach? should we do post processing in factory itself or should we do it in controller?

dfsq Over a year ago

@GangadharJannu I would go with making getUser also return promise, like I described in point #2 of my answer. This way we are sure that user is retrieved always after users array is available.

|

Karthik Pala · Accepted Answer · 2015-01-12 12:04:18Z

Here is the pattern i have followed in my own project. You can see the code below

.factory('userService', function($http) {
return {
        serviceCall : function(urls, successCallBack) {

                $http({
                    method : 'post',
                    url : url,
                    timeout : timeout
                }).success(function(data, status, headers, config) {
                        commonDataFactory.setResponse(data);
                }).error(function(data, status, headers, config) {
                        commonDataFactory.setResponse({"data":"undefined"});
                        alert("error");
                });
            }
        },
    };

After service call set the response data in common data factory so that it will be accessible throughout the app

In the above code I've used common data factory to store the response.

Collectives™ on Stack Overflow

Angular js $http factory patterns

2 Answers 2

7 Comments

After service call set the response data in common data factory so that it will be accessible throughout the app

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

After service call set the response data in common data factory so that it will be accessible throughout the app

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related