AngularJS 模块依赖项 - 澄清？答案

【问题标题】：AngularJS module dependencies - clarification?AngularJS 模块依赖项 - 澄清？
【发布时间】：2014-02-22 14:51:46
【问题描述】：

我一直在研究 AngularJs 网站 (this one) 上的教程示例

（main html is pretty empty（ng-view 和 ng-app=phonecatApp 除外））

app.js 文件包括：

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',...

好的，所以我们有 phonecatApp 具有许多依赖项的模块。

但后来我看到了controller.js 文件（他们为控制器打开了一个新模块）

/*1*/   var phonecatControllers = angular.module('phonecatControllers', []);
/*2*/   
/*3*/   phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
/*4*/     function($scope, $routeParams, Phone) {
/*5*/       ...
/*6*/       });
/*7*/   
/*8*/     }]);

Phone 是一项服务。（在 另一个 模块上，不同的 js 文件）

问题

在第 3 行，它如何知道Phone 参数是什么？他们没有在第 1 行添加任何依赖模块！
$routeParams 也一样，它是怎么知道的？他们没有将第 1 行中的任何依赖项添加到 ngRoute！

我在这里遗漏了什么吗？

【问题讨论】：

Phone 的声明是什么样的？该服务是否注册到phoncatControllers 模块？如果不是，那看起来确实很奇怪。
@DavinTryon angular.github.io/angular-phonecat/step-11/app/js/services.js
好的，我认为这个例子中的假设是phonecatControllers 将始终注册为phonecatServices 的依赖项。在创建独立模块以供重用时，这不是一个很好的假设。因为，应用程序中只有一个 $injector，所以这是可行的，但我不会说这是拆分模块的好方法。
@DavinTryon 所以，如果它是主模块中的依赖项，我可以使用每个模块参数吗？
我认为 Angular 应用程序有一个single $injector service，这意味着所有依赖模块都将它们的依赖项放在同一个注入器中。这意味着如果 A 依赖于 B 和 C，那么一旦 A 强制加载所有组件，B 就可以使用相同的注入器服务使用 C 中的组件。

标签： javascript angularjs

【解决方案1】：

Pawel Kozlowski'book 的引用似乎是相关的：

在应用程序模块之一中定义的服务对所有其他模块。换句话说，模块的层次结构不影响服务对其他模块的可见性。当 AngularJS 引导一个应用程序，它结合了所有定义的服务将所有模块整合到一个应用程序中，即全局命名空间。

【讨论】：

这是否意味着必须在至少一个模块中定义服务/工厂等，才能在子模块级别对所有其他模块和组件可见？
@malte 抱歉，我不确定我是否理解正确，如何不在模块中定义？
哦，是的，我的错。 已定义，而不是包含，例如包括 d3 只是在控制器中，不在模块中：angular.module("widgets.D3Widget", ['underscore']) .controller("widgets.D3Widget.D3WidgetCtrl", [ "$scope", "d3", function( $scope, d3 ) { console.log(d3.select('body')); //work goes here } ]); 所以我还是不明白 Angular 的依赖技术...

【解决方案2】：

默认情况下，依赖注入适用于 Angular 的每个组件。

这是因为每个组件都定义在 angular 对象内，所以它可以跟踪所有组件。

您可以查看此http://docs.angularjs.org/guide/di 以了解其工作原理。

【讨论】：

所以如果我在主 ng-app 添加模块依赖项，它允许我在任何地方注入它而不编写依赖项？
是的，你只需要在你的模块中定义组件（控制器、服务、常量...），加载模块并在你想要的地方注入你想要的东西
如果是这样为什么here他们在主模块下的app.js文件中没有添加ngResource（angular.github.io/angular-phonecat/step-11/app/js/app.js）？
也是Phone不是phonecatControllers的成员，它是phonecatServices的成员
我认为是因为作者想要遵循模块设计模式。每一段代码都是一个独立的模块，有自己的依赖关系。但是，在我见过（和制作）的应用程序中，所有依赖项都加载到 main.js 文件中