0

Just trying to get a very simple REST get call to work using angularjs $resource service. The API is never called. Here is the code:

angular.module('app.services', [])
.service('tourRepository', function ($resource) {
    this.get = function (id) {
        alert('tourRepositoryCalled for id ' + id + '!');  // this is called
        var tour = $resource('/api/tour/:tourid', { tourId: '@id' });
        return tour.get({ tourId: id }, function () {
            alert('tour api called.');  // THIS NEVER IS
        });
    }

If I use a browser and go to /api/tour/3, it works. What am I doing wrong here? I thought $resource calls could be much easier, for example like below, but I am following angularjs documentation.

Ideally:

$scope.tour = $resource.get('/api/tour/' + id);   // why wouldn't this work?

All that I want to do is call a simple REST service and assign the results to my $scope.tour object. Since I'm in a service though (my 'repository') I don't have access to the $scope. What's the best way to go about this? When I change the code to below the API is getting hit.

        var tour = $resource('/api/tour/:tourid');
        var theTour = tour.get({ tourid: id });
        alert(theTour.id);
1
  • If you open chrome developer tools, how things are looking at the network tab?
    – Fedaykin
    Feb 1, 2014 at 15:25

3 Answers 3

1

For simple models you can use $http instead of $resource

$http.get('/api/tour/' + id).success(function (tour) {
  $scope.tour = tour;

});

$resource is a service for creating javascript classes (ActiveRecord style).

var Tour = $resource(...) // capital T
var tour1 = Tour.get()

Although slightly confusing, your code should work. does the ajax request take place? and does it return a valid response?

2
  • The ajax request doesn't happen. When I change the code to use the tour object in the service, it does happen. Feb 1, 2014 at 15:47
  • the $http.get().success() method was the easiest way to implement this. I don't fully understand resource or why you would use it. Supposedly more powerful for REST but I couldn't get it to work. Feb 1, 2014 at 17:31
0

Once the get request is completed the returned object is filled with the data got from the response, there's no callback in the $resource's get method.

$resource is useful when you attach the object which is returned by the call to a scope instance. In this case when the object is resolved and the digest loop is called the view is being automatically updated.

If you need a callback you can use:

$http.get('/api/tour/' + id)
.then(function (tour) {
    $scope.tour = tour;
});

By using your services you can:

function MyCtrl($scope, tourRepository) {
  $scope.tour = tourRepository.get(ID_OF_THE_TOUR);
}
4
  • This is exactly what I want to do, assign the result to my $scope.tour. I thought I could do it all with $resource at a higher level than $http (so not have to deal with promises) Feb 1, 2014 at 15:54
  • Ok, great. I updated my answer in order to reflect your question. Please, let me know if it works for you. Feb 1, 2014 at 15:59
  • I've implemented my callback using your recommendation on $http.get.. I find $resource to be incredibly confusing and couldn't get it to work.. this was simple and easy. I think .success is probably the correct method to use though (rather than .then), isn't it? Feb 1, 2014 at 17:26
  • Both are true, since the result returned by $http.get is promise. Checkout docs.angularjs.org/api/ng.$http Feb 1, 2014 at 18:43
0

You have to include ngResource module in your app('app.services') dependencies. The spelling of tourid in the url must be tourId

angular.module('app.services', ['ngResource'])
.service('tourRepository', function ($resource) {
    this.get = function (id) {
        alert('tourRepositoryCalled for id ' + id + '!');
        var tour = $resource('/api/tour/:tourId', { tourId: '@id' });
        return tour.get({ tourId: id }, function () {
            alert('tour api called.'); 
        });
    }
4
  • This is not true. I have the 'ngResource' dependency on my app declaration and it is being hit in the right circumstances (see my question edit) Feb 1, 2014 at 15:53
  • I do not see any line like angular.module('app.services', ['ngResource']) in your code.
    – Fizer Khan
    Feb 1, 2014 at 16:17
  • I have updated my answer. Please check. You have spelling mistake in tourid in url.
    – Fizer Khan
    Feb 1, 2014 at 16:24
  • Here is my app declaration: angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives', 'app.controllers', 'ngResource']) Feb 1, 2014 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.