Juan Carlos Oropeza Juan Carlos Oropeza - 2 months ago 10
AngularJS Question

How works the angular factory with parameter

Im reading the angular tutorial STEP 13 REST and Custom Services but not sure if understand correctly.

Here create a Factory to encapsulate the

$http
. The clever part is there is one file
phones/phones.json
with a list of phones, and files with
phones/<phoneId>.json
for the detailed info of each phone.

angular.
module('core.phone').
factory('Phone', ['$resource',
function($resource) {
return $resource('phones/:phoneId.json', {}, {
query: {
method: 'GET',
params: {phoneId: 'phones'},
isArray: true
}
});
}
]);


So when he want get the full list of phones use
Phone.query()
make sense because the factory is call
Phone
and have someting inside called
query:
(how is that tag called? method? function? ). And because there isnt anything as parameter I guess the
phoneId
get the default value of
phones
from the
GET
declaration.

angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['Phone',
function PhoneListController(Phone) {
this.phones = Phone.query();
this.orderProp = 'age';
}
]
});


But now the last part dont have idea how works. I understand get the
phone_id
from the
$routeParams
. But how
Phones
factory now have a
get()
function and why need a callback function when
query()
doesnt;

angular.
module('phoneDetail').
component('phoneDetail', {
templateUrl: 'phone-detail/phone-detail.template.html',
controller: ['$routeParams', 'Phone',
function PhoneDetailController($routeParams, Phone) {
var self = this;
self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
self.setImage(phone.images[0]);
});
}
]
});


So my three questions are:


  • How work the default parameters for
    query

  • How Phones have a
    get()
    and how that work to receive the parameters

  • Why
    get()
    need a callback function when
    query()
    doesnt


Answer

How work the default parameters for query ?

e.g.

var Phones =  $resource('phones/:phoneId.json', {phoneId:'@myPhoneId'}

If I make query Phones.query({phoneId:12345}); then angular will make HTTP#GET call with url phones/12345.json. Here angular knows that,it need to take default parameter phoneId value by mapping from object list passed while calling get method of resource.{phoneId:12345}. So,you can specify defualt parameter using :paramName.

The parameter name in url and hash map object must be same (In this case phoneId)

How Phones have a get() and how that work to receive the parameters?

A resource object has the default set of resource actions .It also have custom actions if you define while creating resource object. The default actions:

1. get    //call $http#GET method
2. save   //call $http#POST method
3. query  //call $http#GET  method
4. remove //call $http#DELETE method
5. delete //call $http#DELETE method

Why get() need a callback function when query() doesn't?

you can call get() without callback.

Your resource object (in this case Phones) will automatically get populated whenever response is returned. you don't need callback.

You can have callback if you need to do some resource operation(save/delete..etc) which need some parameter from previous call.

$resorcenot return promise. Bu the default method defined on it return promise of the action which get resolved on success and rejected on error.

So,you can not have promise chaining.You need callback.

You can get more from angular#$resource

Comments