calling one of multiple services in angularJS $resource

Question

Is there anything wrong with this code where I am trying to have one service method point to different restful services?

var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
  function ($resource) {
      return {
          pList: $resource('/:url/:phoneId.json.htm', {}, {
              query: { method: 'GET', params: { url: 'MyAngularScripts', phoneId: 'jsonPhonedata' }, isArray: true }
          }),
          pDetail: $resource('/Content/PhonesData/:phoneId.json.htm', {}, {
              query: { method: 'GET', params: {   phoneId: $routeParams.phoneId }, isArray: false }
          })
      };
}]);

Then in my controller I call the pList like this:

$scope.phones = Phone.pList.query();

The service method doesnt get called with any of the code above. However if I change the service to this:

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function ($resource) {
      return $resource('/:url/:phoneId.json.htm', {}, {
          query: { method: 'GET', params: { url: 'MyAngularScripts', phoneId: 'jsonPhonedata' }, isArray: true }
      });
  }]);

and call from the controller like this:

$scope.phones = Phone.query();

IT works. What is wrong with the service where I have multiple restful calls declared? SOmething wrong with the way its configured or the way I am calling it?

Answer 1

The 1st approach should be working fine as well.

The only oroblem is that you are trying to access a property of $routeParams, without first injecting it via DI, thus resulting in an Error being thrown.
If you correct this, everything should work as expected.