txomin txomin - 2 years ago 79
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:

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:


'use strict';

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

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

.state('introduccion', {
url : "/",
templateUrl : "resources/js/home/views/introduccion.html",
controller : "HomeController"


'use strict';


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

return {

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

return response.data;

console.error('Error while prueba');
return $q.reject(errResponse);


'use strict';

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

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

self.prueba = function(){

function(data) {
self.text = data;

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download