How to watch for a route change in AngularJS

Question

How would one watch trigger an event on a route change

User · Accepted Answer

Note  This is a proper answer for a legacy version of AngularJS  See this question for updated versions    scope  on   routeChangeStart   function  event  next  current               you could trigger something here            The following events are also available  their callback functions take different arguments      routeChangeSuccess  routeChangeError  routeUpdate - if reloadOnSearch property has been set to false   See the  route docs   There are two other undocumented events      locationChangeStart  locationChangeSuccess   See What  39 s the difference between  locationChangeSuccess and  locationChangeStart

User · Answer

rootScope  on    routeChangeStart   function event  next  current          do something     event stopPropagation       if you don t want event to bubble up

User · Answer

rootScope  on    routeChangeStart   function event  next  current        if you want to interrupt going to another location    event preventDefault

User · Answer

If you don t want to place the watch inside a specific controller  you can add the watch for the whole aplication in Angular app run    var myApp   angular module  myApp         myApp run function  rootScope         rootScope  on   locationChangeStart   function event  next  current                handle route changes

User · Answer

This is for the total beginner    like me   HTML                lt ul gt       lt li gt         lt a href     gt  Home  lt  a gt       lt  li gt       lt li gt         lt a href   Info  gt  Info  lt  a gt       lt  li gt     lt  ul gt      lt div ng-app  myApp  ng-controller  MainCtrl  gt       lt div ng-view gt        lt  div gt     lt  div gt    Angular     Create App var app   angular module  myApp     ngRoute        Configure routes app config function   routeProvider         routeProvider        otherwise   template    lt p gt Coming soon lt  p gt             when                template    lt p gt Home information lt  p gt                   when   Info             template    lt p gt Basic information lt  p gt             templateUrl    content views Info html                   Controller app controller  MainCtrl   function   scope   rootScope   location       scope location    location path       rootScope  on   routeChangeStart   function          console log  routeChangeStart         Place code here                   Hope this helps a total beginner like me  Here is the full working sample    x000D   x000D   lt html gt  x000D   lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs angularjs 1 5 6 angular min js  gt  lt  script gt  x000D     lt script src  https   ajax googleapis com ajax libs angularjs 1 5 6 angular-route min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt ul gt  x000D       lt li gt  x000D         lt a href     gt  Home  lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D         lt a href   Info  gt  Info  lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   x000D     lt div ng-app  myApp  ng-controller  MainCtrl  gt  x000D       lt div ng-view gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D     lt script gt  x000D    Create App x000D  var app   angular module  myApp     ngRoute     x000D   x000D    Configure routes x000D  app config function   routeProvider    x000D       routeProvider x000D         otherwise   template    lt p gt Coming soon lt  p gt      x000D         when        x000D          template    lt p gt Home information lt  p gt   x000D           x000D         when   Info     x000D          template    lt p gt Basic information lt  p gt   x000D            templateUrl    content views Info html  x000D            x000D      x000D   x000D    Controller x000D  app controller  MainCtrl   function   scope   rootScope   location    x000D     scope location    location path    x000D     rootScope  on   routeChangeStart   function      x000D      console log  routeChangeStart    x000D       Place code here      x000D         x000D      x000D     lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[javascript] How to watch for a route change in AngularJS?

Examples related to javascript

Examples related to angularjs