Angular Dependent Services: Eliminating Circular Dependency

Question

I have two separate graphical interfaces that are part of the same system. One at the top of the screen (navEditor) and one on the side (routeEditor).

They need two updates each other often and call each other's functions.

Each has a service that contains most of these system functions. I ran into a problem when I tried to call functions from A-> B and B-> A. This, of course, created a circular dependency, because I had to include them in each other in order to gain access.

I reviewed several solutions, including using $ rootScope. $ broadcast. However, one general suggestion (found here: angular JS - communication between services without dependencies ) suggested a subscriber / publisher method that connected the two together.

This avoids cyclic dependency by using a third service and adding events and handlers of other services to it.

I took this step further and simply asked this parent service to return an object with a place holder object for each of my two systems:

//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)

Then I just used my services "navEditor" and "routeEditor", including $ trafficSys, and then applied all its functions to the navEditor or routeEditor objects.

What I would like to know is that it is considered an Anti-Pattern, and if I am more imperative, not declarative.

. angular, . , , , - .

.

Answer 1

- angular.

NAV-EDITOR ROUTE-EDITOR - ( ) . $trafficSys.sys , . $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
    }]);