Сегодня мы с вами разберем как подписываться на евенты начала перехода с одного роута на другой и успешного перехода на какой нибудь роут. Для этого используется такие евенты как routeChangeStart и routeChangeSuccess. Давайте попробуем.

Для начала добавим

app.run(function () {
  console.log('run');
})

Как вы помните, app.run выполняется как только наше приложение инициализировалось. В браузере мы видим run в консоли.

Теперь давайте заинджектим в run $rootScope.

app.run(function ($rootScope) {
  console.log('run');
})

Когда мы используем ngRoute, то мы можем на любой роут повесить event.

app.run(function ($rootScope) {
  console.log('run');
  $rootScope.$on('$routeChangeStart', function (event, current, previous, reject) {
    console.log('changeStart', arguments);
  })
})

Первым параметром идет название евента. Вторым параметром идет функция с аргументами. Как мы видим в консоли у нас произошел routeChangeStart евент при начале загрузки роута и у нас есть массив из нескольких обьектов. Первым обьектом является event. То есть то событие, которое происходит. Вторым параметром у нас идет current. Это обьект с данными текущего роута. Теперь при изменении роута у нас всегда происходит event changeStart, как только мы переключаемся между роутами. Если мы посмотрим на обьект, то мы видим, что у нас постоянно меняется роут. Например, мы можем из него вытащить контролле, originalPath или любую другую нужную нам информацию.

Точно так же как routeChangeStart есть евент routeChangeSuccess.

app.run(function ($rootScope) {
  console.log('run');
  $rootScope.$on('$routeChangeStart', function (event, current, previous, reject) {
    console.log('changeStart', arguments);
  })
  $rootScope.$on('$routeChangeSuccess', function (event, current, previous, reject) {
    console.log('changeSuccess', arguments);
  })
})

Как мы видим, сейчас в консоли у нас выстреливает два события. routeChangeSuccess и routeChangeStart. И это очень удобно, потому что мы можем подписываться, как и до перехода на какой-то роут, чтобы реализовать какую-то логику перед переходом, так и на success абсолютно любого роута.

Давайте, например, на success в rootScope запишем переменную currentPath

$rootScope.$on('$routeChangeSuccess', function (event, current, previous, reject) {
  console.log('changeSuccess', arguments);
  $rootScope.currentPath = current.$$route.originalPath
})

Теперь в rootScope у нас всегда будет правильный path. И он у нас всегда будет перезаписываться на routeChangeSuccess.

Теперь давайте в наш index.html добавим

<div ng-controller="pathCtrl">
  Current path is: {{currentPath}}
</div>

И добавим контроллер

app.controller('pathCtrl', function () {
 
});

Нам не нужно ничего передавать так как currentPath береться с rootScope по цепочке прототипов.
\
Как мы видим, если мы обновим страницу, то нам выводится currentPath. Если мы переходим на другой роут, то currentPath меняется.
Вот так вот с помощью всего одной переменной мы на routeChangeSuccess сетим originalPath и она у нас доступна абсолютно везде. Поэтому когда вам нужно отловить какое-то событие и что-то сделать в этот момент, то вам поможет app.run и евенты.