Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debug route provided to routeProvider

Tags:

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

like image 223
Ray Brack Avatar asked Jan 18 '15 21:01

Ray Brack


People also ask

How do we set a default route in $routeProvider?

Creating a Default Route in AngularJS The below syntax just simply means to redirect to a different page if any of the existing routes don't match. otherwise ({ redirectTo: 'page' }); Let's use the same example above and add a default route to our $routeProvider service. function($routeProvider){ $routeProvider.

What is dollar route provider?

We use $routeProvider to configure the routes. The config() takes a function that takes the $routeProvider as a parameter and the routing configuration goes inside the function. The $routeProvider is a simple API that accepts either when() or otherwise() method. We need to install the ngRoute module.

What is Route reload ()?

Using reload() method: Angular route service reload() method is used when we want just the current route to be reloaded instead of making our entire application reloading or refreshing.

Which event defined by the route service is triggered after the route has changed?

The $on() method is an event handler, the event which will handle $routeChangeSuccess which gets triggered when route/view change is done.


1 Answers

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

like image 119
Stephen J Barker Avatar answered Oct 22 '22 23:10

Stephen J Barker