Explanation of AngularJS Communication Mechanism

Explanation of AngularJS Communication Mechanism

This article mainly introduces the communication mechanism of AngularJS. AngularJS is a very popular JavaScript library. For more information, see

People around the world are asking! Is there anyone outside? Here is USS AngularJS. We are in trouble. Our service is talking about Klingon, and our controllers cannot communicate with their Ferengi commands. can someone help us!

I don't know how many times I have encountered this problem about what is the best way for component communication in AngularJS. in many cases, the answer is to use the $ rootScope object to broadcast $ broadcast to anyone you want to listen. however, it is not the best way to do this. messages are broadcast between components, which means they need to know the details about the code of other components, thus limiting their modularization and reuse.

This article will show you how to use the publish/subscribe mode for internal component communication in AngularJS.

AngularJS provides multiple methods for communication between components. The most commonly used method requires you to know too much details about how those components communicate, in this way, the coupling between components is increased, and their cohesion and cohesion are reduced. this makes it difficult for your components to be reused in other applications.

By using the release/subscription design model, we can reduce the coupling between components and encapsulate the communication details between them. this will help increase the modularization, testability, and reusability of your components.

I will describe the publishing/subscription mode implementation by Eric Burley, @ eburley observed in its post angularjs.org, which is recommended in the publishing/subscription mode.

The example application I described will show you how to apply the publishing/subscription mode to Internal Controller communication and controller service communication. you can find the source code under my repository angularjs-pubsub on GitHub.

First, we need a communication pipeline.

First, let's talk about the services used to process publishing and subscription information. I have defined a service interface that provides methods for publishing and subscribing information. We can use it to process the information we want to exchange.

In the following code, I have defined two internal information; _ EDIT_DATA _, used to indicate the data that we need to edit the following information, and _ DATA_UPDATED _, it indicates that our data has been changed. These are defined internally, and users cannot access them. This helps to hide specific implementations.

There are two methods for each piece of information. One is used to publish information to the subscriber, and the other is used to register a callback method for the subscriber. when the information is received, this method will be called.

The method used to publish information to a subscriber is editData, which can be found in row 9th and dataUpated in row 19th. They push private notifications to pending events through the $ rootScope. $ broadcast method.

The method used to register events. A listener is created through $ scope. $ on. When a broadcast message is received, events registered to the service by the subscriber are executed in turn. At the same time, because the subscriber needs to transmit its own scope as a parameter, we can use it to execute the listener information, thus avoiding the complicated processing of maintaining the listener list. The method for registering an event is onEditData, in row 13, and in row 23, onDataUpdated.

In order to hide the implementation details, I used the Revealing Module (Revealing the Module: ugly name) mode and only returned the methods that I want the user to use.

?

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. service']) // Define the request notification channel for the pub/sub service . Factory ('requestnotifchannel channel', ['$ 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 }; }])

Publish messages

Publishing messages is simple. First, we need to introduce some dependencies for requestNotificationChannel in our controller. you can see this in the second row of the dataService definition below. when an event occurs, you only need to call the appropriate notification method on the requestnotifchannel to send signals to other objects that need to know the change. if you notice the saveHop, deleteHop, and addHop methods of dataService, you will see that they all call the dataUpdated method on the requestNotificationChannel. This method will send signals to the listener, the listener has been registered using the onDataUpdated method.

?

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 ', ['requestnotifchannel channel', 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, centenrix "," 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 extends cially 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: 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 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 () x 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 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 } }]);

Receive Event Notifications

It is also easy to receive Event Notifications from requesticationchannel. In addition, we only need a callback processor to use notifications when a message is sent for some processing. we will need to add some dependencies to the requestnotifchannel for our controllers, services, and commands. You can see these in the second line of the code below. next, we need to define an Event Callback processor to respond to Event Notifications. You can see it in the fifth line of code below. then we need to call the onDataUpdated method to register our callback processor to the requestNotificationChannel and pass in the range from the Controller and the callback processor. We have done these things in line 9th of code.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

Controller Used for controller Communication

We can also use the requestNotificationChannel for communication between controllers. we only need one controller to assume the role of the publisher, and the other controller to assume the role of the subscriber. if you observe the onEdit method of the 11th-line view1-controller of the previous code, you will see that it sends an editData message that contains items that need to be edited using requestnotifchannel. the following view2-controller registers its onEditDataHandler from row 5th to row 9th with requestNotificationChannel. so whenever the view1-controller sends an editData message with the item to be modified, the view2-controller will be notified of the editData message, get the item and update it to its model.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

Write a good interface document

One thing may be ignored. We use communication interfaces between components. These interfaces need a good document to explain how to use them. In the above example, if there is no document, you will not know that onEditData will send a data to be edited to the callback function. So when you start using this mode, the best technique is to write comments to the method to ensure that the notification service knows exactly what happened.

Summary

Now, we have discussed how to use the subscription/publish mode in your AngularJS application to implement inter-module communication. This mode decouples your modules from Internal messages for easier reuse. You can even replace all the communication between modules with the subscription/publish mode. This mode is particularly effective when your service has many asynchronous requests and you want to cache data in the service to reduce communication with the server.

I hope this will be helpful to you. You can find the sample code under angularjs-pubsub in my GitHub repository.