01 April 2015
$locationChangeStart is a useful event listener provided by angular for intercepting route changes and whenever useful to debug or inject features while switching between paths.
$locationChangeStart
Sample route configuration:
<span class="nx">$routeProvider</span><span class="p">.</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/home.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'HomeCtrl'</span>
<span class="p">}).</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/login'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/login.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'LoginCtrl'</span>
<span class="p">}).</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/forgot-password'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/forgot_password.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'ResetPasswordCtrl'</span>
<span class="p">}).</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/error/:errorId'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/error.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'ErrorCtrl'</span>
<span class="p">}).</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/products'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/product_list.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'ProductListCtrl'</span>
<span class="p">}).</span>
<span class="nx">when</span><span class="p">(</span><span class="s1">'/product/:productId'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'partials/product_detail.html'</span><span class="p">,</span>
<span class="na">controller</span><span class="p">:</span> <span class="s1">'ProductDetailCtrl'</span>
<span class="p">}).</span>
<span class="nx">otherwise</span><span class="p">({</span>
<span class="na">redirectTo</span><span class="p">:</span> <span class="s1">'/'</span>
<span class="p">});</span>
<span class="p">}]).</span><span class="nx">run</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$rootScope</span><span class="p">,</span> <span class="nx">$injector</span><span class="p">,</span> <span class="nx">$location</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$rootScope</span><span class="p">.</span><span class="nx">$on</span><span class="p">(</span><span class="s2">"$locationChangeStart"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">next</span><span class="p">,</span> <span class="nx">current</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'current='</span> <span class="o">+</span> <span class="nx">current</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'next='</span> <span class="o">+</span> <span class="nx">next</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
<span class="p">});</span>
});
this route listener just prints to console the current and next routes prior to navigating to the new route.