unknown provider in my app

2
votes

I'm trying to put the HTTP request in a service file in order to use this function in multiple controllers but I get the error below, I tried multiple solutions but still get this error

here is my controller.js 

.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/LatestMovies', {
templateUrl: 'LatestMovies/LatestMovies.html',
controller: 'LatestMoviesCtrl'

});
}])


.controller('LatestMoviesCtrl', 
['myServices','$scope',function(myServices,$scope) {



$scope.movies = myServices.getLatestMovies();
console.log($scope.movies ,'ggg')
}
]);

here is my services.js

   angular.module('myApp', ['ngRoute'])

 .factory('myServices', function ($http) {
return {
    getLatestMovies : function () {
            var service ={
                movies : '',
                details : []
            }
            var base = 'http://api.themoviedb.org/3';
            var service = '/movie/popular?page=1&language=en- 
             US&api_key=';
            var apiKey = '';
            var callback = 'JSON_CALLBACK';
            var url =base + service + apiKey + '&callback=' + callback;
            //$scope.results = 'requesting...';

            $http.jsonp(url).then(function(result, status) {
                //$scope.results = JSON.stringify(data);
                service.movies = result.data;
                angular.forEach(result.data.results, function (value, 
                index) {
                    service.details.push(value);
                });

            },function(result, status) {
                service.movies = 'Maybe you missed your API key?' + 
       JSON.stringify(result.data);
            });

            return service.movies;
        }
    }

    });

error

angular.js:14199 Error: [$injector:unpr] Unknown provider: myServicesProvider <- myServices <- LatestMoviesCtrl http://errors.angularjs.org/1.5.11/$injector/unpr?p0=myServicesProvider%20%3C-%20myServices%20%3C-%20LatestMoviesCtrl at http://localhost:8000/bower_components/angular/angular.js:68:12 at http://localhost:8000/bower_components/angular/angular.js:4563:19 at Object.getService [as get] (http://localhost:8000/bower_components/angular/angular.js:4716:32) at http://localhost:8000/bower_components/angular/angular.js:4568:45 at getService (http://localhost:8000/bower_components/angular/angular.js:4716:32) at injectionArgs (http://localhost:8000/bower_components/angular/angular.js:4741:58) at Object.instantiate (http://localhost:8000/bower_components/angular/angular.js:4783:18) at $controller

2
javascriptangularjsnode.js

2 Answers

1
votes

you need to inject the $http module to send api call

 .factory('myServices', ['$http',function ($http) {
return {
    getLatestMovies : function () {
            var service ={
                movies : '',
                details : []
            }
            var base = 'http://api.themoviedb.org/3';
            var service = '/movie/popular?page=1&language=en- 
             US&api_key=';
            var apiKey = '';
            var callback = 'JSON_CALLBACK';
            var url =base + service + apiKey + '&callback=' + callback;
            //$scope.results = 'requesting...';

            $http.jsonp(url).then(function(result, status) {
                //$scope.results = JSON.stringify(data);
                service.movies = result.data;
                angular.forEach(result.data.results, function (value, 
                index) {
                    service.details.push(value);
                });

            },function(result, status) {
                service.movies = 'Maybe you missed your API key?' + 
       JSON.stringify(result.data);
            });

            return service.movies;
        }
    }

    }]);
0
votes

It seems like you have been creating myApp module twice, first in services.js and then in controller.js. So basically what happens is

  1. When services.js loaded first, it creates myApp angular module with myServices service.
  2. And when controllers.js file loaded, at the beginning of file you have recreated myApp module using angular.module('myApp', ['ngRoute']). Where it recreate a new myApp module and register config & LatestMoviesCtrl to it.
  3. Hence myServices dependency isn't available.

To fix the issue while registering further files.

angular.module('myApp')
.config(...)
.controller('LatestMoviesCtrl', .... )