CODEWITHSUNDEEP
angularjsresources
pap
pap

Reputation: 115

Angular $resource returns TypeError

Hello I am trying to get a url from my api using the ngResource and I have a service that returns the resource. However when I call it inside my controller is gives me an error of Cannot read property 'query' of undefined.

Why is this happening?

This is my service : 

(function() {

  var app = angular.module('test');

  app.service('ContactResource', ['$resource', function($resource) {

      return $resource('/contacts/:firstname', {firstname: '@firstname'},
        {
          'update': {method: 'PUT'}
        }
      );
  }]);

}());

This is my controller 

(function() {

  var app = angular.module('test');

  app.controller('contactsCtrl', ['ContactResource', function($scope, Contacts, ContactResource) {
    $scope.contacts = ContactResource.query();
  }]);

}());

And this is my HTML 

<table class="table table-bordered">
  <thead>
    <th>Firstname <input type="search" class="pull-right"></th>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts">
      <td>
        <a ng-href="/{{ contact.firstname }}">{{ contact.firstname }}</a>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 33

Answers (1)

Chrillewoodz
Chrillewoodz

Reputation: 28328

Here is your problem:

['ContactResource', function($scope, Contacts, ContactResource)

You need to also inject $scope and Contacts into the array, like this:

['$scope', 'Contacts', 'ContactResource', function($scope, Contacts, ContactResource)

Or Angular will think that 'ContactResource' is the same as $scope.

Upvotes: 1

Related Questions