$resource function wrapper angularjs

Question

Currently, I'm doing things like this:

var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
    albumList.data.forEach(function (album) {
        albums.push(album);
    });
});

How do I turn that into a function that I can call in both my service and controller like:

factory('Imgur', function($resource, $http) {
    var albumsService = {};
    var albums = [];

    albumsService.getAlbumList = function() {
        var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
            albumList.data.forEach(function (album) {
                albums.push(album);
            });
        });
    };

    albumsService.albumList = function() {
        albumsService.getAlbumList();
        return albums;
    };

    return albumsService;
});


.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {
    $scope.imgur = Imgur;
    $scope.imgur.albumList();
    //OR
    $scope.imgur.getAlbumList();

    //Some good context here is what if a user wanted to "refresh" the data.
    $scope.updateFilter = function() {
        $scope.imgur.getAlbumList();
    }; 


}]);

Ultimately the goal here is to be able to call a resource service as many times as I want. The service should be a function callable by both inside the service and inside the controller.

Might help to see a plunkr/fiddle of the entire code/controller etc. — Tim Withers
– Tim Withers, Commented May 6, 2013 at 17:30
I am not sure what you're trying to accomplish here. I think you're overcomplicating things. Are you just trying to access the imgur api, but have the results in a different format? It's unclear what your problem is. — jessegavin
– jessegavin, Commented May 6, 2013 at 17:45
The 2nd to last line $scope.imgur.albumList(); doesn't make sense. You're not assigning the result of the function to anything. — jessegavin
– jessegavin, Commented May 6, 2013 at 17:46
@jessegavin Yea sorry syntax from copying. So, I am trying to wrap var albumList as a function. Ultimately the goal here is to be able to call a resource service as many times as I want. The service should be a function callable by both inside the service and inside the controller. — Dan Kanze
– Dan Kanze, Commented May 6, 2013 at 17:49
Still doesn't make sense. Are you attempting to display any of the data from Imgur? If so, you'll need to assign the results from your service function to a property on the scope. — jessegavin
– jessegavin, Commented May 6, 2013 at 18:03

jessegavin · Accepted Answer · 2013-05-06 17:38:21Z

1

angular.module("MyApp", ['ng-resource']).
  service("Database", function() {
    return {
      albums : $resource('https://api.imgur.com/3/account/guy123/albums')
    }
  }).
  controller("MyCtrl", function(Database) {
    $scope.albums = Database.albums.query();
  })

Then in your Html

<html ng-app="MyApp">
<head></head>
<body ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="album in albums">
      {{album.name}}
    </li>
  </ul>
</body> 
</html>

answered May 6, 2013 at 17:38

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

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

4 Comments

Dan Kanze Over a year ago

I would need to be able to make service calls within the service itself, thus the need to execute the service as a function.

jessegavin Over a year ago

Why do you need to do that?

Dan Kanze Over a year ago

I made some edits to post hopefully that will clear up confusion.

Dan Kanze Over a year ago

Ok it seems like what I am trying to do isn't going to work out. I need to rethink my app structure. However, using this method, how do I impliment success and error handlers in both the controller? In other words - assign $scope.albums = data on success.

zmanc · Accepted Answer · 2013-05-06 17:39:46Z

1

The Service

var service = angular.module("yourApp.service", ['ngResource']);
service.factory('albumsService', [$resource',function ($resource){
    return $resource('https://api.imgur.com/3/account/guy123/albums',{},{
         query: {method: "GET", isArray:true}
    });
}]);

Then in the controller

$scope.albumList = albumsService.query();

answered May 6, 2013 at 17:39

zmanc

5,45314 gold badges53 silver badges91 bronze badges

5 Comments

Dan Kanze Over a year ago

I would need to be able to make service calls within the service itself, thus the need to execute the service as a function.

zmanc Over a year ago

Could you possibly use params: ? Depending on what type of service calls you are doing. I know in one of my use cases I have several types of requests that I manage through parameters.

Dan Kanze Over a year ago

I made some edits to post hopefully that will clear up confusion.

Dan Kanze Over a year ago

Ok it seems like what I am trying to do isn't going to work out. I need to rethink my app structure. However, using this method, how do I impliment success and error handlers in both the controller? In other words - assign $scope.albumList = data on success.

zmanc Over a year ago

As per the angular doc "Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data. This means that in most case one never has to write a callback function for the action methods." docs.angularjs.org/api/ngResource.$resource#Returns

Collectives™ on Stack Overflow

$resource function wrapper angularjs

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related