尝试依赖注入服务到AngularJs中的控制器时，未知的提供程序错误

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.

我是Angular的新手,并尝试进行基本的依赖注入以获得它的悬念。在这个例子中,我试图依赖注入服务到控制器,我收到以下错误。

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testInjection

Plunker

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 个解决方案

#1

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.

最好先定义您的服务(工厂)。这里的问题是,即使在服务中注入范围,您也必须在控制器中再次注入它。

#2

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.

我在这里修改了你的plunker。请检查您定义服务的方式以及注入方式。即使您在控制器之后定义它也没关系。此外,错误是因为您的工厂功能没有返回任何东西。修正了这一点。

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"
  });

#3

As Nikos said, don't try to inject the scope object into a service or factory.

正如Nikos所说,不要试图将范围对象注入服务或工厂。

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.

您应该查看角度文档以获取更多信息和示例。

#1