Угловые взаимозависимые услуги: предотвращение круговой зависимости

Question

У меня есть два отдельных графических интерфейса, которые являются частью одной системы. Один вверху экрана (navEditor) и один сбоку (routeEditor).

Они должны часто обновлять друг друга и вызывать функции друг друга.

У каждого есть сервис, который содержит большинство функций этой системы. Я столкнулся с проблемой, когда попытался вызвать функции из A->B и B->A. Это, конечно, создало круговую зависимость, потому что мне приходилось включать их друг в друга, чтобы получить доступ.

Я рассмотрел несколько решений, включая использование $ rootScope. $ Broadcast. Тем не менее, одно общее предложение (найденное здесь: angular JS - связь между независимыми службами) предложило метод "подписчик / издатель", который связал их вместе.

Это позволяет избежать циклической зависимости, используя третий сервис, а другие сервисы присоединяют к нему события и обработчики.

Я сделал еще один шаг вперед и просто заставил этот родительский сервис возвращать объект с объектом-заполнителем для каждой из моих двух систем:

//BRIDGE SERVICE
myApp.service('$trafficSys', function(){
     this.sys = {
         navEditor: {}, //poulated by $routeEditor service
         routeEditor: {} ////poulated by $navEditor service
    }
});

//ROUTE-EDITOR
myApp.service('$routeEditor', ['$trafficSys',function($trafficSys) {
    var routeSystem = {
           //entire route editor system goes in here
        }
    $trafficSys.sys.routeEditor = routeSystem;
}]);

//NAV-EDITOR (Same Process as Route Editor)

Затем я просто включил в мои службы navEditor и routeEditor $ trafficSys, а затем применил все их функции к объектам navEditor или routeEditor.

Что я хотел бы знать, так это то, считается ли это анти-паттерном, и я скорее императив, чем декларатив.

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

Любой совет будет принят во внимание.

Answer 1

Вы должны оставить бизнес-логику контроллеру вашего углового приложения.

Пусть NAV-EDITOR и ROUTE-EDITOR будут находиться в отдельных контроллерах, а их бизнес-логика (вызов функций) должна быть встроена в тонкий контроллер. В то время как $trafficSys.sys должен быть просто синглтоном, который передается в ваш контроллер, Dependency вводит $routeEditor, $trafficSys и $navEditor в ваш контроллер следующим образом:

 myApp.controller('RouteController', ['$scope', '$routeEditor', '$trafficSys' function($scope, $routeEditor) {
      // var trafficSys = $trafficSys.sys 
      //you could even put it on $scope if you need to databind -  $scope.trafficSys = $trafficSys.sys
      //$routeEditor business logic goes here using 
    }]);

myApp.controller('NavController', ['$scope', '$navEditor', '$trafficSys' function($scope, $navEditor) {
      // var trafficSys = $trafficSys.sys 
      //you could even put it on $scope if you need to databind -  $scope.trafficSys = $trafficSys.sys
      //$navEditor business logic goes here
    }]);