Menu
See this plunker code (Notice console.log messages) to understand what I am trying to say/ask.
I have defined 3 modules, namely, myApp, myApp.view1, myApp.view2. Only myApp module has dependency declared on the other 2.
myApp Module
angular.module('myApp', ['ngRoute','myApp.view1','myApp.view2'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}])
.value('author', 'Suman Barick')
myApp.view1 Module
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');
})
myApp.view2 Module
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('*******************************************');
}]);
My Doubts / Questions:
Why can "myApp.view1" module access the "author" value defined on "myApp" module. "myApp" has a dependency on "myApp.view1", but not vice versa.
More interestingly, "myApp.view1" and "myApp.view2" are 2 entirely separate module. Then how come "myApp.view2" is accessing the view1_var and serviceV1 from "myApp.view1" without even declaring any dependency on it?
Is this the intended design / behavior ? Then what are other things that I can define in one module but use it in any other module irrespective of their dependency among themselves?
Can someone please explain?
268
After researching a bit and thanks to @dewd for pointing me to the accepted answer of this question, I came to the following conclusion,
So, here goes My Theorem [See Illustration image below]
If
- There exists n modules naming A1, A2, A3, ..., An such that A1 depends on A2, A2 depends on A3 and so on...
- Also, m modules naming B1, B2, B3, .... Bm such that B1 depends on B2, B2 depends on B3 and so on...
- Also there exists, a top(est) level dependent module, say 'AB', which is dependent on both module 'A1' and 'B1'
- Then, module 'An' will be able to access any service declared on module 'Bm'
Illustration Image
The Experiment and Proof
See this plunkr for demo.
Here I have declared total 7 modules,
Now,
b3service on B3 moduleAB module with bodyb3service from the module A3 (See console message)But, A3 and B3 has no direct connection or dependency.
Here is my HTML
<body id="body" ng-app="AB">
<h1>Hello Plunker!</h1>
<script src="app.js"></script>
</body>
And here is my 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());
});
My Conclusion
I think the magic is in Nested Modules. That's why in the code shown in the question view1 module and view2 module could access each other. Because views are already nested inside body with which the parent of all modules, myApp was bootstrapped.
Confusing Fact...
And my head is still spinning... :P
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With