Angularjs 在复杂的角度应用程序中大量使用事件保持控制器同步的利弊
有人能给我一些建议,告诉我大量使用事件来保持Angular应用程序的不同部分彼此同步的利弊吗 我正在考虑使用一系列事件和事件监听器将一个SPA与Angular提供的多个并发和嵌套视图连接起来。SPA的布局可以类似于gmail,屏幕上有逻辑上独立的区域(左侧区域有邮件文件夹列表、顶部导航栏、主详细信息视图等) 我一直在寻找使所有控制器与所有需要同时访问的模型保持同步的方法。当模型由俯视图更新时,如果该模型的某些部分显示在主视图中,我希望主视图注意到更改,并相应地更新其视图 我使用服务在控制器之间共享模型,这被认为是最佳实践,但正如深入讨论的那样,这种方法存在一些问题 一个可能的解决方案是使用Angular的Angularjs 在复杂的角度应用程序中大量使用事件保持控制器同步的利弊,angularjs,events,angular-ui-router,Angularjs,Events,Angular Ui Router,有人能给我一些建议,告诉我大量使用事件来保持Angular应用程序的不同部分彼此同步的利弊吗 我正在考虑使用一系列事件和事件监听器将一个SPA与Angular提供的多个并发和嵌套视图连接起来。SPA的布局可以类似于gmail,屏幕上有逻辑上独立的区域(左侧区域有邮件文件夹列表、顶部导航栏、主详细信息视图等) 我一直在寻找使所有控制器与所有需要同时访问的模型保持同步的方法。当模型由俯视图更新时,如果该模型的某些部分显示在主视图中,我希望主视图注意到更改,并相应地更新其视图 我使用服务在控制器之间共
$broadcast
和$on('event,fn())
让控制器注意到他们关心的服务何时更新了数据
问题:
$broadcast
/$emit
的性能和紧耦合问题在这里和其他地方都有大量涉及,我正在考虑使用SO答案中的解决方案来解决控制器损坏时不清理侦听器导致的性能/内存泄漏问题
.service
在获得更新的模型数据时触发一个事件,任何关心该数据的控制器都只需监听事件的触发:
提前谢谢,对于粗制滥造的图表我很抱歉。。。希望它能跨越这一点。通过使用angularjs掌握web应用程序 在整个AngularJS框架中,只有三个事件正在进行 发出($includeContentRequested,$includeContentLoaded), $viewContentLoaded),以及正在广播的七个事件 ($locationChangeStart、$locationChangeSuccess、$routeUpdate、, $routeChangeStart、$routeChangeSuccess、$routeChangeError、$destroy)。 正如您所看到的,范围事件的使用非常少,我们应该 在开始之前评估其他选项(主要是双向数据绑定) 发送自定义事件 专业人士
- 这让angular更像淘汰赛/杜兰达尔
- 这让angular更像淘汰赛/杜兰达尔
User
对象,您将永远不会遇到问题,因为密码始终可以通过用户引用。所有与User.password
的绑定都可以工作
所以只有一个数据源。保留那个参考资料。您的双向绑定将修改该数据。你不必担心它会在事件中传播到你的应用程序中。因为这太长了,无法将其放入评论回复中,我将其作为一个答案发布: 如果您想验证用户输入并在服务中保存状态(或其共享部分或域模型),我会将表单的viewmodel仅放在控制器中,并调用服务方法来更新模型。此方法将返回验证错误数组:
$scope.errors = myModel.update($scope.formFields);
或者,在这种情况下,用户必须单击按钮以提交表单:
$scope.$watch('formFields', function (values) {
$scope.errors = myModel.validate(values);
});
$scope.submit = function () {
$scope.errors = myModel.update($scope.formFields);
if ($scope.errors.length < 0) {
$scope.formFields = {};
$scope.showForm = false;
}
};
在控制器中:
$scope.myList = myListModelService;
在意见中:
<li ng-repeat="item in myList.getItems()">
当然,这允许开发人员直接修改返回的对象/数组($scope.myList.getItems().push(newItem);
)。在这里,您必须决定,要么声明一个约定:“永远不要直接更新模型对象;永远不要使用模型服务的API”,要么炸毁用户内存,让模型服务提供数据对象的(深层)克隆。在后一种情况下,您还必须制定一个约定:“模型服务获取者必须提供克隆。”但是,可能模型是由其他开发人员开发的,那么控制器或视图以及其他组件可以更容易地通过单元测试来覆盖这一点-如果有一个约定要测试,如果模型服务获取者提供克隆:)
这种方法的优点是,您可以在角度表达式和$watch语句中使用getter函数,而不必处理事件。这验证了我对自定义事件的关注。这是我感兴趣的其他选择,以获得一些观点。有没有办法在多个控制器和一个服务之间实现双向数据绑定(n-way data binding?)?是的,您可以将服务对象拉入控制器范围,如这里所述:这里也有这样的描述:@stofl关于直接绑定,我不喜欢的是,在允许更新服务持有的模型之前,我经常需要验证用户输入的数据。我也喜欢歌剧
<li ng-repeat="item in myList.getItems()">