Angular.JS 404 page Single Page App

Question

Can anyone point me in the right direction on how to make a "404 - page not found" tutorial for a Single page app in angularJS.

Or even better explain how this can be achieved.

There doesn't seem to be much on the internet regarding this.

Answer 1

In an Angular SPA using the native router, if a route is not found it will hit the $routeProvider.otherwise() method thus loading a view for a route that would have typically 404'ed if delivered from a server.

angular.app('application', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {

        // If route is not configured go to 404 route
        $routeProvider.otherwise('/404');

        $routeProvider.when('404', { /* route configuration */ });

    });

The only disadvantage here is that the URL pushstate is also changed, however that would have typically happened anyway if redirected to a custom 404 by a server.

Answer 2

I would not look at it as 404 page.

In your SPA (Single page app) you could make multiple API calls that independtly update widgets on a dashboard, which 9 out of 10 are successful (200's) and one fails (404), in that case you do not want to redirect users.

As David Barker said you have a otherwise that is a catch-all page.

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/login', {
        templateUrl: 'login.template.html',
        controller: 'LoginController'
      }).
      when('/', {
        templateUrl: 'dashboard.template.html',
        controller: 'DashboardController'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

So if a user enters a incorrect route then go to the dashboard, the only problem is feedback:

1: You need a messaging service to feedback that the actual API 404 has had an error response and that can be managed using a interceptor, directive and model.

2: You can feedback a error message by using a run method and the same directive and model that look for $routeChangeError then adds a error message

I hope that helps.