AngularJS - creating a service object

Question

Instead of posting in Angular mailing list, I think this may be more of javascript question. Hope the SO community can also give faster response.

I am trying to encapsulate the data in a service and injecting into controller.

angular.module('myApp.services', ['ngResource']).
    factory('Player', function($resource){
        var Player ;
        Player = {
            resource: $resource('/api/Player/:_id', {} )
        };
        return Player
});


function PlayerDetailCtrl(Player, $routeParams, $scope) {
    $scope.resource = Player.resource.get({_id:$routeParams._id});
}
PlayerDetailCtrl.$inject = ['Player', '$routeParams', '$scope'];

It throws an exception

TypeError: Object #<Object> has no method 'query'

$scope.resource = Player.Player.resource.get({_id:$routeParams._id}); also throws error

TypeError: Object #<Object> has no method 'query'

the below works.

angular.module('myApp.services', ['ngResource']).
    factory('Player', function($resource){
        var Player ;
        Player= $resource('/api/Player/:_id', {} )
        return Player
});


function PlayerDetailCtrl(Player, $routeParams, $scope) {
    $scope.resource = Player.Player.get({_id:$routeParams._id});
}
PlayerDetailCtrl.$inject = ['Player', '$routeParams', '$scope'];

my intention is to add more data and method to Player. So how can I make the first (object form) works!

Interesting. Is Player: $resource('/api/Player/:_id', {} ) valid javascript? — Grace Huang
– Grace Huang, Commented Jun 28, 2012 at 19:04
extemely sorry, was editing meanwhile. it works if I assign to a variable and access through it, but not if assign inside an object. thanks — bsr
– bsr, Commented Jun 28, 2012 at 19:06
@GraceShao Player: $resource('/api/Player/:_id', {} ) yes if it's part of a member definition ... — jcolebrand
– jcolebrand, Commented Jun 28, 2012 at 19:10

Dan Doyon · Accepted Answer · 2012-06-28 21:28:57Z

6

You are creating a factory, this is the atypical way of doing. You don't want to be returning an instance. Angular will give you an instance in your controller.

 factory('Player', function ($resource) { 
    return $resource('/api/Player/:_id', { });
 })

Here is a service I wrote to interact with a cakephp REST service. I wrote it a while back so just take it as an illustration, I may refactor.

 factory('CommentSvc', function ($resource) {
    return $resource('/cakephp/demo_comments/:action/:id/:page/:limit:format', { id:'@id', 'page' : '@page', 'limit': '@limit' }, {
      'initialize' : { method: 'GET', params: { action : 'initialize', format: '.json' }, isArray : true },
      'save': { method: 'POST', params: { action: 'create', format: '.json' } },
      'query' : { method: 'GET', params: { action : 'read', format: '.json' } , isArray : true },
      'update': { method: 'PUT', params: { action: 'update', format: '.json' } },
    });

}).

edited Jun 28, 2012 at 21:28

answered Jun 28, 2012 at 20:32

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

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

8 Comments

bsr Over a year ago

Dan, I recognize your name from angular mailing list :-). I wanted to add some custom methods to the service. I could create another and inject as well, but was wondering whether I could avoid creating a service just to return a resource object, but encapsulate more related functionality. What you think?

Dan Doyon Over a year ago

not sure I understand, you can add any custom methods you want to a resource object, if the default ones don't meet your needs

bsr Over a year ago

um. I was adding non resource function to this factory/service. For example, caching the get request response initially, and setting it to $scope in controllers. May be an anti-pattern, but I am still learning.

Dan Doyon Over a year ago

You can inject services into other services so you can get reuse there. I wrap resource objects to make app testable and flexible.

bsr Over a year ago

I posted a message in angular mailing list groups.google.com/forum/?fromgroups#!topic/angular/hgUGrg5yeis

|

Grace Huang · Accepted Answer · 2012-06-28 19:12:06Z

0

Looks like the JS is complaining about some code for Player. I guess Player= $resource('/api/Player/:_id', {} ) makes Player have a property call query. The form you changed to does not make Player have that property.

answered Jun 28, 2012 at 19:12

Grace Huang

5,7575 gold badges35 silver badges55 bronze badges

4 Comments

bsr Over a year ago

I am still learning JS, so trying to figure out why. How it different if wrap in an object?

Grace Huang Over a year ago

if you look into the function $resource, it might have query as a property of the return object. But you changed to { resource: $resource('/api/Player/:_id', {} ) }, which does not have the property called query

bsr Over a year ago

so, doesn't it allow to chain the methods?

Grace Huang Over a year ago

what do you mean by chaining the methods in your context?

bsr · Accepted Answer · 2012-06-28 19:50:02Z

0

Ok, after few tries the following worked.

Player = {
            resource: function() {
                     return $resource('/api/Player/:_id', {} )
            }
        };

In this I explicitly return resource object. But cannot explain how it differ from

resource: $resource('/api/Player/:_id', {} )

answered Jun 28, 2012 at 19:50

bsr

59k88 gold badges220 silver badges322 bronze badges

Collectives™ on Stack Overflow

AngularJS - creating a service object

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related