javascript - Angular 相互依赖的服务 : Avoiding circular dependncy

Question

我有两个独立的 GUI，它们属于同一系统。一个在屏幕顶部 (navEditor) 和一个在侧面 (routeEditor)。

他们需要两个经常互相更新，并且互相调用对方的函数。

每个服务都拥有大部分系统功能。当我尝试从 A->B 和 B->A 调用函数时遇到问题。当然，它创建了循环依赖，因为我必须将它们彼此包含在一起才能获得访问权限。

我研究了几种解决方案，包括使用 $rootScope.$broadcast。然而，一个常见的建议(可在此处找到:angular JS - communicate between non-dependend services)提出了一种将两者连接在一起的“订阅者/发布者”方法。

这通过使用第三个服务并让其他服务将事件和处理程序附加到它来避免循环依赖。

我更进一步，让这个父服务为我的两个系统中的每一个返回一个带有占位符对象的对象:

//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 对象。

我想知道的是，这是否被认为是一种反模式，以及我是否更加命令式而不是声明式。

我对大型应用程序不是很有经验。我正在学习 Angular，所以我可以促使自己更多地思考架构。然而，我发现我缺乏远见导致我怀疑我是否以最好的方式做事。

如有任何建议，我们将不胜感激。

Answer 1

您应该将业务逻辑留给 Angular 应用程序的 Controller 。

让 NAV-EDITOR 和 ROUTE-EDITOR 位于不同的 Controller 中，并将它们的业务逻辑(函数调用)置于一个精简的 Controller 中。虽然 $trafficSys.sys 应该只是一个传递到您的 Controller 的单例，但依赖项将 $routeEditor、$trafficSys 和 $navEditor 注入(inject)您的 Controller ，如下所示:

 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
    }]);