Using $routeProvider to redirect to routes outside of Angular

Question

I\'ve written part of a web application in Angular. To ensure that all routes are covered, I wanted to add a redirectTo property to the $routeProvider

Answer 1

None of the answers including the marked answer worked for me. I believe my solution solves your problem as well and I'd share my use-case as well for future readers' reference.

Issue with using the route controller method: When the controller is loaded the routing already have accessed the History API states for me (I use HTML5 mode, not sure whether this affects non-HTML5 mode).

As a result, even though I can forward people to the correct page using window.location.replace('/');, if the user then clicks Back on their browser, it goes to invalid state.

Scenario: We implement multi-page model and I have my admin page module separate from my homepage (non-admin) modules. I have a $location.path('/') somewhere in one of my admin controller, but since homepage isn't packaged into the admin page module, I want to force full page reload when I detect the '/' route.

Solution: We have to intercept at the $routeChangeStart before ngRoute accesses any of the state info. This way we can even specify external href by passing url to redirectTo param in the $route

angular.module('app',['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/admin/default', {template: somePageTemplate})
  /*
   *  More admin-related routes here...
   */
  .when('/',{redirectTo:'/homepage'})  // <-- We want to intercept this
  .otherwise({redirectTo: '/admin/default'}); 
}])
.controller('MainCtrl',[ // <- Use this controller outside of the ng-view!
  '$rootScope','$window',
  function($rootScope,$window){
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
      // next <- might not be set when first load
      // next.$$route <- might not be set when routed through 'otherwise'
      // You can use regex to match if you have more complexed path...
      if (next && next.$$route && next.$$route.originalPath === '/') {
        // Stops the ngRoute to proceed
        event.preventDefault();
        // We have to do it async so that the route callback 
        // can be cleanly completed first, so $timeout works too
        $rootScope.$evalAsync(function() {
          // next.$$route.redirectTo would equal be '/homepage'
          $window.location.href = next.$$route.redirectTo;
        });
      }
    });
  }
]);

Please provide any feedback as I will be using this code myself. Cheers

Reference: https://github.com/angular/angular.js/issues/9607