Unknown provider error when trying to dependency inject a service to a controller in AngularJs
Question
I'm new at Angular and trying to do a basic dependency injection to get the hang of it. In this example I'm trying to dependency inject a service to a controller, and I'm getting the following error.
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testInjection
Html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['testInjection',function($scope) {
$scope.name = 'World';
}]).factory('testInjection', ['$scope', function($scope) {
}]);
3 answers
solution1
0 2015-05-06 08:21:12
You should do this :
app.factory('testInjection', ['$scope', function($scope) {
}]);
app.controller('MainCtrl', ['$scope', 'testInjection',function($scope, testInjection) {
$scope.name = 'World';
}]);
It's better to define your service (factory) before. And the problem here is that even if the scope is injected in the service, you have to inject it again in the controller.
solution2
0 2015-05-06 10:53:07
As Nikos said, don't try to inject the scope object into a service or factory.
For my angular projects, I create a new file for each controller/service/factory/directive. The setup of these files look like this:
A factory:
(function () {
'use strict';
angular.module('MyModule')
.factory('someService', function () {
var service = {
myFunction: function () {
return "Hello";
}
};
return service;
});
})();
A controller:
(function () {
'use strict';
angular.module('MyModule')
.controller('someCtrl', ['$scope', 'someService', function ($scope, someService) {
$scope.name = "World";
$scope.message = someService.myFunction() + " " + $scope.name;
}]);
})();
Beware, the above syntax only retrieves a existing module. See Angular Modules under "Creation versus Retrieval". I have another file which creates the module using the same syntax but with brackets for importing other modules.
You should take a look at the angular docs for more information and examples.
solution3
0 2015-05-07 06:58:06
I have modified your plunker here . Please check the way you define a service and the way you inject it. It does not matter even if you define it after the controller. Also, the error was because your factory function did not return anything. Fixed that as well.
Your code should look like:
var app = angular.module('plunker', []);
app.controller('MainCtrl'['$scope','testInjection',function($scope,testInjectio)
{
$scope.name = testInjection;
}]).factory('testInjection', function() {
return "ABC"
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.