Angular - UI Router Routes - HTML5 Mode

Question

I'm trying to use HTML5 push state links with my Angular app. What I have is a series of routes similar to the following

$stateProvider.state('product', {
    url: '/product/:productCode',
    templateUrl: 'product/product.html',
    controller: 'ProductCtrl'
    }
});

This works when I navigate to [host]/#/product/ABC123 - It displays the url in the browser as /product/ABC123, then when I start clicking through to my other routes (using ui-sref) everything works as expected.

However - I'd like the ability to both refresh the browser, and remain in the same state, as well as be able to copy and paste that link and route to the right state.

eg. If I got to [host]/product/ABC123 - I want to display the content from the #/product/ABC123 route. Currently, this will give me a not found.

I'm using nginx as my app server. I believe I'll have to add something to handle it at that level, but I'm not sure where to start.

Answer 1

The issue you have is that your server does not know how to respond to /product/ABC123.

I am currently using node.js for my backend with angular, and to solve this I return the angular app for all routes, not just the usual root route for example.

So you might have used something like this in the past:

app.get('/', ...);

Which would have returned the angular app just for the root route. Now I use something like:

app.get('*', ...);

Which will return the angular app for all routes.

---

I should have mentioned that this can act as a catch all placed after other routes such as for static files. Another alternative is to mark all the routes you want specifically for the angular app, eg:

app.get('/', ...); app.get('/product/:productId', ...); etc