angular $locationChangeStart

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:

return app.config(['$routeProvider', function($routeProvider) {

    <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.



comments powered by Disqus