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)
我的疑问/问题:
为什么"myApp.view1"模块可以访问"myApp"模块上定义的"author"值."myApp"依赖于"myApp.view1",但反之亦然.
更有趣的是,"myApp.view1"和"myApp.view2"是2个完全独立的模块.那为什么"myApp.view2"的访问view1_var,并serviceV1从"myApp.view1",甚至没有宣布它的任何依赖?
这是预期的设计/行为吗?那么我可以在一个模块中定义的其他内容是什么,但在任何其他模块中使用它而不管它们之间的依赖性如何?
有人可以解释一下吗?
经过一番研究并感谢@dewd 向我指出了这个问题的公认答案,我得出了以下结论,
所以,这是我的定理 [参见下图]
如果
- 存在 n 个模块,命名为 A1,A2,A3,...,A1 依赖于 A2,A2 依赖于 A3,依此类推...
- 另外,m 个模块命名为 B1、B2、B3,...Bm,使得 B1 依赖于 B2,B2 依赖于 B3,依此类推...
- 还存在一个顶级依赖模块,即“AB”,它依赖于模块“A1”和“B1”
- 然后,模块“An”将能够访问模块“Bm”上声明的任何服务
插图图像
实验与证明
请参阅此plunkr的演示。
这里我总共声明了7个模块,
现在,
b3service我在B3模块上定义了一个服务AB带有主体的引导模块b3service现在我可以从模块访问A3(请参阅控制台消息)但是,A3和B3没有直接联系或依赖。
这是我的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
| 归档时间: |
|
| 查看次数: |
214 次 |
| 最近记录: |