Which function is called each time url changes in AngularJS?

All we need is an easy explanation of the problem, so here it is.

I have to make a queue of all requests simultaneously happening without waiting for the response from the previous request in angularjs.
I have a loading function which shows the loading div each time I change the url route but its not ok to make an arrray of queue in that function.

Can anyone tell me which function is called in angularjs routes when each time I change the url route ?
HEre is the routes code :

angular.module('myApp', ['myApp.directives', 'myApp.services', 'myApp.filters']).config(
    function($routeProvider, $locationProvider, $httpProvider) {
        $locationProvider.html5Mode(false);
        $locationProvider.hashPrefix('!');

        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        var loading = function (data, headersGetter) {
            $('loadingDiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(loading);

        $routeProvider.
        when('/', {
            templateUrl: 'elements/home/home.html',
            controller: homeCtrl
        });
   });

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You could use something like:

.run( function($rootScope, $location) {
   $rootScope.$watch(function() { 
      return $location.path(); 
    },
    function(a){  
      console.log('url has changed: ' + a);
      // show loading div, etc...
    });
});

Method 2

$route service has a series of events you can monitor using $.on in a controller:

$rootScope.$on("$routeChangeStart", function(args){})

$rootScope.$on("$routeChangeSuccess"....

$rootScope.$on("$routeChangeError"....

See doc $route

You could set ng-show on your element instead of using jQuery and set the variable to true in $routeChangeStart callback and false in $routeChangeSuccess callback.

A good demo for these events: https://github.com/johnlindquist/angular-resolve

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply