AngularJS工厂注入错误

Question

I'm using angularJS and when I'm injecting a Factory I get error:

app.js :

angular.module('myapp', [])

myfactory.js :

angular.module('myapp', [])
.factory('httpService', function($http, $timeout) {

});

Controller: test.js :

angular.module('myapp', [])
.controller('test',  function($scope, $timeout, $sce, $http, httpService) {

  $scope.submit = function() {
  }
});

When I add httpService I get error. Everything seems to be right, I even use this factory in all projects. Error:

angular.min.js:92 Error: [$injector:unpr] http://errors.angularjs.org/1.2.25/$injector/unpr?p0=httpServiceProvider%20%3C-%20httpService
at Error (native)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:6:450
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:36:202
at Object.c [as get] (http://localhost:81/chah/assets/js/angularjs/angular.min.js:34:305)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:36:270
at c (http://localhost:81/chah/assets/js/angularjs/angular.min.js:34:305)
at d (http://localhost:81/chah/assets/js/angularjs/angular.min.js:35:6)
at Object.instantiate (http://localhost:81/chah/assets/js/angularjs/angular.min.js:35:165)
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:67:419
at http://localhost:81/chah/assets/js/angularjs/angular.min.js:54:25

Answer 1

Check the link in your error ( https://docs.angularjs.org/error/ $injector/unpr?p0=httpServiceProvider%20%3C-%20httpService):

You create module multiple times:

angular.module('myapp', [])

You should do it once. Then use without []

angular.module('myapp').factory ...
angular.module('myapp').controller ...

Answer 2

The reason for the error is because in the creation of the httpService and the controller you have used the setter ie angular.module('myapp', []) syntax for the module and not the getter syntax. angular.module('myapp') . Angular requires us to define a module only once, thus the subsequent redefining causes the error.

So in app.js , define the module :

angular.module('myapp', []) ;

In myfactory.js use the getter Syntax by removing the , [] :

angular.module('myapp')
.factory('httpService', function($http, $timeout) {
});

And in test.js :

angular.module('myapp')
.controller('test',  function($scope, $timeout, $sce, $http,  httpService) {

$scope.submit = function() {
}
});

Here is a link to the docs

Answer 3

yes,

what you are doing is re-creating your app

what you need to do is define it once and continue using that instance

var app = angular.module('myapp', []);

app.factory('httpService', function($http, $timeout) {

});

app.controller('test',  function($scope, $timeout, $sce, $http, httpService) {

  $scope.submit = function() {
  }
});

or if you want to retrieve your app the syntax is angular.module('myapp') this returns 'myapp', but adding [], tells angular to create an app and not fetch it

Answer 4

Code should look like below:

angular.module('myapp', [])
.factory('httpService', function($http, $timeout) {

});
.controller('test',  function($scope, $timeout, $sce, $http, httpService) {

  $scope.submit = function() {
  }
});