Watching a $locationProvider in Angular.js

Question

I need to watch changes on the URL bar and do certain actions based on that. I wondered what's the best way to add a watch to view changes to it?

Answer 1

Events exist, they're just undocumented for some reason.

Try the following events: $locationChangeStart and $locationChangeSuccess

scope.$on('$locationChangeStart', function (event, newLoc, oldLoc){
   console.log('changing to: ' + newLoc);
});

scope.$on('$locationChangeSuccess', function (event, newLoc, oldLoc){
   console.log('changed to: ' + newLoc);
});

Or you can $watch any value you want by passing a function into the $watch's first argument as Anders suggested:

scope.$watch(function() { return $location.path(); }, function(newLoc, oldLoc){
   console.log(newLoc, oldLoc);
});

However this will create a little more overhead on your $digest.

Answer 2

Assuming that you have requested the $location object in your controller, you can do it like this:

$scope.$watch(function() { return $location.path() }, function() {
    // Do stuff when the location changes
});