$route.routes prints URLs twice ,why?

Question

i have created a basic app to learn angularJs routing. When i printed $routes.route to the browser console , this is what i saw :

And this is my route configuration :

almRequirement.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl : 'home.html',
        controller : 'homeController'
    }).when('/addRequirement', {
        templateUrl : 'addRequirement.html',
        controller : 'addRequirementController'
    }).when('/addModule', {
        templateUrl : 'addModule.html',
        controller : 'addModuleController'
    }).when('/addContraint', {
        templateUrl : 'addContraint.html',
        controller : 'addContraintController'
    }).when('/viewRequirement', {
        templateUrl : 'viewRequirement.html',
        controller : 'viewRequirementController'
    }).when('/updateRequirement/:reqId', {
        templateUrl : 'updateRequirement.html',
        controller : 'updateRequirementController'
    }).when('/viewParticularRequirement/:reqId', {
        templateUrl : 'viewParticularRequirement.html',
        controller : 'viewParticularRequirementController'
    });
});

Each URL configured in $routeProvider.config() is shown twice.Can anyone explain me why is it so ?

May be this would help me debug my application next time.

Answer 1

This is by design in Angular. $routeProvider.when() adds a "redirect" to the user-specified path so with or without a trailing slash goes to the same place.

As the source code states:

@param {string} path Route path (matched against $location.path). If $location.path contains redundant trailing slash or is missing one, the route will still match and the
$location.path will be updated to add or drop the trailing slash to exactly match the route definition.

And here is the source code for when() demonstrating that (my /**** comments ****/ added):

this.when = function(path, route) {
    //copy original route object to preserve params inherited from proto chain
    var routeCopy = shallowCopy(route);
    if (angular.isUndefined(routeCopy.reloadOnSearch)) {
      routeCopy.reloadOnSearch = true;
    }
    if (angular.isUndefined(routeCopy.caseInsensitiveMatch)) {
      routeCopy.caseInsensitiveMatch = this.caseInsensitiveMatch;
    }

    /**** Add route as user specified it ****/

    routes[path] = angular.extend(
      routeCopy,
      path && pathRegExp(path, routeCopy)
    );

    // create redirection for trailing slashes
    if (path) {
      var redirectPath = (path[path.length - 1] === '/')
            ? path.substr(0, path.length - 1)
            : path + '/';

      /**** Add route with / added or stripped ****/

      routes[redirectPath] = angular.extend(
        {redirectTo: path},
        pathRegExp(redirectPath, routeCopy)
      );
    }

    return this;
  };