AngularJS otherwise route not working? - angularjs

Question

My AngularJS redirects look like this:
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Home of PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/about.html',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
}]);
What I need is for the script to route me to 404.html when an undefined slug is entered in the URL. So if the user enters mysite.com/#/about, it should show him the about.html page. This bit works fine. But when the user enters, say, mysite.com/#/abc, it should show him the 404.html page as I have defined in my .otherwise and .when('/notfound') directives. But although the .when('/notfound') bit is working, the .otherwise bit isn't. Is there something I'm missing?

Answer 1

I think you should modify same as:
.otherwise({
redirectTo: '/notfound'
}
Reference here

Answer 2

.when and .otherwise are two different things.
.when defines a route
.otherwise sets the default route when a route hasn't been created.
$routeProvider.otherwise source code
You have two options.
Take out the route path
$routeProvider
// ... other routes
.otherwise({
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
or define the 404 route using .when and pass the route path into .otherwise.
$routeProvider
// ... other routes
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound');
Hope this helps!
Let me know if you have any questions.
EDIT
// As of Angular 1.3
.otherwise('/notfound')
// is short hand for
.otherwise({redirectUrl: '/notfound'})

Answer 3

You can use redirectTo:
.otherwise({
redirectTo: '/notfound'
});