Angular.JS 404 Pages Single Page Application

Question

Can someone point me in the right direction on how to make the “404 - page not found” tutorial for a single page application in angularJS.

Or better yet explain how this can be achieved.

On the Internet, it seems, not so much.

Answer 1

I would not look at it as a 404 page.

In your SPA application (single-page application), you can make several API calls that update widgets on the control panel themselves, of which 9 out of 10 are successful (200) and one does not (404), in which case you do not want to redirect users .

Like David Barker said you have otherwise , which is a shared 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 the user enters the wrong route, go to the control panel, the only problem is the feedback:

1: you need a messaging service for feedback that the actual API 404 has an error response and that can be controlled using an interceptor, directive, and model.

2: you can send an error message using the start method and the same directive and model that look for $ routeChangeError, then adds an error message

I hope this helps.

Answer 2

In Angular SPA, using its own router, if the route is not found, it will fall into the $routeProvider.otherwise() method, thus loading the view for the route, which usually should have been 404 if it was delivered from the 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 drawback here is that the pushstate URL is also changed, however this usually happened anyway if the server redirected to user 404.