#501 Handle 404 errors at Express backend at at Angular frontend

- `/{api|modules|lib}/*` returns error page when path doesn’t exist
(from Express).
- `/*` always returns index (from Express), but if `$state` doesn’t
exist, Angular redirects to `/not-found` (no 404 status in that case
though!)
- If `Accept: application/json` header is present without `Accept:
text/html`, return error as json. Hence looking at non existing /api/*
paths with browser would show html error, but querying them with script
would return json.
- Slightly prettier 404 error

Test:
```bash
curl http://localhost:3000/api/notfound -4 -H "Accept: application/json"
```
=> json error.

```bash
curl http://localhost:3000/api/notfound -4 -H "Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0
.8"
```
=> html error (imitates Chrome’s Accept header).

Starting point was @dotch’s PL: #503

And `req.accepts()` idea came from http://stackoverflow.com/a/9802006

Author: simison

modules/core/client/config/core.client.routes.js

@@ -3,14 +3,19 @@
 // Setting up route
 angular.module('core').config(['$stateProvider', '$urlRouterProvider',
 	function($stateProvider, $urlRouterProvider) {
-		// Redirect to home view when route not found
-		$urlRouterProvider.otherwise('/');
+
+		// Redirect to 404 when route not found
+		$urlRouterProvider.otherwise('not-found');
 
 		// Home state routing
 		$stateProvider.
-		state('home', {
-			url: '/',
-			templateUrl: 'modules/core/views/home.client.view.html'
-		});
+			state('home', {
+				url: '/',
+				templateUrl: 'modules/core/views/home.client.view.html'
+			}).
+			state('not-found', {
+				url: '/not-found',
+				templateUrl: 'modules/core/views/404.client.view.html'
+			});
 	}
 ]);

modules/core/client/views/404.client.view.html

@@ -0,0 +1,6 @@
+<h1>Page Not Found</h1>
+<div class="alert alert-danger" role="alert">
+	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+	<span class="sr-only">Error:</span>
+	Page Not Found
+</div>

modules/core/server/controllers/core.server.controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * Render the main applicaion page
+ * Render the main application page
  */
 exports.renderIndex = function(req, res) {
 	res.render('modules/core/server/views/index', {
@@ -19,10 +19,25 @@ exports.renderServerError = function(req, res) {
 };
 
 /**
- * Render the server not found page
+ * Render the server not found responses
  */
 exports.renderNotFound = function(req, res) {
-	res.status(404).render('modules/core/server/views/404', {
-		url: req.originalUrl
-	});
+	res.status(404);
+
+	// Respond with html page
+	if (req.accepts('html')) {
+		res.render('modules/core/server/views/404', {
+			url: req.originalUrl
+		});
+		return;
+	}
+
+	// Respond with json to API calls
+	if (req.accepts('json')) {
+		res.json({ error: 'Path not found' });
+		return;
+	}
+
+	// Default to plain-text
+	res.type('txt').send('Path not found');
 };

modules/core/server/views/404.server.view.html

@@ -2,7 +2,9 @@
 
 {% block content %}
 <h1>Page Not Found</h1>
-<pre>
+<div class="alert alert-danger" role="alert">
+	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+	<span class="sr-only">Error:</span>
 	{{url}} is not a valid path.
-</pre>
+</div>
 {% endblock %}