Angular routes - redirecting to an external site?

Question

In an AngularJS routes file there is the option for an otherwise route, replacing a 404:

$routeProvider
.when(...)
.otherwise({
    redirectTo: 'my/path'
});

Is there a way to do this such that the otherwise redirects to a page that is not in the app? I tried

$routeProvider
.when(...)
.otherwise({
    redirectTo: 'http://example.com'
});

but this jsut tried to redirect to that path in my app, which doesn't exist. The solution I know of is to do manual redirection in a $scope.$on('$routeChangeStart') in a top-level controller, but this is a lot of code duplication (and it's ugly). Is there a better way?

Answer 1

Just take a look at angular.js link behaviour - disable deep linking for specific URLs

and use this

target="_self"

<a href="link" target="_self" >link</a>

Answer 2

In my case, this worked for me:

$routeProvider
.when('/my-path', {
    ...typical settings...
}).
.otherwise({
        redirectTo: function(obj, requestedPath) {
            window.location.href = appConfig.url404;
        }
});

Answer 3

To my knowledge, this is not possible, as the routeProvider handles internal routes only.

What you can do though is

$routeProvider
.when(...)
.otherwise({
    controller: "404Controller",
    template: "<div></div>"
});

and then just use window.location.href = 'http://yourExternalSite.com/404.html' in the controller.

Answer 4

I won't recommend just using window.location.href in new controller as pointed in other answer because the ngRoute would have set the history to be pointing at the non-existent page (so when user clicks back it will keep redirecting to the 404 page). I tried and it failed.

I would like to point you to my related solution to another SO question here: https://stackoverflow.com/a/27938693/1863794

I adopted that and applied to your scenario. I don't think it's that bad of an idea to use MainCtrl outside of the ng-view since it'll be only declared once unless you have nested layers of ng-view... I don't see any code duplication either, you can place MainCtrl in a separate module if it bothers you so much:

.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when(..) 
  .otherwise({redirectTo: 'http://yourExternalSite.com/404.html'}); 
}])
.controller('MainCtrl',[ // <- Use this controller outside of the ng-view!
  '$rootScope','$window',
  function($rootScope,$window){
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
      // next.$$route <-not set when routed through 'otherwise' since none $route were matched
      if (next && !next.$$route) {
        event.preventDefault(); // Stops the ngRoute to proceed with all the history state logic
        // We have to do it async so that the route callback 
        // can be cleanly completed first, so $timeout works too
        $rootScope.$evalAsync(function() {
          // next.redirectTo would equal be 'http://yourExternalSite.com/404.html'
          $window.location.href = next.redirectTo;
        });
      }
    });
  }
]);

Cheers