Связь между двумя модулями в AngularJs

Ответ 1

"Правильно"

Начну с описания аспекта масштабов приложения, чтобы обеспечить ясность в том, что реализовать для "правильного" достижения этого.

Во-первых, у вас есть приложение, которое выполняется на сервере, содержит ядро, которое инкапсулирует модули. Более низкий уровень, от которого вы переходите, может состоять из большего количества модулей или контроллеров. Я обращусь к обоим.

Предпосылки включают, но не ограничиваются:

• Реализация Angular областей событий для контроллеров (при необходимости)
• Внедрение Посредника шаблона в спецификации.
• Реализация SharedWorker с настраиваемыми событиями.
• Реализация Event-Hub на стороне сервера (при необходимости)

Если вам нужна коммуникационная сеть между вашими контроллерами, используйте стандартные утилиты Angular $scope и $rootScope .$broadcast, .$emit и .$on внутри вашего модуля (модулей) - вы, вероятно, уже думал об этом;)

Чтобы взаимодействовать между модулями, реализуйте шаблон посредника в своем ядре - возможно, это будет реализовано как Служба, которую может подключить каждый модуль; в противном случае ваши модули могут быть инициализированы и снабжены песочницей, в которую вводится медиатор/директор. Теперь ваши модули в вашем ядре приложения могут общаться.

Скажите, вам нужно это приложение/ядро ​​для связи с другим приложением. Внедрите SharedWorker с настраиваемыми событиями. Вы можете увидеть структуру, "worker.io" , которую я создал для UCLA здесь. Проект мог бы использовать некоторые прикосновения, поэтому не стесняйтесь использовать его в качестве ссылки для написания своего собственного - точка фокусировки на заключается в том, что он использует Pseudo Port-Entanglement. Это связано с тем, что работники разрешают только обработчик onmessage, поэтому вы хотите создать new MessageEvent; отправьте его как строку JSON на другой порт, а затем JSON.parse` сообщение, чтобы получить настраиваемое событие и отправить это событие на порт, который получил событие, - это дает вам настраиваемые события. Теперь любое приложение может использовать этот SharedWorker и взаимодействовать с другими приложениями через него - он даже позволяет использовать между вкладками браузера.

Если вам нужен более глобальный подход к архитектуре, управляемой событиями, скажем, чтобы дать модулю на сервере возможность реагировать на события (из любого места) - реализовать концентратор событий на вашем сервере. Это может быть скорее проект, чем вы хотели бы приступить, но существует замечательная книга, в которой описывается, как установить это: Testable JavaScript, Mark Ethan Trostler.

Тем не менее, вполне возможно элегантно реализовать высоко оптимизированную архитектуру для систем на основе событий с использованием посредников, SharedWorkers и EventHubs на внутреннем сервере.

Рамка worker.io, отмеченная выше, использует две библиотеки: Apis (Bee in latin) и Scriptorium (Hive in latin). Однако, чтобы увидеть, как реализовать библиотеки, см. Каталог js.

Надеюсь, что это поможет.

Ответ 2

Я просто хочу знать, как это сделать правильно.

"Правильно" довольно субъективно. "Правильно" - это то, что работает, легко понимается и поддерживается.

Тем не менее, почему бы просто не использовать $window для передачи значений между двумя отдельными работающими приложениями angular?

function persistFoo($scope, $window) {
   //watch window.foo
   $scope.$watch(function (){
      return $window.foo;
   }, function(v) {
      if($scope.foo !== v) {
         $scope.foo = v;
      }
   });

   //watch scope.foo
   $scope.$watch('foo', function(v) {
      if($window.foo !== v) {
         $window.foo = v;
      }
   });
}

//Module 1
app1.controller("MyCtrl1", function($scope, $window) {
  persistFoo($scope, $window);
});

//Module 2
app2.controller("MyCtrl2", function($scope, $window) {
  persistFoo($scope, $window);
});

localStorage также будет работать, если вам нужно сохранить данные для последующих посещений.

Ответ 3

Я наткнулся на подобную проблему. Вот плункер, который показывает, как решить такую ​​проблему: http://plnkr.co/edit/uk7ODSbgXfzqw0z6x4EH?p=preview

var app1 = angular.module('App1', []);

app1.controller('App1Controller', function($scope) {

    // use this function to send a value to app2
    var sendText = function(newText) {
        angular.element(document.getElementById('app2')).scope().setText(newText);
    };

    $scope.$watch('text', function(newText) {
        sendText(newText);
    });

    // initial value
    $scope.text = "Some text";
});

/*

 The code above and below do not share any module, service, etc.

*/


var app2 = angular.module('App2', []);
app2.controller('App2Controller', function($scope) {

    // this function will be called from app1 when text changes
    $scope.setText = function(newText){
        $scope.$apply(function() {
            $scope.text = newText;
        });
    };

});