Question

我的角度应用程序中有两个控制器和一个服务，分为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

有人可以帮助我吗？

Answer 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变量（第一个依赖项被分配给第一个参数），但只是不知道在哪里找到第二个参数。

Answer 2

在你的第二个控制器中你缺少依赖。

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

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

Angular在不同文件中具有控制器和服务

2 个答案: