Подтвердить что ты не робот

Какой смысл объявлять зависимость модуля 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", даже не заявляя о какой-либо зависимости от него?

  • Является ли это предполагаемым дизайном/поведением? Тогда какие другие вещи я могу определить в одном модуле, но использовать его в любом другом модуле независимо от их зависимости между собой?

Может кто-нибудь объяснит?

4b9b3361

Ответ 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('*******************************************');
}]);