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

【问题标题】：Unknown provider error when trying to dependency inject a service to a controller in AngularJs尝试将服务依赖注入到 AngularJs 中的控制器时出现未知的提供程序错误
【发布时间】：2015-07-16 05:35:12
【问题描述】：

我是 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) {

  }]);

【问题讨论】：

$scope 可以仅注入控制器（独立或指令）。您的服务必须使用其他东西（我什至会考虑在服务中使用视图构造（如范围）是否正常）。
你最好看看这个答案：stackoverflow.com/questions/22898927/…

标签： javascript angularjs dependency-injection angularjs-service angularjs-controller

【解决方案1】：

你应该这样做：

app.factory('testInjection', ['$scope', function($scope) {

 }]);

app.controller('MainCtrl', ['$scope', 'testInjection',function($scope, testInjection) {
  $scope.name = 'World';
}]);

最好先定义你的服务（工厂）。而这里的问题是，即使在服务中注入了作用域，也必须在控制器中再次注入。

【讨论】：

为什么先声明工厂比较好？此外，将$scope 注入服务实际上没有意义..
我同意注入作用域没有意义，因为服务应该少上下文...对于控制器之前的服务，这只是我使用的约定，因为控制器使用它，所以它应该在之前定义，即使在这种情况下它仍然可以工作。

【解决方案2】：

我已经修改了你的 plunker here。请检查您定义服务的方式以及注入服务的方式。即使在控制器之后定义也没关系。此外，错误是因为您的工厂函数没有返回任何内容。也解决了这个问题。

您的代码应如下所示：

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

app.controller('MainCtrl'['$scope','testInjection',function($scope,testInjectio)
 {
  $scope.name = testInjection;
}]).factory('testInjection', function() {
       return "ABC"
  });

【讨论】：

【解决方案3】：

正如 Nikos 所说，不要尝试将作用域对象注入服务或工厂。

对于我的 Angular 项目，我为每个控制器/服务/工厂/指令创建一个新文件。这些文件的设置如下所示：

工厂：

(function () {
    'use strict';
    angular.module('MyModule')
           .factory('someService', function () {
               var service = {
                   myFunction: function () { 
                       return "Hello";
                   }
               };

               return service;
           });
})();

控制器：

(function () {
    'use strict';
    angular.module('MyModule')
           .controller('someCtrl', ['$scope', 'someService', function ($scope, someService) {
               $scope.name = "World";
               $scope.message = someService.myFunction() + " " + $scope.name;
           }]);
})();

请注意，上述语法仅检索现有模块。请参阅“创建与检索”下的 Angular Modules。我有另一个文件，它使用相同的语法创建模块，但带有用于导入其他模块的括号。

您应该查看angular docs 以获取更多信息和示例。

【讨论】：

感谢您的回答，因为我说我是新手，所以可能需要一段时间才能选择最佳答案。使用您的技术，您是否将每个控制器/服务/工厂/指令放在它自己的模块中，然后将依赖项模块注入到模块中？
不，它使用的是同一个名为“MyModule”的模块。你可以将你的代码分成多个模块并将它们注入到其他模块中，但我认为这个例子有点高级。