AngularJS_AngularJSの通信機構の詳細説明

今、世界中のほぼ全員が尋ねています!誰かいませんか?USS AngularJS です。私たちのサービスはクリンゴン語を話しており、管制官はフェレンギ語のコマンドで通信できません。誰か助けてくれませんか!

コンポーネントが AngularJS で通信するための最良の方法は何かという質問を何度受けたかわかりませんが、多くの場合、聞きたい人に連絡するには $rootScope オブジェクトを使用するのが答えです。 . $broadcast メッセージをブロードキャストします。ただし、これは実際には最善の方法ではありません。コンポーネント間でメッセージをブロードキャストするには、他のコンポーネントのエンコーディングの詳細を知る必要があるため、コンポーネントのモジュール性と再利用が制限されます。

この記事では、AngularJS の内部コンポーネント通信にパブリッシュ/サブスクライブ パターンを使用する方法を説明します。

AngularJS にはコンポーネント間の通信に使用できる方法が多数ありますが、最も一般的に使用される方法では、コンポーネント間の通信方法について詳細を知る必要があるため、コンポーネント間の結合が増加し、コンポーネントのモジュール性と凝集性が低下します。これにより、再利用が困難になります。他のアプリケーションのコンポーネント。

パブリッシュ/サブスクライブ設計パターンを使用することで、コンポーネント間の結合を減らし、コンポーネント間の通信の詳細をカプセル化することができ、コンポーネントのモジュール性、テスト容易性、および信頼性を向上させることができます。

これから説明するパブリッシュ/サブスクライブ パターンの実装は、Eric Burley 氏 (@eburley) の投稿

angularjs.org の観察、パブリッシュ/サブスクライブ パターンについて.. で推奨されたものです。

私が説明したサンプル アプリケーションは、内部コントローラー通信とコントローラー サービス通信にパブリッシュ/サブスクライブ パターンを使用する方法を示しています。GitHub の私のリポジトリにあります。

angularjs-pubsub ソースを見つけてください。以下のコード。

まず、コミュニケーション チャネルが必要です

まず、情報の公開と購読を処理するために使用されるサービスについて話しましょう。情報を公開および購読するためのメソッドを提供するサービス インターフェイスを定義しました。これを使用して、交換する情報を処理できます。

以下のコードでは、メッセージとともに渡されたデータを編集する必要があることを示す _EDIT_DATA_ と、データが変更されたことを示す _DATA_UPDATED_ という 2 つの内部メッセージを定義しています。これらは内部で定義されており、ユーザーはアクセスできないため、実装を隠すのに役立ちます。

情報ごとに 2 つのメソッドがあります。1 つは情報を公開してサブスクライバーにプッシュするために使用され、もう 1 つはサブスクライバーが情報の受信時に呼び出されるコールバック メソッドを登録できるようにします。

サブスクライバーに情報を公開するために使用されるメソッドは、9 行目の editData と 19 行目の dataUpated です。 $rootScope.$broadcast メソッドを介してプライベート通知を保留中のイベントにプッシュします。

イベントの登録に使用される方法は、$scope.$on を通じてリスナーを確立することです。ブロードキャスト メッセージを受信した後、サービスのサブスクライバーによって登録されたイベントが順番に実行されます。同時に、サブスクライバーはパラメーターとして渡す独自のスコープを必要とするため、それを使用して監視対象情報を実行でき、リスナー リストを維持する複雑な処理を回避できます。イベントを登録するメソッドは、13 行目の onEditData と 23 行目の onDataUpdated です。

実装の詳細を隠すために、Revealing Module (暴露モジュール: 醜い名前) パターンを使用して、ユーザーに使用してもらいたいメソッドのみを返しました。

angular.module(['application.services'])
  // define the request notification channel for the pub/sub service
  .factory('requestNotificationChannel', ['$rootScope', function ($rootScope) {
    // private notification messages
    var _EDIT_DATA_ = '_EDIT_DATA_';
    var _DATA_UPDATED_ = '_DATA_UPDATED_';
 
    // publish edit data notification
    var editData = function (item) {
      $rootScope.$broadcast(_EDIT_DATA_, {item: item});
    };
    //subscribe to edit data notification
    var onEditData = function($scope, handler) {
      $scope.$on(_EDIT_DATA_, function(event, args) {
        handler(args.item);
      });
    };
    // publish data changed notification
    var dataUpdated = function () {
      $rootScope.$broadcast(_DATA_UPDATED_);
    };
    // subscribe to data changed notification
    var onDataUpdated = function ($scope, handler) {
      $scope.$on(_DATA_UPDATED_, function (event) {
        handler();
      });
    };
    // return the publicly accessible methods
    return {
      editData: editData,
      onEditData: onEditData,
      dataUpdated: dataUpdated,
      onDataUpdated: onDataUpdated
    };
  }])

