Angular JS, how to pass URL parameters to $resouce in angularJS?

Question

Hi I have a simple controller where it passes unique integers into my url, but Im running to many issues. I need to change this "4401" dynamically from my controller.

the url Im trying to reach: https://itunes.apple.com/us/rss/topmovies/limit=50/genre=4401/json

app.factory('classic',function ($resource) {

    return $resource('https://itunes.apple.com/us/rss/topmovies/limit=50/genre=:id/json', {
        get: {
            method: 'JSONP',
            id: '@id'
        }
    });

});

and here is my controller

app.controller('TestCrtl', function ($scope, classic) {
    init();
    function init(id) {
        $scope.movies = classic.get(id);
    }
    $scope.classicMovies = function(){
        var id = "4403";
        init(id);
    }


    $scope.anctionMovies = function(){
        var id = "4404";
        init(id);
    }
});

The error Im getting Uncaught SyntaxError: Unexpected token :

any help would be highly appreciated.

 <div class="col-sm-4">
            <button type="button" data-ng-click="actionMovies()" class="btn btn-default">Action</button>
        </div>
        <div class="col-sm-4">
            <button type="button" class="btn btn-default">Scary</button>
        </div>

Answer 1

Try this:

app.factory('classic',function ($resource) {

    return $resource('https://itunes.apple.com/us/rss/topmovies/limit=50/genre=:id/json', {
        get: {
            method: 'JSONP',
            id: '@id'
        }
    });

});

And in controller change to :

$scope.movies = classic.get(id);

Answer 2

I believe this is the correct way to implement parameters when using a resource factory:

app.factory('movieService',function ($resource) {
    return $resource('https://itunes.apple.com/us/rss/topmovies/limit=50/genre=:id/json', {id: '@id'}, {
        query: { method: 'GET', isArray:true, params: {id: '@id'} }
    });
});

This can be simplified to:

app.factory('movieService',function ($resource) {
    return $resource('https://itunes.apple.com/us/rss/topmovies/limit=50/genre=:id/json', {id: '@id'});
});

To call this get method you would need to do the following. Note the parameters that are used in the get method.

app.controller('TestCrtl', function ($scope, movieService) {

    $scope.classicMovies = function(){
        movieService.query({id: 4403}, function(result){
            $scope.movies = result;
        });
    }
    $scope.anctionMovies = function(){
        movieService.query({id: 4404}, function(result){
            $scope.movies = result;
        });
    }
});

Additionally, it should be noted that the resource method call is going to return a promise. You can either set it from the return value of the get method, like you did above (The status of the promise isn't guaranteed), or you can set it in the callback, which guarantees that the promise is resolved.