4 ways to angular between pages and transfer values _angularjs

This example for you to share the angular JS page between the switch and the value of the method, for everyone to refer to, the specific content of the following angular JS page between the switch and transfer value

1. Ui-router-based page Jump Pass
(1) In the Angularjs app.js to define the route with Ui-router, for example, there are now two pages, a page (producers.html) placed a number of producers, click on one of the targets, the page jumps to the corresponding producer page, and will producerid this parameter The numbers pass through.

State (' producers ', {
 URL: '/producers ',
 templateurl: ' views/producers.html ',
 controller: ' Producersctrl '
})
. State (' producer ', {
 URL: '/producer/:p roducerid ',
 templateurl: ' views/ Producer.html ',
 controller: ' Producerctrl '
})

(2) In producers.html, define click events such as ng-click= "Toproducer (Producerid)", and in Producersctrl, define page jump functions (using Ui-router $ State.go interface):

. Controller (' Producersctrl ', function ($scope, $state) {
 $scope. toproducer = function (Producerid) {
  $ State.go (' producer ', {Producerid:producerid});
 };

(3) in Producerctrl, the parameter producerid is obtained by Ui-router $stateparams, for example:

. Controller (' Producerctrl ', function ($scope, $state, $stateParams) {
 var producerid = $stateParams. Producerid;
} );

2. Factory-based page Jump Pass

For example: You have n pages, each page needs the user to fill in the information, and ultimately guide the user to the end of the submission, while the next page to display all the previous pages fill out information. It is a reasonable choice to use factory at this time (the following code is a simplified version, depending on the requirements can be different customization):

. Factory (' MyFactory ', function () {
 ///define factory return object
 var myservices = {}; 
 Defines the Parameter object
 var myObject = {};
 
 /**
  * Defines the set function for passing data
  * @param {type} XXX
  * @returns {*}
  * @private
 /var _set = function (da TA) {
  myObject = data;  
 };

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

 Public APIs
 myservices.set = _set;
 Myservices.get = _get;
 
 In controller, the function of submitting or acquiring parameters can be realized by adjusting set () and get () method return
 myservices;
 

3. Parameters based on factory and $rootscope. $broadcast ()

(1) For example: the nested views are defined on a single page, and you want all child scopes to listen to the change of a parameter and make the corresponding action. For example, a map application, a $state defined element input, input address, map to locate, while another state of the list to show the location around the store information, at this time multiple $scope are listening to address changes.
PS: $rootScope. $broadcast () can easily set global events and have all child scopes heard.

. Factory (' Addressfactory ', [' $rootScope ', function ($rootScope) {
 //define the Address object to be returned by 
 var addressing = {};
 
 Define components array, array including street, city, country etc
 address.components = [];

 Define the update address function, set global event ' addressupdated '/by $rootscope. $broadcast ()
 all child scopes can listen to the event
 address.updateaddress = function (value) {
 this.components = Value.slice ();
 $rootScope. $broadcast (' addressupdated ');
 };
 
 Returns the Address object return addressing
 ;
}];

(2) in the Controller of obtaining the address:

Dynamic get address, interface method omit
var component = {
 addresslongname:xxxx,
 addressshortname:xxxx,
 citylongname:xxxx,
 cityshortname:xxxx   
};

Defines an array of addresses
$scope. components = [];

$scope. $watch (' Components ', function () {
 ///Push Component object into $scope.components array
 Components.push (component );
 Update the Components
 addressfactory.updateaddress (components) in addressfactory;

(3) in the controller of monitoring address changes:

Monitor address changes through the global event ' addressupdated ' defined in Addressfactory
$scope. $on (' addressupdated ', function () {
 // Monitor address changes and get corresponding data
 var street = address.components[0].addresslongname;
 var city = address.components[0].citylongname;

 By obtaining the address data can do related operations, such as access to the surrounding shops, the following code for my fictional
 shopfactory.getshops (Street, City). Then (function (data) {
  if ( Data.status = = {
   $scope. Shops = Data.shops; 
  } else{
   $log. Error (' Sorry, get the location of the surrounding shop data error: ', data ';
  }
 }}
);

4. Page jump passes based on localstorage or sessionstorage

Note: through LS or SS, be sure to listen to the variable, otherwise the parameter changes, get the end of the variable will not be updated. Angularjs some ready-made webstorage dependency can be used, such as Gsklee/ngstorage Github,grevory/angular-local-storage GitHub. The following uses Ngstorage to describe the process of passing the parameters:

(1) Upload parameters to Localstorage-controller A

Defines and initializes the counter attribute $scope in Localstorage
. $storage = $localStorage. $default ({
 counter:0
});

Suppose the Updatecounter () method in a factory (this case is named Counterfactory)
//Can be used to update parameters counter
counterfactory.updatecounter (). Then (function (data) {
 //To upload the new counter value to the Localstorage
 $scope. $storage. counter = Data.counter;
});

(2) Monitor localstorage in the parameter change-Controller B

$scope. Counter = $localStorage. Counter;
$scope. $watch (' counter ', function (newval, oldval) {
 //monitor change, and get the latest value of the parameter
 $log. log (' newval: ', newval); 
});

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.