メッセージを投稿する

メッセージの発行は簡単です。まず、イベントが発生したときにどのような変更が加えられるかを知る必要がある場合は、コントローラーに requestNotificationChannel の依存関係をいくつか導入する必要があります。他のオブジェクトにシグナルを送信するには、requestNotificationChannel で適切な通知メソッドを呼び出すだけで済みます。dataService の saveHop、deleteHop、および addHop メソッドがすべて requestNotificationChannel で dataUpdated メソッドを呼び出していることがわかります。シグナルは、onDataUpdated メソッドを使用して登録されたリスナーに送信されます。

  // define the data service that manages the data
  .factory('dataService', ['requestNotificationChannel', function (requestNotificationChannel) {
    // private data
    var hops = [
      { "_id": { "$oid": "50ae677361d118e3646d7d6c"}, "Name": "Admiral", "Origin": "United Kingdom", "Alpha": 14.75, "Amount": 0.0, "Use": "Boil", "Time": 0.0, "Notes": "Bittering hops derived from Wye Challenger. Good high-alpha bittering hops. Use for: Ales Aroma: Primarily for bittering Substitutions: Target, Northdown, Challenger", "Type": "Bittering", "Form": "Pellet", "Beta": 5.6, "HSI": 15.0, "Humulene": 0.0, "Caryophyllene": 0.0, "Cohumulone": 0.0, "Myrcene": 0.0, "Substitutes": ""} ,
      { "_id": { "$oid": "50ae677361d118e3646d7d6d"}, "Name": "Ahtanum", "Origin": "U.S.", "Alpha": 6.0, "Amount": 0.0, "Use": "Boil", "Time": 0.0, "Notes": "Distinctive aromatic hops with moderate bittering power from Washington. Use for: Distinctive aroma Substitutes: N/A", "Type": "Aroma", "Form": "Pellet", "Beta": 5.25, "HSI": 30.0, "Humulene": 0.0, "Caryophyllene": 0.0, "Cohumulone": 0.0, "Myrcene": 0.0, "Substitutes": ""} ,
      { "_id": { "$oid": "50ae677361d118e3646d7d6e"}, "Name": "Amarillo Gold", "Origin": "U.S.", "Alpha": 8.5, "Amount": 0.0, "Use": "Boil", "Time": 0.0, "Notes": "Unknown origin, but character similar to Cascade. Use for: IPAs, Ales Aroma: Citrus, Flowery Substitutions: Cascade, Centennial", "Type": "Aroma", "Form": "Pellet", "Beta": 6.0, "HSI": 25.0, "Humulene": 0.0, "Caryophyllene": 0.0, "Cohumulone": 0.0, "Myrcene": 0.0, "Substitutes": ""} ,
      { "_id": { "$oid": "50ae677361d118e3646d7d6f"}, "Name": "Aquila", "Origin": "U.S.", "Alpha": 6.5, "Amount": 0.0, "Use": "Boil", "Time": 0.0, "Notes": "Aroma hops developed in 1988. Limited use due to high cohumolone.Used for: Aroma hops Substitutes: ClusterNo longer commercially grown.", "Type": "Aroma", "Form": "Pellet", "Beta": 3.0, "HSI": 35.0, "Humulene": 0.0, "Caryophyllene": 0.0, "Cohumulone": 0.0, "Myrcene": 0.0, "Substitutes": ""} ,
      { "_id": { "$oid": "50ae677361d118e3646d7d70"}, "Name": "Auscha (Saaz)", "Origin": "Czech Republic", "Alpha": 3.3, "Amount": 0.0, "Use": "Boil", "Time": 0.0, "Notes": " Use for: Pilsners and Bohemian style lagers Aroma: Delicate, mild, clean, somewhat floral -- Noble hops Substitute: Tettnanger, LublinExamples: Pulsner Urquell", "Type": "Aroma", "Form": "Pellet", "Beta": 3.5, "HSI": 42.0, "Humulene": 0.0, "Caryophyllene": 0.0, "Cohumulone": 0.0, "Myrcene": 0.0, "Substitutes": ""} ,
    ];
    // sends notification that data has been updated
    var saveHop = function(hop) {
      requestNotificationChannel.dataUpdated();
    };
    // removes the item from the array and sends a notification that data has been updated
    var deleteHop = function(hop) {
      for(var i = 0; i < hops.length; i++) {
        if(hops[i]._id.$oid === hop._id.$oid) {
          hops.splice(i, 1);
          requestNotificationChannel.dataUpdated();
          return;
        }
      };
    };
    // internal function to generate a random number guid generation
    var S4 = function() {
      return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    // generates a guid for adding items to array
    var guid = function () {
     return (S4() + S4() + "-" + S4() + "-4" + S4().substr(0,3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
    };
    // function to add a hop to the array and sends a notification that data has been updated
    var addHop = function(hop) {
      hops.id.$oid = guid();
      hops.push(hop);
      requestNotificationChannel.dataUpdated();
    };
    // returns the array of hops
    var getHops = function() {
      return hops;
    };
    // returns a specific hop with the given id
    var getHop = function(id) {
      for(var i = 0; i < hops.length; i++) {
        if(hops[i]._id.$oid === id) {
          return hops[i];
        }
      };
    };
    // return the publicly accessible methods
    return {
      getHops: getHops,
      getHop: getHop,
      saveHop: saveHop,
      deleteHop: deleteHop,
      addHop: addHop
    }
  }]);

 
接收事件通知

从 requestNotificationChannel 接收事件通知也很简单，额外的我们只需要回调处理器来在消息被发送时使用通知来做一些自己的处理. 我们将再次需要添加一些依赖到面向我们的控制器、服务以及指令的 requestNotificationChannel 上, 你可以在下面代码的第二行中看到这些. 接下来我们需要定义一个事件回调处理器来对事件通知做出回应，你可以在下面的第五行代码中看到. 然后我们需要通过调用 onDataUpdated 方法来吧我们的回调处理器注册到requestNotificationChannel，并传入来自控制器和回调处理器的范围, 我们在第9行代码中做了这些事情.

 

  //define the controller for view1
  .controller('view1-controller', ['$scope', 'dataService', 'requestNotificationChannel', function($scope, dataService, requestNotificationChannel) {
    $scope.hops = dataService.getHops();
 
    var onDataUpdatedHandler = function() {
      $scope.hops = dataService.getHops();
    }
 
    requestNotificationChannel.onDataUpdated($scope, onDataUpdatedHandler);
 
    $scope.onEdit = function(hop) {
      requestNotificationChannel.editData(hop);
    }
 
    $scope.onDelete = function(hop) {
      dataService.deleteHop(hop);
    }
  }]);

用于控制器通信的控制器

我们也可以将 the requestNotificationChannel 用于控制器间的通信. 我们只需要有一个控制器扮演发布者的角色，而另外一个控制器扮演订阅者的角色就行了. 如果你观察到前段代码第11行view1-controller的onEdit方法，你会看到它发送了一个editData消息，消息包含需要使用 requestNotificationChannel 编辑的项.  下面的 view2-controller 从第5行到第9行将它的 onEditDataHandler 用 requestNotificationChannel 进行了注册. 如此无论何时view1-controller一旦发送editData消息，带上要修改的项，view2-controller都会受到editData消息的通知，获得该项并将其更新到它的模型.
 

  //define the controller for view1
  .controller('view2-controller', ['$scope', 'dataService', 'requestNotificationChannel', function($scope, dataService, requestNotificationChannel) {
    $scope.hop = null;
 
    var onEditDataHandler = function(item) {
      $scope.hop = item;
    };
 
    requestNotificationChannel.onEditData($scope, onEditDataHandler);
 
    $scope.onSave = function() {
      dataService.saveHop($scope.hop);
      $scope.hop = null;
    }
 
    $scope.onCancel = function() {
      $scope.hop = null;
    }
  }]);

写一个好的接口文档

有一件事情可能会被忽略，我们在组件间用了通信接口，而这些接口，它们需要一个好的文档来说明应当如何使用。上面的例子中，如果没有文档，用户肯定不会知道 onEditData 会给回调函数传一个待编辑数据。所以当你开始用这个模式，用好的技巧在于，给方法写注释文档，以确保通知服务明确知道发生了什么事情。
总结

好了，我们探讨了如何在你的 AngularJS 应用中使用订阅/发布模式来实现模块间通信。该模式可以让你的模块从内部消息解耦，更便于复用。你甚至可以把模块之间的通信全部替换成订阅/发布模式。尤其当你的服务中有很多异步请求，以及你希望把数据缓存在服务中，从而减少和服务器通信的时候，这种模式相当有效。

我希望这对你有所帮助，你可以在我的 GitHub 仓库 angularjs-pubsub 下找到例子的代码。