Angularjs Listen for routing changes sample code _ANGULARJS

Not much to say, we look directly below the implementation of the sample code

"One" angular routing state changes can be through '$stateChangeStart, ' '$stateChangeSuccess, '$stateChangeErrormonitoring, through injection ' $location ' implementation of state management

The code example is as follows:

 function run ($ionicPlatform, $location, Service, $rootScope, $stateParams) {//Routing listener events $rootScope. $on (' $stateChangeStart ', function (event, tostate, Toparams, FromState, Fromparams) {Console.log (E 
     VENT); 
     Console.log (tostate); 
     Console.log (Toparams); 
     Console.log (fromstate); 
     Console.log (Fromparams); 
       if (Tostate.name = = "Homepage") {//Get parameters can be adjusted request to determine what page to render, rendering different pages through the $location implementation if (toparams.id = = 10) { 
       $location. Path ();//Get Routing Address//$location. Path ('/validation '). replace (); Event.preventdefault () can prevent template resolution}})//statechangesuccess triggers $rootScope when the template resolution is complete. $on (' $stateC Hangesuccess ', function (event, tostate, Toparams, FromState, Fromparams) {})//$stateChangeError When an error occurs during template parsing Triggers $rootScope. $on (' $stateChangeError ', function (event, tostate, Toparams, FromState, Fromparams, error) {})} /pre>
function run($ionicPlatform, $location, Service, $rootScope, $stateParams) {
//Route listening event
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
console.log(event);
console.log(toState);
console.log(toParams);
console.log(fromState);
console.log(fromParams);
if (toState.name == "homePage") {
//After obtaining the parameters, you can call the request to determine which page needs to be rendered, and render different pages through $location
if (toParams.id == 10) {
//$location. Path(); / / get route address
// $location.path('/validation').replace();
//Event. Preventdefault() prevents template parsing
}
}
}
//Statechangesuccess triggered when template parsing is complete
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
}
//$statechangeerror triggered when an error occurs during template parsing
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
}
}

"2" in page rendering can be monitored by ' and ' in the$viewContentLoading$viewContentLoadedpage render state: Render start and render end.

(Add the following code in the controller to implement the listener)

//$viewcontentloading - triggered when the view starts to load and before DOM rendering is complete, this event will broadcast on the $scope chain.
scope.$watch('$viewContentLoading',function(event, viewConfig){
Alert ('before the template is loaded ');
};
//$viewcontentloaded - triggered after the view is loaded and DOM rendering is completed. The event is sent from the $scope where the view is located.
$scope.$watch('$viewContentLoaded',function(event){
Alert ('after template loading ');
};  

Summarize

The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if there is doubt you can message exchange.