Pass a variable to a service with AngularJS?

Question

I am building an app to track movies and their info, I am new to Angular, and I cant not really sure how to pass a variable to this service. I want the url to be a variable instead of hardcoded. whats the best way to do it?

tmdb.service('tmdbService', function($http, $q){
    var deferred = $q.defer();

    $http.get('https://api.themoviedb.org/3/movie/popular?api_key=jkhkjhkjhkjh').then(function(data){
        deferred.resolve(data);        
    });

    this.getMovies = function(){
        return deferred.promise;
    }
});

tmdb.controller("tmdbController", function($scope, tmdbService){
    var promise = tmdbService.getMovies();
    promise.then(function(data){
        $scope.movies = data;
        //  console.log($scope.movies);
    })
});

Services can have methods in them and when you call those methods from controller where the service is injected. So now you just have to simply pass variables as arguments to those functions. — brute_force
– brute_force, Commented Oct 3, 2015 at 9:15

Davin Tryon · Accepted Answer · 2015-10-03 09:10:49Z

1

There is no need (in this case) to use $q.defer() because $http already returns a promise. So, your service code can be simplified to:

tmdb.service('tmdbService', function($http){

    this.getMovies = function(){
        return $http.get('https://api.themoviedb.org/3/movie/popular?api_key=jkhkjhkjhkjh');
    }
});

Then, if you want to send a parameter you can do this:

tmdb.service('tmdbService', function($http){

    this.getMovies = function(movieId){
        return $http.get('https://api.themoviedb.org/' + movieId + '/movie/popular?api_key=jkhkjhkjhkjh');
    }
});

In your controller, you can now send in the movieId:

tmdb.controller("tmdbController", function($scope, tmdbService){

    tmdbService.getMovies(3).then(function(response){
        $scope.movies = response.data;
        //  console.log($scope.movies);
    })
});

answered Oct 3, 2015 at 9:10

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tarun Dugar · Accepted Answer · 2015-10-03 09:12:11Z

0

I usually do this in the following way which I feel is neat and more readable:

tmdb.service('tmdbService', [function($http) {
    return {     //simple mapping of functions which are declared later
        fn1: fn1,
        fn2: fn3
    }

    function f1(param) { //param can be the url in your case
        //fn code example
        return $http.post(param).success(function(response) {
             return response.data;
        })
    }

    function f2(param) {
    }
}]

And in your controller, using the service:

tmdb.controller('tmdbController', ['$scope', 'tmdbService', function($scope, tmdbService) {
    tmdbService.f1(url).then(function(data) {
         //handle the data here
    })
}])

answered Oct 3, 2015 at 9:12

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Comments

Prince_SaaS · Accepted Answer · 2015-10-03 09:41:03Z

There are several ways you can go about achieving this goal. In my opinion there is really no right/wrong way; what is right is absolutely dependent on your need and this may change as you application grows.

Especially for large applications, you can define a module to manage urls and inject this module into your index application.

Another way is to define a service to manage your urls. In this case you also have to inject this service into any other services/controllers etc where you may need it. The disadvantage to this is that this service is only available to the angular module its defined within or at most must be accessed via that module.

So using the service style here is how it may be implemented.

tmdb.service('urlService', function () {
    
    this.urls = {
        url1: 'https://api.themoviedb.org/3/movie/popular?api_key=jkhkjhkjhkjh',
        url2: 'anotherUrl'
    };

});


tmdb.service('tmdbService', ['$http', '$q', 'urlService', function ($http, $q, urlService) {
    var deferred = $q.defer();

    $http.get(urlService.url.url1).then(function (data) {
        deferred.resolve(data);
    });

    this.getMovies = function () {
        return deferred.promise;
    }
}]);

Again there is no absolute right/wrong way; it depends.

I hope you find this helpful.

Cheers!

Collectives™ on Stack Overflow

Pass a variable to a service with AngularJS?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related