Angular issue when trying to link service to controller

Question

i'm trying to develop a web app using Angularjs, I could implement the ui-router framework succesfully, and the template and controller are loaded correctly, but then, the controller calls a service and is there when I'm getting an error that i cannot get rid off (https: //docs.angularjs.org/error/$injector/unpr?p0=HomeServiceProvider%20%3C-%20HomeService%20%3C-%20HomeController). I'm importing the js files in the following order:

1-service 2-controller 3-main app

Also here you have an image (the code is after clicking on the state) with the html code. The js files are the following:

home-app.js

'use strict';

angular.module("home", ['ui.router', 'home.controllers'])

    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

        $stateProvider
                .state('introduccion', {
                    url : "/",
                    templateUrl : "resources/js/home/views/introduccion.html",
                    controller : "HomeController"
                })
}]);

home-service.js

'use strict';

angular.module('home.services',['ngResource'])

    .factory('HomeService', ['$http', '$q', function($http, $q){

        return {

            prueba: function() {
                return $http.get('http://localhost:8081/home/prueba').then(

                    function(response){
                        return response.data;
                    }, 

                    function(errResponse){
                        console.error('Error while prueba');
                        return $q.reject(errResponse);
                    }
                );
            }
        };
    }]);

home-controller.js

'use strict';

angular.module("home.controllers", [])

    .controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
              var self = this;
              self.text = null;

              self.prueba = function(){
                  HomeService.prueba().then(



                   function(data) {
                        self.text = data;
                   },

                   function(errResponse){
                        console.error('Error while Prueba');
                   }
              );
          };
}]);

All help is welcome!!! thanks

EDIT i changed the home-app passing the home.service as suggested, and also i tried putting it on the home-controller, but in both cases i'm getting the same error: Failed to instantiate module home due to:

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=h...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:134
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222)
at bb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:246)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:21:19

Error message

I also created a jsfiddle: https://jsfiddle.net/txominsirera/0s2d2zyr/

EDIT i found something interesting, i replaced the service js with a dummy service, with no ngResource dependecy, and i got no errors with it!!

write the controller as `angular.module("home.controllers", ['home.services'])` . You need to inject the service module in controller module. — Saad, May 15 '16 at 10:45
doing that throws another error... https://docs.angularjs.org/error/$injector/modulerr — txomin, May 15 '16 at 11:01

score 3 · Answer 1 · answered May 15 '16 at 11:08

3

in home-app.js add module home.services like:

    angular.module("home", ['ui.router','home.controllers','home.services'])

instead of :

angular.module("home", ['ui.router', 'home.controllers'])

answered May 15 '16 at 11:08

Nazrul Islam

348
3
8

score 3 · Accepted Answer · answered May 15 '16 at 12:43

You need to download angular-resource file in your app to inject ngResource as dependency in home.services module. It's needed to use $resource as dependency in angular factory/service. As I am seeing you have not used $resource in home.services module, you can remove ngResource as your module dependency.

And then, write the controller as angular.module("home.controllers", ['home.services']). You need to inject the service module in controller module.

See this working Plunker

Angular issue when trying to link service to controller

2 Answers2