4 ways to switch and pass values between Angular pages

This article shares the methods of switching and passing values between Angular JS pages for your reference. The specific content is as follows: Switching and passing values between Angular JS pages.

1. Jump and transfer parameters based on ui-router
(1) Use ui-router to define routes in AngularJS. For example, there are now two pages, one page () places multiple producers, click one of the targets, the page jumps to the corresponding producer page, and pass the parameter producerId over.

state('producers', {
 url: '/producers',
 templateUrl: 'views/',
 controller: 'ProducersCtrl'
})
.state('producer', {
 url: '/producer/:producerId',
 templateUrl: 'views/',
 controller: 'ProducerCtrl'
})

(2) In, define the click event, such as ng-click="toProducer(producerId)", in ProducersCtrl, define the page jump function (using the $ interface of ui-router):

.controller('ProducersCtrl', function ($scope, $state) {
 $ = function (producerId) {
  $('producer', {producerId: producerId});
 };
});

(3) In ProducerCtrl, get the parameter producerId through the $stateParams of ui-router, for example:

.controller('ProducerCtrl', function ($scope, $state, $stateParams) {
 var producerId = $;
});

2. Jump and transfer parameters based on factory page

For example: You have N pages, each page requires the user to fill in the information, and finally guide the user to submit to the last page. At the same time, the next page must display the information filled in by all the previous pages. At this time, it is a more reasonable choice to use factory to pass arguments (the following code is a simplified version, which can be customized according to the needs):

.factory('myFactory', function () {
 //Define factory return object var myServices = {}; 
 //Define parameter object var myObject = {};
 
 /**
   * Define the set function that passes data
   * @param {type} xxx
   * @returns {*}
   * @private
   */
 var _set = function (data) {
  myObject = data;  
 };

 /**
   * Define the get function to get data
   * @param {type} xxx
   * @returns {*}
   * @private
   */
 var _get = function () {
  return myObject;
 };

 // Public APIs
  = _set;
  = _get;
 
 // The function of submitting or obtaining parameters can be realized by typing the set() and get() methods in the controller return myServices;
 
});

3. Passing parameters based on factory and $rootScope.$broadcast()

(1) For example: Define nested views in a single page. You want all subscopes to listen to changes in a certain parameter and make corresponding actions. For example, in a map application, an element input is defined in a $state. After entering the address, the map needs to be positioned. At the same time, the list in another state needs to display the information of the shops around the location. At this time, multiple $scopes are listening for the changes in the address.
PS: $rootScope.$broadcast() can easily set global events and let all subscopes listen.

.factory('addressFactory', ['$rootScope', function ($rootScope) {
 // Define the address object to be returned var address = {};
 
 // Define components array, array including street, city, country, etc.  = [];

 // Define the update address function, set the global event 'AddressUpdated' through $rootScope.$broadcast() // All subscopes can listen to this event  = function (value) {
  = ();
 $rootScope.$broadcast('AddressUpdated');
 };
 
 // Return address object return address;
}]);

(2) In the controller that gets the address:

// Dynamically obtain the address, the interface method is omittedvar component = {
 addressLongName: xxxx,
 addressShortName: xxxx,
 cityLongName: xxxx,
 cityShortName: xxxx   
};

// Define address array$ = [];

$scope.$watch('components', function () {
 // Push component object into $array (component);
 // Update components in addressFactory (components);
});

(3) In the controller that listens for changes in address:

// Listen to address changes through the global event 'AddressUpdated' defined in addressFactory$scope.$on('AddressUpdated', function () {
 // Listen to the change of the address and obtain the corresponding data var street = [0].addressLongName;
 var city = [0].cityLongName;

 // Related operations can be performed through the obtained address data, such as obtaining the shop around the address. The following code is made by me. (street, city).then(function (data) {
  if( === 200){
   $ = ; 
  }else{
   $('Sorry, there was an error in obtaining the data of the shops around this location: ', data);
  }
 });
});

4. Page jump to transfer parameters based on localStorage or sessionStorage

Notes:Passing parameters through LS or SS must be listened to, otherwise one end of the acquisition variable will not be updated when the parameters are changed. AngularJS has some ready-made WebStorage dependency that can be used, such as gsklee/ngStorage·GitHub, grevory/angular-local-storage·GitHub. The following is to use ngStorage to briefly describe the argument transmission process:

(1) Upload parameters to localStorage - Controller A

// Define and initialize the counter property in localStorage$scope.$storage = $localStorage.$default({
 counter: 0
});

// Suppose the updateCounter() method in a factory (this example is temporarily named counterFactory)// Can be used to update the counter parameter().then(function (data) {
 // Upload the new counter value to localStorage $scope.$ = ;
});

(2) Listen to parameter changes in localStorage - Controller B

$ = $;
$scope.$watch('counter', function(newVal, oldVal) {
 // Listen to changes and get the latest value of the parameter $('newVal: ', newVal); 
});

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.

4 ways to switch and pass values ​​between Angular pages

4 ways to switch and pass values between Angular pages