txomin txomin - 6 months ago 29
HTML Question

Angular issue when trying to link service to controller

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!!

Answer

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