詳解AngularJS的通信機制

 　　這篇文章主要介紹了AngularJS的通信機制,AngularJS是非常具有人氣的JavaScript庫,需要的朋友可以參考下

　　現在幾乎滿世界的人都在問! 外面有人麼? 這裡是 USS AngularJS, 我們遇到麻煩了，我們的服務講得是克靈貢語(Klingon) 而我們的控制器不能同它們的Ferengi 指令通信了. 有人能幫助我們麼!

　　我已經不知道有多少次遇到這種有關什麼才是AngularJS裡面的組件通信的最佳方式這樣的問題了. 很多時候答案都會是為此使用 $rootScope 對象去向任何想要收聽的人廣播$broadcast出一條消息. 然而，那還真不是做這件事的最佳方式. 組件之間廣播消息意味著它們需要多少知道一些其它組件編碼的細節，這樣就限制了它們的模塊化和重用.

　　本文我就將展示如何為AngularJS中的內部組件通信使用發布/訂閱模式.

　　AngularJS 有多種方式可供你用於組件之間的通信，而最常使用的方法卻需要你知道太多有關那些組件如何通信的細節，這樣就增加了組件之間的耦合度，並降低了它們的模塊性和內聚程度. 這樣也就使得你的組件很難在其它應用程序中重用.

　　通過使用發布/訂閱設計模式，我們可以降低組件之間的耦合度，並將它們的之間通信的細節封裝起來. 這將能幫助增加你組件的模塊化程度，可測試性以及可重用性.

　　我將會描述的發布/訂閱模式實現由 Eric Burley, @eburley 在它的帖子angularjs.org 觀察, 有關發布訂閱模式.. 中推薦過。

　　我所描述的示例應用程序，會向你展示你可以將發布/訂閱模式如何運用於內部控制器通信以及控制器的服務通信. 你可以在GitHub上我的資源庫 angularjs-pubsub 下面找到源代碼.

　　首先我們需要一條通信管道

　　首先我們來講講用於處理發布和訂閱信息的服務。我定義了一個服務接口，提供了發布和訂閱信息的方法，我們可以用它來處理我們想要用來交換的信息。

　　在下面的代碼中，我定義了兩個內部信息; _EDIT_DATA_, 用來表示我們需要編輯跟隨信息傳過來的數據，和 _DATA_UPDATED_, 用來表示我們的數據已經被改變。這些都是定義在內部的，用戶沒辦法訪問到它們的，這樣有助於隱藏具體實現。

　　而對於每條信息，有兩個方法; 一個用來發布信息推送給訂閱者，另一個可以讓訂閱者注冊一個回調方法，當接收到信息的時候，這個方法就會被調用。

　　用來向訂閱者發布信息方法是 editData，在第 9 行，還有 dataUpated，在第 19 行。它們通過 $rootScope.$broadcast 方法向待處理事件推送私有通知。

　　用來注冊事件的方法，通過 $scope.$on 建立監聽，當接收到廣播的消息之後，就會輪流執行那些被訂閱者注冊到服務上的事件。同時，由於訂閱者需要自己的 scope 作為參數傳過來，我們可以用它來執行監聽的信息，從而避免了維護監聽者列表這些復雜的處理。注冊事件的方法是 onEditData，在 13 行，還有 onDataUpdated 在 23 行。

　　為了隱藏實現細節，我用了 Revealing Module (揭示模塊:好丑的名字)模式，只返回那些我希望讓用戶使用的方法。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 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 引入一些依賴. 你可以在下面dataService的定義第二行看到這個. 當事件發生時，如果需要向需要了解有變化發生的其它對象發送信號, 你只需要調用requestNotificationChannel上恰當的通知方法就可以了. 如果你注意到了dataService的 saveHop, deleteHop 和 addHop 方法, 你就會看到它們都調用了 requestNotificationChannel 上的dataUpdated方法， 這個方法將會給偵聽器發送信號，偵聽器則已經用 onDataUpdated 方法注冊過了.

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 // 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&q