Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 在复杂的角度应用程序中大量使用事件保持控制器同步的利弊_Angularjs_Events_Angular Ui Router - Fatal编程技术网

Angularjs 在复杂的角度应用程序中大量使用事件保持控制器同步的利弊

Angularjs 在复杂的角度应用程序中大量使用事件保持控制器同步的利弊,angularjs,events,angular-ui-router,Angularjs,Events,Angular Ui Router,有人能给我一些建议,告诉我大量使用事件来保持Angular应用程序的不同部分彼此同步的利弊吗 我正在考虑使用一系列事件和事件监听器将一个SPA与Angular提供的多个并发和嵌套视图连接起来。SPA的布局可以类似于gmail,屏幕上有逻辑上独立的区域(左侧区域有邮件文件夹列表、顶部导航栏、主详细信息视图等) 我一直在寻找使所有控制器与所有需要同时访问的模型保持同步的方法。当模型由俯视图更新时,如果该模型的某些部分显示在主视图中,我希望主视图注意到更改,并相应地更新其视图 我使用服务在控制器之间共

有人能给我一些建议,告诉我大量使用事件来保持Angular应用程序的不同部分彼此同步的利弊吗

我正在考虑使用一系列事件和事件监听器将一个SPA与Angular提供的多个并发和嵌套视图连接起来。SPA的布局可以类似于gmail,屏幕上有逻辑上独立的区域(左侧区域有邮件文件夹列表、顶部导航栏、主详细信息视图等)

我一直在寻找使所有控制器与所有需要同时访问的模型保持同步的方法。当模型由俯视图更新时,如果该模型的某些部分显示在主视图中,我希望主视图注意到更改,并相应地更新其视图

我使用服务在控制器之间共享模型,这被认为是最佳实践,但正如深入讨论的那样,这种方法存在一些问题

一个可能的解决方案是使用Angular的
$broadcast
$on('event,fn())
让控制器注意到他们关心的服务何时更新了数据

问题:

  • 使用事件传递数据而不是使用服务(紧密耦合,忽略任何权威数据源)。我知道可以通过事件传递对象,但不必这样

  • 性能(事件在$scope层次结构中冒泡,等等)

    $broadcast
    /
    $emit
    的性能和紧耦合问题在这里和其他地方都有大量涉及,我正在考虑使用SO答案中的解决方案来解决控制器损坏时不清理侦听器导致的性能/内存泄漏问题

  • 维护(意大利面代码/忽略OO,只是在事件中传递整个应用程序的模型)。 这是我向社区提出的主要问题:根据下面的(丑陋的)图表,我想象每个angular
    .service
    在获得更新的模型数据时触发一个事件,任何关心该数据的控制器都只需监听事件的触发:

  • 实际上,编写代码很简单(现在就可以了),但我担心5年后的头痛问题,那就是试图跟踪所有事件关系

    有没有人有过这样的设计经验,谁能给我一些关于更聪明/更简洁的设计的建议


    提前谢谢,对于粗制滥造的图表我很抱歉。。。希望它能跨越这一点。

    通过使用angularjs掌握web应用程序

    在整个AngularJS框架中,只有三个事件正在进行 发出($includeContentRequested,$includeContentLoaded), $viewContentLoaded),以及正在广播的七个事件 ($locationChangeStart、$locationChangeSuccess、$routeUpdate、, $routeChangeStart、$routeChangeSuccess、$routeChangeError、$destroy)。 正如您所看到的,范围事件的使用非常少,我们应该 在开始之前评估其他选项(主要是双向数据绑定) 发送自定义事件

    专业人士

    • 这让angular更像淘汰赛/杜兰达尔
    犯人

    • 这让angular更像淘汰赛/杜兰达尔
    我已经回答了您链接的一个问题:这样可能会对您有所帮助

    这也可能回答你评论中的问题

    我的建议是不要放弃OO。但是接受它,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()">