Angular 在不同的文件中拥有控制器和服务答案

【问题标题】：Angular having controllers and services in different filesAngular 在不同的文件中拥有控制器和服务
【发布时间】：2017-09-14 17:53:27
【问题描述】：

我的 Angular 应用中有两个控制器和一个服务，分为 3 个不同的文件，如下所示：

主控制器

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

app.controller("mainController", function(){
    console.log("Hi main controller");
})

第二控制器

var app = angular.module("app");

app.controller("secondController", ['myCoolService', function($rootScope, myCoolService){
    console.log("Hi second controller")
}]);

服务

var app = angular.module("app");

app.service('myCoolService', function() {
});

我已确定我正确导入了它：

<script type="text/javascript" src="js/controllers/mainController.js"></script>
<script type="text/javascript" src="js/services/myCoolService.js"></script>
<script type="text/javascript" src="js/controllers/secondController.js"></script>

但是我得到一个未知的服务异常：

Unknown provider: $resourceProvider <- $resource <- myCoolService

有人可以帮我吗？

【问题讨论】：

myCoolService.js 中写的东西可能有问题
当你使用angular.module("app")（注意没有`[ ]' angular会检索模块，而不是创建一个新的）
你的服务里面的post code..issue应该在服务js文件中..可能你没有包含angular-resource.js文件
是的，我看到了。这就是我删除评论的原因^^

标签： angularjs

【解决方案1】：

应该是：

var app = angular.module("app");

app.controller("secondController", ['$rootScope', 'myCoolService', 
  function($rootScope, myCoolService){
    console.log("Hi second controller")
  }
]);

请看，AngularJS 注入器要么从数组中获取特定依赖项的名称，要么为它们使用工厂函数参数。实际上推荐第一种方法，因为它可以承受缩小并让 Angular 跳过解析函数的参数列表。

重点是，AngularJS 不会混合使用这些方法：如果指定了 deps 列表，则会使用它，并且参数给出的任何提示都将被忽略。这就是为什么您的原始代码实际上将 myCoolService 放入 $rootScope 变量（第一个依赖项分配给第一个参数），但只是不知道在哪里可以找到第二个。

【讨论】：

那么 myCoolService 是如何定义的？请将其声明添加到问题中。
对不起，我的错，我的服务出错了。谢谢。

【解决方案2】：

在您的第二个控制器中，您缺少依赖项。

var app = angular.module("app");

app.controller("secondController", ['$rootScope', 'myCoolService', function($rootScope, myCoolService){
    console.log("Hi second controller")
}]);

【讨论】：