Hi,

I'm building a website that uses Angular to create a SPA and I'm having some trouble coming up with a good routing solution.

The way I’ve designed it the Angular routing file is generated from the Episerver pages. So for example the Episerver login page with the path /login has the same path in the Angular routing file.

The Episerver routes all return Angular views which works fine as long as the users visits the Startpage first (that’s where the Angular app initializes). But when users have bookmarks or follow links from external sources they will only get an empty Angular view returned.

To solve this, I’m thinking I could use http headers to separate calls from the Angular app and regular http gets. So the Angular app would add a header like: “X-Angular-app: this-is-an-angular-call” and when calls are made with that header the Angular view is returned. If no Angular-app header is present, then a server transfer to the Startpage will be run allowing the Angular app to initialize and then load the path the user tried to reach.

I’ve looked at the following solution http://stackoverflow.com/questions/10096605/with-mvc3-how-can-i-change-the-controller-action-based-on-the-accept-header. But it seems like you can’t use a Route object when routing to Episerver mapped content.

So is there a way to create a “route” that runs different controller actions depending on http request headers for Episerver content?

If not, is there a better way to solve the routing issue? :)