CODEWITHSUNDEEP
javascriptangularjsvariablesservice
Mazarelo
Mazarelo

Reputation: 3

Pass a variable to a service with AngularJS?

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);
    })
});

Upvotes: 0

Views: 78

Answers (3)

Prince_SaaS
Prince_SaaS

Reputation: 474

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!

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

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
    })
}])

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67336

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);
    })
});

Upvotes: 1

Related Questions