Question

我的项目对于单片控制器/服务文件来说太大了，所以我开始将它们分解成更小的组件，然后使用模块/依赖注入系统来保持一切正常。

我在理解Angular对依赖关系的确切方面有点麻烦，因为即使我没有声明依赖关系，我也会发现在模块中工作的东西。这是一个简单的例子：

＆＃13;

// a simpler app that uses 2 controllers
angular.module("myApp", ["controller", "controller2"]);

// controller has a dependency on 
// module1 to access the constant

angular.module("controller", ["module1"])
.controller("newController", ["$scope", "mod1Constant", function ($scope, mod1Constant) {
	$scope.myText1 = mod1Constant; 
}]);

// controller2 doesn't declare a dependency 
// on module1 but can still access the constant

angular.module("controller2", [])
.controller("newController2", ["$scope", "mod1Constant", function ($scope, mod1Constant) {
	$scope.myText2 = mod1Constant; 
}]);


angular.module("module1", [])
.constant("mod1Constant", "module 1 constant");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="newController">
  {{myText1}}
</div>
<div ng-controller="newController2">
  {{myText2}}
</div>


</div>

＆＃13;

我的问题基本上是：为什么controller2有效？

module1注入controller2，但似乎控制器无法访问命名空间。

似乎通过将模块注入任何可以在任何地方访问它的模块，这让我想知道模块的重点是什么。依赖注入更像是将所有依赖项转储到共享存储桶而不是构建依赖关系树吗？还是我错过了一些真正基本的东西？

Answer 1

你是对的。在Angular中，一旦将模块注入父模块，其所有服务都可在该父模块中的任何位置使用。我同意这不是一个非常模块化的行为，而且是Angular 1的痛点之一。

在Angular 2（目前处于测试阶段），这有所改善，您必须为每个Component指定哪些服务injected。

Answer 2

我刚添加了一些代码，这将有助于您更好地理解!!!

在将父模块注入主模块之前，配置阶段可以使用常量，这也适用于父模块。

控制器将在配置阶段后实例化，因此父控制器可以使用常量。

生命周期： 子模块常量----＆gt;父模块常量-------------＆gt;父模块常量 -----＆GT;父模块3常量-----＆gt;父模块1控制器------＆gt;父模块2控制器--------＆gt;父模块3控制器--------＆gt;子模块控制器

常量在控制器之前创建，因此您可以在父控制器中使用它们

来自控制台：

myApp常量

module1常量

控制器：模块1常量

controller2：模块1常量

controller3：myApp模块常量

myAppController：myApp模块常量

＆＃13;

// a simpler app that uses 3 controllers
angular.module("myApp", ["controller", "controller2","controller3"]);


angular.module("myApp").constant('myAppConstant',{'name':'myApp module constant','log':console.log('myApp constant')});

angular.module('myApp').controller('myAppController',['$scope','myAppConstant',function($scope,myAppConstant){
  console.log('myAppController:'+myAppConstant.name);
  $scope.myText = myAppConstant.name; 
}]);



// controller has a dependency on 
// module1 to access the constant

angular.module("controller", ["module1"])
.controller("newController", ["$scope", "mod1Constant", function ($scope, mod1Constant) {
  console.log('controller:'+mod1Constant.name);
	$scope.myText1 = mod1Constant.name; 
}]);

// controller2 doesn't declare a dependency 
// on module1 but can still access the constant

angular.module("controller2", [])
.controller("newController2", ["$scope", "mod1Constant", function ($scope, mod1Constant) {
  console.log('controller2:'+mod1Constant.name);
	$scope.myText2 = mod1Constant.name; 
}]);



angular.module("controller3", [])
.controller("newController3", ["$scope","myAppConstant", function ($scope,myAppConstant) {
  console.log('controller3:'+myAppConstant.name);
	$scope.myText3 = myAppConstant.name; 
}]);




angular.module("module1", [])
.constant("mod1Constant", {'name':"module 1 constant",'log':console.log('module1 constant')});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="newController">
  {{myText1}}
</div>
<div ng-controller="newController2">
  {{myText2}}
</div>

 <div ng-controller="newController3">
  {{myText3}}
</div>

  <div ng-controller="myAppController">
  {{myText}}
</div>

</div>

＆＃13;

关于AngularJS依赖关系的困惑

2 个答案: