"External" navigation to correct angular.js url (direct link/refresh/etc)

Question

I am developing an angular app and have quick question. As a 'single page app' angular 'takes over' the URL mappings, so I can navigate from "/" -> '/about' etc, and navigations all happen on the client in a single page.

What I am trying to figure out is how to get to the correct page on the client when the client navigation is bypassed. So for instance, instead of going to http://www.myapp.com, then clicking 'about' and going to 'http://www.myapp.com/about', how do I handle the user going directly to 'http://www.myapp.com/about', I can obviously redirect them to the "/" but I'd still like them to 'end up' at '/about' as that's what they'ed expect. Similarly, there's the same issue on a refresh. If I'm sitting at '/about', and do a browser refresh, that request is going to '/about' on the server and bypassing the app, so again, need to I guess, reload the app at the root, but still make it back to /about.

Thanks In Advance.

EDIT: Thanks for there responses, I think maybe I haven't asked the question clearly. I understand routing, etc within my angular app. So setting it up to say load 'partials/about.html' when an '/about' href is clicked. My issue is that assuming that that is already working, a user goes directly to 'www.myapp.com/about'. The angular application 'lives' on the root. So presumably, the server would do a redirect to '/'. That loads the app but doesn't 'set' angular to the route that the user expected. So the question, is there someway to tell the app "When you load, go to /about" perhaps based on the referrer or something.

Answer 1

What server are you using ?

You can create a catch-all route in your router. Like match '*' => 'Angular#App' (Rails)

or (express)

app.use(function (req, res) {
  res.writeHeader(200, {'Content-Type': 'text/html'});
  res.end(indexFileContent);
});