Giao tiếp bộ điều khiển nặng trong AngularJS

Question

Tôi đã triển khai một ứng dụng đơn lẻ với AngularJS. Trang bao gồm một khu vực nội dung ở giữa và các phần được lắp ráp xung quanh trung tâm hiển thị thông tin bổ sung và cung cấp phương tiện để thao túng trung tâm.

Mỗi phần (gọi tắt là Side Info) và khu vực nội dung có một bộ điều khiển riêng biệt AngularJS giao cho họ. Hiện tại, tôi liên lạc qua số $rootScope.$broadcast và $scope.$on(), ví dụ:

app.controller('PropertiesController', function ($scope, $rootScope) { 

    $scope.$on('somethingHappened', function(event, data){ 
     // react 
    }); 

}); 

sau đó tôi gọi để giao tiếp với các bộ điều khiển khác:

$rootScope.$broadcast('somethingHappened', data); 

Tôi có khá nhiều thông tin liên lạc xảy ra giữa Controllers. Đặc biệt là nếu có điều gì đó đang diễn ra trong khu vực nội dung, một số yếu tố thông tin phụ phải áp dụng. Cách khác xung quanh cũng thường xuyên: người dùng gửi biểu mẫu (nằm trong thông tin phụ) và khu vực nội dung cũng như các yếu tố thông tin phụ khác phải áp dụng.

Câu hỏi của tôi: Có cách nào tốt hơn để xử lý SPA với giao tiếp bộ điều khiển nặng không?

Mã hoạt động tốt nhưng đã trở nên lộn xộn một chút (ví dụ: khó có thể tìm thấy sự kiện nào được xử lý ở đâu, v.v.). Kể từ khi ứng dụng có khả năng phát triển rất nhiều trong những tuần tới, tôi muốn thực hiện những thay đổi đó (nếu có bất kỳ giải pháp nào tốt hơn) càng sớm càng tốt.

Answer 1

Bạn có thể sử dụng

$rootScope.$emit('some:event') ; 

vì nó đi lên trên và rootscope ist cấp cao nhất

sử dụng

var myListener = $rootScope.$on('some:event', function (event, data) { }); 
$scope.$on('$destroy', myListener); 

để bắt sự kiện

Sau đó, bạn có một thông tin liên lạc trên cùng cấp độ rootscope mà không bị bong bóng

Đây là tôi thực hiện dịch vụ eventbus

http://jsfiddle.net/navqtaoj/2/

Sửa: bạn có thể sử dụng một không gian tên như số: sự kiện vào nhóm và tổ chức tên sự kiện của bạn tốt hơn và thêm đầu ra log khi sự kiện là bắn và khi sự kiện được bắt để bạn dễ dàng có thể tìm ra nếu cháy hoặc bắt nhầm tên sự kiện.

Answer 2

Bạn có nhiều lựa chọn để tránh chương trình phát sóng cuộc gọi:

1. Chia sẻ dữ liệu giữa các bộ điều khiển sử dụng các dịch vụ như nó đã được đề cập trong các ý kiến. Bạn có thể xem cách thực hiện điều này tại: https://thinkster.io/egghead/sharing-data-between-controllers

2. Tạo bộ điều khiển chính cho toàn bộ trang và bộ điều khiển con cho từng phần (Vùng nội dung và Thông tin phụ). Sử dụng thừa kế phạm vi nguyên mẫu.Ví dụ:

nếu trong điều khiển chính bạn có: $scope.myObject = someValue;

trong điều khiển con bạn có thể đặt: $scope.myObject.myProperty = someOtherValue;

bạn có thể truy cập vào myObject.myProperty từ điều khiển chính của bạn

Answer 3

Điều này thực sự thú vị. Pub/Sub phải là một giải pháp đúng ở đây.

Bạn có thể thêm đơn đặt hàng bổ sung vào dự án của mình bằng cách sử dụng dịch vụ Góc làm mô hình của MVC và cập nhật mô hình này cho từng thay đổi. Vấn đề ở đây là bạn nên triển khai một mẫu có thể quan sát bên trong dịch vụ của bạn và đăng ký với họ, để điều này được đồng bộ hóa trực tiếp. Vì vậy - chúng tôi trở lại Pub/Sub (hoặc giải pháp quan sát khác mà bạn có thể nghĩ đến ...).

Nhưng, dự án sẽ được tổ chức tốt hơn theo cách đó.

Ví dụ - SideInfo1Service sẽ là một dịch vụ/mô hình. Mỗi thay đổi sở hữu sẽ kích hoạt một sự thay đổi quan sát được sẽ thay đổi tất cả thính giả:

myApp.factory('SideInfo1Service', function($scope){ 
    var _prop1; 
    return { 
     setProp1: function(value){ 
      $scope.$broadcast('prop1Changed', value); 
      _prop1 = value;  
     }, 
     getProp1: function(){ 
      return _prop1; 
     } 
    } 
}); 

Bạn có thể tìm thấy những bài đăng trên blog thực sự thú vị về việc sử dụng Dịch vụ kiễu góc như mô hình MVC của bạn:

http://toddmotto.com/rethinking-angular-js-controllers/

http://jonathancreamer.com/the-state-of-angularjs-controllers/

Và, bài đăng này là về mẫu có thể quan sát được trong Angularjs:

https://stackoverflow.com/a/25613550/916450

Hy vọng điều này có thể là hữu ích (:

Answer 4

Câu hỏi rất quan trọng và câu trả lời rất tốt.

tôi đã truyền cảm hứng và tạo ra ba plunks thấy mỗi kỹ thuật:

• Broadcasting: http://embed.plnkr.co/lwSNDCsw4gjLHXDhUs2R/preview
• Dịch vụ Chia sẻ: http://embed.plnkr.co/GptJf2cchAYmoOb2wjRx/preview
• Nested Scopes: http://embed.plnkr.co/Bct0Qwz9EziQkHemYACk/preview

Kiểm tra các plunks, hy vọng điều này có ích.