Angularjs – Debug route provided to routeProvider

angularjsangularjs-routing

I am new to AngularJS and am attempting to debug some of my routes but I don't know how to display/view the route passed to the routeprovider.

For example if my current routing is set up as follows;

reportFormsApp.config(function ($routeProvider) {
    $routeProvider
        .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" })
        .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" })
        .when("/Analysis",  { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" })
        .otherwise({ redirectTo: "/Reporting" })
});

When debugging I want to break the code and in the console log enter something like;

$routeProvider.path

to display the route as it would be evaluated by the ".when".

Best Solution

You can listen to multiple events emitted by the $route service. These events are:

  • $routeChangeStart
  • $routeChangeSuccess
  • $routeChangeError
  • and, $routeUpdate

(I would encourage reading the docs provided by the link for descriptions of each.)

At this point you can listen for one or all of these events on the $scope of one of your controllers or directives, or by injecting $rootScope into your angular.module().run() function or another service/factory.

For example, as an addendum to your provided code:

reportFormsApp.config(function ($routeProvider) {
  $routeProvider
    .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" })
    .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" })
    .when("/Analysis",  { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" })
    .otherwise({ redirectTo: "/Reporting" })
});

reportFormsApp.run([
  '$rootScope',
  function($rootScope) {
    // see what's going on when the route tries to change
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
      // next is an object that is the route that we are starting to go to
      // current is an object that is the route where we are currently
      var currentPath = current.originalPath;
      var nextPath = next.originalPath;

      console.log('Starting to leave %s to go to %s', currentPath, nextPath);
    });
  }
]);

You can also access the rest of your $routeProvider objects as well such as current.templateUrl or next.controller.

Note concerning redirectTo: There is one object exception to using the $route service events and that is when there is a redirect. In this case, next.originalPath will be undefined because all you will have is the redirectTo property you defined in otherwise(). You will never see the route that the user tried to access.

So, you can listen to the $location service's $locationChangeStart or $locationChangeSuccess events:

reportFormsApp.run([
  '$rootScope',
  function($rootScope) {
    // see what's going on when the route tries to change
    $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
      // both newUrl and oldUrl are strings
      console.log('Starting to leave %s to go to %s', oldUrl, newUrl);
    });
  }
]);

If you use HTML5Mode then there will be two other arguments provided by the $locationChange* events. Those are newState and oldState.

In conclusion, listening to the $route* events will likely be your best bet for debugging objects and definitions you provide in your $routeProvider. However, if you need to see all url's being attempted, the $locationChange* events will need to be listened to.

Current as of AngularJS 1.3.9

Related Question