我已经使用 AngularJS
实现了一个单页应用程序。该页面由中间的内容区域和围绕中心组装的部分组成,这些部分显示附加信息并提供操作中心的方法。
每个部分(称为 Side Info
)和内容区域都有一个单独的 AngularJS Controller 分配给它们。目前,我通过 $rootScope.$broadcast
和 $scope.$on()
进行通信,例如
app.controller('PropertiesController', function ($scope, $rootScope) {
$scope.$on('somethingHappened', function(event, data){
// react
});
});
然后我调用与其他 Controller 通信:
$rootScope.$broadcast('somethingHappened', data);
我在 Controller 之间进行了很多通信。特别是如果内容区域发生某些事情,则必须采用多个辅助信息元素。另一种方式也很常见:用户提交表单(位于辅助信息中),内容区域和其他辅助信息元素必须采用。
我的问题:
有没有更好的方法来处理具有繁重 Controller 通信的 SPA
?
代码工作正常,但它已经变得有点困惑(例如,很难找到在何处处理哪些事件等)。由于该应用程序在接下来的几周内可能会增长很多,因此我想尽快进行这些更改(如果有更好的解决方案)。
最佳答案
这真的很有趣。 Pub/Sub 应该是这里的正确解决方案。
您可以通过使用 Angular 服务作为您的 MVC 模型,为您的项目添加额外的订单,并为每次更改更新此模型。这里的问题是你应该在你的服务中实现一个可观察的模式并注册到他们,以便实时同步。所以 - 我们回到 Pub/Sub(或您可以考虑的其他 Observable 解决方案......)。
但是,项目将以这种方式组织得更好。
例如 - SideInfo1Service 将是一个服务/模型。每个属性更改都会触发可观察到的更改,这将更改所有监听器:
myApp.factory('SideInfo1Service', function($scope){
var _prop1;
return {
setProp1: function(value){
$scope.$broadcast('prop1Changed', value);
_prop1 = value;
},
getProp1: function(){
return _prop1;
}
}
});
您可以找到那些关于使用 Angular 服务作为您的 MVC 模型的非常有趣的博客文章:
http://toddmotto.com/rethinking-angular-js-controllers/
http://jonathancreamer.com/the-state-of-angularjs-controllers/
并且,这篇文章是关于 Angularjs 中的可观察模式:
https://stackoverflow.com/a/25613550/916450
希望这会有所帮助(:
关于javascript - AngularJS 中的重型 Controller 通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28347728/