Explication détaillée du mécanisme de communication d'AngularJS_AngularJS

Presque tout le monde dans le monde se demande maintenant ! Y a-t-il quelqu'un là-bas ? C'est l'USS AngularJS, nous sommes en difficulté, nos services parlent Klingon et nos contrôleurs ne peuvent pas communiquer avec eux par la communication par commande Ferengi.

Je ne peux pas vous dire combien de fois on m'a posé cette question sur la meilleure façon pour les composants de communiquer dans AngularJS. Plusieurs fois, la réponse est d'utiliser un objet $rootScope pour atteindre toute personne souhaitant écouter. . Broadcast $diffusion d'un message. Cependant, ce n'est vraiment pas la meilleure façon de procéder. La diffusion de messages entre composants signifie qu'ils doivent connaître certains détails de l'encodage des autres composants, ce qui limite leur modularité et leur réutilisation.

Dans cet article, je vais vous montrer comment utiliser le modèle de publication/abonnement pour la communication interne des composants dans AngularJS.

AngularJS propose de nombreuses façons de communiquer entre les composants, mais les méthodes les plus couramment utilisées nécessitent que vous connaissiez trop de détails sur la façon dont ces composants communiquent, ce qui augmente le couplage entre les composants et réduit leur modularité et leur cohésion, ce qui rend difficile leur réutilisation. vos composants dans d'autres applications.

En utilisant le modèle de conception de publication/abonnement, nous pouvons réduire le couplage entre les composants et encapsuler les détails de leur communication. Cela contribuera à augmenter la modularité, la testabilité et la fiabilité de vos composants.

L'implémentation du modèle de publication/abonnement que je vais décrire a été recommandée par Eric Burley, @eburley dans son article

Observations angulaires.org, À propos du modèle de publication/abonnement.. .

L'exemple d'application que j'ai décrit vous montrera comment utiliser le modèle de publication/abonnement pour la communication interne du contrôleur et la communication du service du contrôleur. Vous pouvez le trouver dans mon référentiel sur GitHub

angularjs-pubsub Trouvez la source. code ci-dessous.

Nous avons d'abord besoin d'un canal de communication

Parlons d’abord des services utilisés pour gérer les informations de publication et d’abonnement. J'ai défini une interface de service qui fournit des méthodes de publication et d'abonnement aux informations, que nous pouvons utiliser pour traiter les informations que nous souhaitons échanger.

Dans le code ci-dessous, je définis deux messages internes ; _EDIT_DATA_, pour indiquer que nous devons modifier les données transmises avec le message, et _DATA_UPDATED_, pour indiquer que nos données ont été modifiées. Ceux-ci sont définis en interne et ne sont pas accessibles aux utilisateurs, ce qui permet de masquer l'implémentation.

Pour chaque information, il existe deux méthodes : l'une est utilisée pour publier l'information et la transmettre aux abonnés, et l'autre permet aux abonnés d'enregistrer une méthode de rappel, qui sera appelée lorsque l'information sera reçue.

Les méthodes utilisées pour publier des informations aux abonnés sont editData, à la ligne 9, et dataUpated, à la ligne 19. Ils envoient des notifications privées aux événements en attente via la méthode $rootScope.$broadcast.

La méthode utilisée pour enregistrer les événements consiste à établir un auditeur via $scope.$on Après avoir reçu le message diffusé, les événements enregistrés par l'abonné au service seront exécutés à tour de rôle. Dans le même temps, puisque l'abonné a besoin que sa propre portée soit transmise en paramètre, nous pouvons l'utiliser pour exécuter les informations surveillées, évitant ainsi le traitement compliqué de la maintenance de la liste d'écoute. Les méthodes pour enregistrer l'événement sont onEditData à la ligne 13 et onDataUpdated à la ligne 23.

Afin de masquer les détails d'implémentation, j'ai utilisé le modèle Revealing Module (module révélateur : nom laid) pour renvoyer uniquement les méthodes que je souhaite que les utilisateurs utilisent.

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
    };
  }])

Poster un message

La publication d'un message est simple. Nous devons d'abord introduire quelques dépendances pour requestNotificationChannel dans notre contrôleur. Vous pouvez le voir dans la deuxième ligne de la définition de dataService ci-dessous, si vous avez besoin de savoir quels changements ont eu lieu. s'est produit, pour envoyer des signaux à d'autres objets, il vous suffit d'appeler la méthode de notification appropriée sur requestNotificationChannel. Si vous remarquez les méthodes saveHop, deleteHop et addHop de dataService, vous verrez qu'elles appellent toutes la méthode dataUpdated sur requestNotificationChannel. le signal sera envoyé à l'auditeur, qui a été enregistré à l'aide de la méthode 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 下找到例子的代码。