Route change observer

Route change observer example

by masudcsesust04

HTML

<script type="text/ng-template" id="partials/foo">
    Foo content 
</script>
<script type="text/ng-template" id="partials/bar">
    Bar content
</script>

<div ng-controller="AppCtrl">
    <ul>
        <li><a href="#/foo?id=1">Foo</a></li>
        <li><a href="#/bar?id=2">Bar</a></li>
    </ul>
    <hr>
    <div ng-view></div>
         current: {{current}} <br />
        next : {{next}}
       
</div>

JavaScript

'use strict';

var app = angular.module('RouteApp', []);

app.config(function($routeProvider) {
       
    $routeProvider
    .when('/foo', {templateUrl:'partials/foo', controller:'AppCtrl'})
    .when('/bar', {templateUrl:'partials/bar', controller:'BarCtrl'})
});


app.controller('AppCtrl', ['$scope', '$route', '$location', function($scope, $route, $location){
    
    $scope.$on('$routeChangeStart', function(scope, next, current){
        console.log('Changing route from '+angular.toJson(current)+' to '+angular.toJson(next));
        
        $scope.current = $location.path(); //current.params.id;
        $scope.next = next.params.id;
    });
    $scope.current = '';
    $scope.next = '';
}]);

app.controller('BarCtrl', function($scope) {});