如果一个模块无论如何都可以从另一个模块访问值和服务,那么声明角度模块依赖性的重点是什么

Sum*_*ick 13 javascript dependency-injection angularjs

请参阅此plunker代码(通知console.log消息)以了解我想说/要求的内容.

我已经定义3个模块,即myApp,myApp.view1,myApp.view2.只有myApp模块在另一个上声明了依赖关系2.

myApp模块

angular.module('myApp', ['ngRoute','myApp.view1','myApp.view2'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({redirectTo: '/view1'});
 }])

.value('author', 'Suman Barick')
Run Code Online (Sandbox Code Playgroud)

myApp.view1模块

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    template: 'Welcome to view ONE',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['author', function(author) {
    console.log('*******************************************');
    console.log('I am on view1 module');
    console.log('Printing author value from myApp module ' + author);
    console.log('*******************************************');
}])

.value('view1_var', 'Hi, I am defined as value in myApp.view1 module')

.service('serviceV1', function(){
    this.getData = function(){return 'abcdef';}
    console.log('This is a service from myApp.view1 module');
})
Run Code Online (Sandbox Code Playgroud)

myApp.view2模块

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    template: 'Welcome to view TWO',
    controller: 'View2Ctrl'
  });
}])

.controller('View2Ctrl', ['view1_var','serviceV1', function(view1_var, serviceV1) {
    console.log('*******************************************');
    console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module');
    console.log(view1_var);
    console.log(serviceV1.getData());
    console.log('*******************************************');
}]);
Run Code Online (Sandbox Code Playgroud)

我的疑问/问题:

  1. 为什么"myApp.view1"模块可以访问"myApp"模块上定义的"author"值."myApp"依赖于"myApp.view1",但反之亦然.

  2. 更有趣的是,"myApp.view1"和"myApp.view2"是2个完全独立的模块.那为什么"myApp.view2"的访问view1_var,并serviceV1从"myApp.view1",甚至没有宣布它的任何依赖?

  3. 这是预期的设计/行为吗?那么我可以在一个模块中定义的其他内容是什么,但在任何其他模块中使用它而不管它们之间的依赖性如何?

有人可以解释一下吗?

Sum*_*ick 3

经过一番研究并感谢@dewd 向我指出了这个问题的公认答案,我得出了以下结论

所以,这是我的定理 [参见下图]

如果

  1. 存在 n 个模块,命名为 A1,A2,A3,...,A1 依赖于 A2,A2 依赖于 A3,依此类推...
  2. 另外,m 个模块命名为 B1、B2、B3,...Bm,使得 B1 依赖于 B2,B2 依赖于 B3,依此类推...
  3. 还存在一个顶级依赖模块,即“AB”,它依赖于模块“A1”和“B1”
  4. 然后,模块“An”将能够访问模块“Bm”上声明的任何服务

插图图像

在此输入图像描述

实验与证明

请参阅此plunkr的演示。

这里我总共声明了7个模块,

  1. 模块 A1、A2、A3,其中 A1 依赖于 A2,A2 依赖于 A3
  2. 模块 B1、B2、B3,其中 B1 依赖于 B2,B2 依赖于 B3
  3. 模块“AB”依赖于“A1”和“B1”

现在,

  1. b3service我在B3模块上定义了一个服务
  2. 我有AB带有主体的引导模块
  3. b3service现在我可以从模块访问A3(请参阅控制台消息)

但是,A3B3没有直接联系或依赖。

这是我的HTML

  <body id="body" ng-app="AB">
    <h1>Hello Plunker!</h1>

    <script src="app.js"></script>
  </body>
 
Run Code Online (Sandbox Code Playgroud)

这是我的JS

angular.module('AB', ['A1', 'B1']);

angular.module('A1', ['A2']);
angular.module('A2', ['A3']);
var a3 = angular.module('A3', []);

angular.module('B1', ['B2']);
angular.module('B2', ['B3']);
var b3 = angular.module('B3', []);
  
  
b3.service('b3service', function(){
  this.getSecretMessage = function(){
    return 'Cows are Flying...';
  };
})
  
a3.run(function(b3service){
  console.log(b3service.getSecretMessage());
});
Run Code Online (Sandbox Code Playgroud)

我的结论

我认为神奇之处在于嵌套模块view1这就是为什么在问题模块和模块中显示的代码中view2可以相互访问的原因。因为视图已经嵌套在其中body,所有模块的父模块都myApp被引导。

令人困惑的事实...

我的头还在旋转......:P