How can I get AngularJS to work with the ServiceStack FallbackRoute attribute to support pushstate Urls HTML5?

Question

I am creating a client / server solution using a Singleular application in AngularJS format as a client component and SelfStore ServiceStack RESTful API as a server component. One Visual Studio console application project contains HTML and JavaScript files for the AngularJS component, as well as C # classes to bootstrap the ServiceStack AppHost (I shared the responsibilities of the interface and the service to separate Visual Studio projects).

I set the assembly action for all HTML and JavaScript files to None and Copy to output directory in Copy if new.

Everything works very well, as long as I’m ready to put up with the presence of a “#” on my website URLs. I would like to eliminate this using HTML5 pushstate URLs.

Effectively, this means that I need to convince ServiceStack to serve my HTML shell page with a single default page whenever a non-existent route is requested. The FallbackRoute attribute is now available on the ServiceStack here , here and here . But all the answers were received before the new FallbackRoute attribute.

Essentially, I'm looking for a simple but complete example of how to use the FallbackRoute attribute to ensure that any requests for non-existent routes are redirected to a single static HTML page.

Answer 1

It turns out that all this is very simple with the functionality of FallbackRoute, as soon as you start using it correctly:

[FallbackRoute("/{Path*}")] public class Fallback { public string Path { get; set; } } public class FallBackService : Service { public object Any(Fallback request) { return new HttpResult(new FileInfo("index.html")) {ContentType = "text/html"}; } } 

Once this happens, I find that index.html really works when I try to get on a nonexistent route.

All static files, such as JavaScript and CSS resources, are obtained in the normal mode (provided that they have the option "Copy to output directory" "Copy if it is new").

This works like a charm with HTML5 Push-state functionality in AngularJS.

Answer 2

RazorRockstars.Web has an implementation. I will modify it to use the default lookup template and view:

 [FallbackRoute("/{Path*}")] public class Fallback { public string Path { get; set; } public string PathInfo { get; set; } } public class RockstarsService : Service { [DefaultView("Index")] public object Any(Fallback request) { request.PathInfo = base.Request.PathInfo; return request; } // ... } 

Since this is a service, it requires a view page ( here) , not a content page.

In the RockStars example, I cannot determine which view will be displayed for FallBackResponse, but explicitly specifying the view should be all you need.

The [DefaultView("Index")] attribute added to the Any method displays the response to the Views / Index.cshtml file. The Index.cshtml file may be empty, but for the template declaration, and the full markup for your one-page application may be in your template file (i.e. _Layout.cshtml)

Without razor

Read the html in the line and return it by setting the content type to text / html with the attribute, see wiki docs when returning the service types

 public class RockstarsService : Service { static string readContents; [AddHeader(ContentType = "text/html")] public string Any(Fallback request) { // check timestamp for changes for production use if (readContents == '') { using (StreamReader streamReader = new StreamReader(pathFromConfigFile, Encoding.UTF8)) { readContents = streamReader.ReadToEnd(); } } return readContents; } // ... }