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, so that invalid routes are returned to the root of the web application, which doesn't use Angular.

I tried:

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

but obviously this only routes in the Angular controlled portion of the URL, so users would be redirected to a URL like http://app.com/angular-part-of-web-app#, instead of http://app.com, where I'd like them to go.

I've worked around this by having a blank partial to act as a '404' page, and then a controller which just uses the $window object to redirect to the desired page:

routes.js

// Redirect to site list.
$routeProvider.when('/404', {
    templateUrl: '/partials/404.html',
    controller: 'RedirectCtrl'
});

// Redirect to the 404 page.
$routeProvider.otherwise({
    redirectTo: '/404'
});

controllers.js

// Controller to redirect users to root page of site.
.controller('RedirectCtrl', ['$scope', '$window', function ($scope, $window) {

    $window.location.href = '/';
}]);

However, this is setting off the 'too hacky, must be a better way' alarm bells. Is there a better way to do this in Angular?

EDIT: Angular routes - redirecting to an external site? didn't yield an answer to the same question. I'm going to leave my question open instead of marking it as a duplicate (for now), as with the Angular world moving so fast, the previous answer may no longer be the case.

Answer 1

The above solution with /404 does not work for me. This however seems to work

.otherwise({
    controller : function(){
        window.location.replace('/');
    }, 
    template : "<div></div>"
});

PS. I am using Angular 1.2.10

Answer 2

Not sure what version of Angular JS the accepted answer was written on, but 'redirectTo' property takes in a function. So, why not do something simpler like this:

$routeProvider.otherwise({
    redirectTo: function() {
        window.location = "/404.html";
    }
});

Obviously, you have to create your own 404.html. Or wherever your 404 page is.

Answer 3

You could do something like this:

$routeProvider.when('/404', {
    controller: ['$location', function($location){
        $location.replace('/');
    }]
}).otherwise({
    redirectTo: '/404'
});

It is essentially the same thing, only it uses less code.