Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which function is called each time url changes in AngularJS?

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
        });
   });
like image 870
Amb Avatar asked Mar 16 '13 05:03

Amb


People also ask

What is Route reload ()?

The route reload functionality in Camel is capable of watching a directory folder for file changes, and then automatic trigger reload of the running routes in the Camel application. This functionality is intended for development purposes, and not for production use.

What is $window in AngularJS?

The $window service refers to the browser window object. It is globally available in JavaScript, so it causes testability problems. In AngularJS, it is not globally available. It includes various methods like alert box, prompt box, confirms box, etc.

What is $location in AngularJS?

Overview. The $location service parses the URL in the browser address bar (based on the window. location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

What is route in AngularJS?

Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application.


2 Answers

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...
    });
});
like image 64
garst Avatar answered Oct 17 '22 21:10

garst


$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

like image 26
charlietfl Avatar answered Oct 17 '22 23:10

charlietfl