Какой смысл объявлять зависимость модуля angular, если один модуль может в любом случае получить доступ к значениям и службам из другого модуля
Смотрите этот код плунжера (Обратите внимание на сообщения 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')
модуль 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');
})
модуль 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('*******************************************');
}]);
Мои сомнения/вопросы:
-
Почему модуль "myApp.view1" может получить доступ к значению "автор", определенному в модуле "myApp". "myApp" имеет зависимость от "myApp.view1", но не наоборот.
-
Более интересно, "myApp.view1" и "myApp.view2" - это 2 полностью отдельный модуль. Затем, как получилось, что "myApp.view2" обращается к view1_var и serviceV1 из "myApp.view1", даже не заявляя о какой-либо зависимости от него?
-
Является ли это предполагаемым дизайном/поведением? Тогда какие другие вещи я могу определить в одном модуле, но использовать его в любом другом модуле независимо от их зависимости между собой?
Может кто-нибудь объяснит?
Ответы
Ответ 1
После небольшого исследования и благодаря @dewd за то, что он указал мне на принятый ответ на этот вопрос, я пришел к следующему выводу:
Итак, здесь идет Моя теорема [Иллюстрация ниже]
Если
- Существует n модулей, обозначающих A1, A2, A3,..., An такие, что A1 зависит от A2, A2 зависит от A3 и т.д....
- Кроме того, m модулей, называющих B1, B2, B3,.... Bm такими, что B1 зависит от B2, B2 зависит от B3 и т.д.
- Также существует модуль, зависящий от верхнего уровня (est), например, "AB", который зависит от обоих модулей "A1" и "B1"
- Затем модуль 'An' сможет получить доступ к любому сервис, объявленный в модуле "Bm"
Иллюстрация
![введите описание изображения здесь]()
Эксперимент и доказательство
Смотрите plunkr для демонстрации.
Здесь я объявил всего 7 модулей,
- модули A1, A2, A3, где A1 зависит от A2 и A2 зависит от A3
- модули B1, B2, B3, где B1 зависит от B2 и B2 зависит от B3
- модуль "AB", который зависит как от "A1", так и "B1"
Теперь,
- Я определил сервис
b3service on B3 module
- Я загрузил модуль
AB с телом
- Теперь я могу получить доступ к
b3service из модуля A3 (см. сообщение консоли)
Но A3 и B3 не имеют прямого соединения или зависимости.
Вот мой HTML
<body id="body" ng-app="AB">
<h1>Hello Plunker!</h1>
<script src="app.js"></script>
</body>
И вот мой 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());
});
Мое заключение
Я думаю, что магия находится в вложенных модулях. Поэтому в коде, указанном в модуле вопросов view1 и модуле view2, можно было получить доступ друг к другу. Поскольку представления уже вложены внутри body, с которым была загружена родительская часть всех модулей, myApp.
Запугивающий факт...
И моя голова все еще вращается...: P
Ответ 2
В ваших контроллерах вы объявляете зависимости, если вы добавляете автора, view1_var и serviceV1 для обоих контроллеров, то оба контроллера могут их видеть.
Представление view1_var в обоих показывает, что view1_var действительно является "значением" как глобальным. Что касается того, почему это так, я понятия не имею. Однако вторая декларация значения, скорее всего, сжимает первый.
'use strict';
var myApp = angular.module('myApp', ['ngRoute', 'myApp.view1', 'myApp.view2']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
myApp.value('author', 'Suman Barick');
var myApp1 = angular.module('myApp.view1', ['ngRoute']);
var myApp2 = angular.module('myApp.view2', ['ngRoute']);
myApp1.value('view1_var', 'Hi, view 1');
myApp2.value('view1_var', 'Hi, VIEW 2');
myApp1.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
template: 'Welcome to view ONE',
controller: 'View1Ctrl'
});
}]);
myApp2.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view2', {
template: 'Welcome to view TWO',
controller: 'View2Ctrl'
});
}]);
myApp1.service('serviceV1', function(){
this.getData = function(){return 'abcdef';}
console.log('This is a service from myApp.view1 module');
});
myApp1.controller('View1Ctrl', ['author','view1_var','serviceV1', function(author, view1_var, serviceV1) {
console.log('*******************************************');
console.log('I am on view1 module');
console.log('Printing author value from myApp module ' + author);
console.log(view1_var);
console.log(serviceV1.getData());
console.log('*******************************************');
}]);
myApp2.controller('View2Ctrl', ['author', 'view1_var','serviceV1', function(author, view1_var, serviceV1) {
console.log('*******************************************');
console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module');
console.log('Printing author value from myApp module ' + author);
console.log(view1_var);
console.log(serviceV1.getData());
console.log('*******************************************');
}]);
