Handling Routes Between An AngularJS Application and ASP.NET MVC Application

In this article I will discuss how to handle routing between an AngularJS application that is created within an ASP.NET MVC application. You might have an existing ASP.NET MVC web application that is working all fine but would like to add a Single Page Application using AngularJS to the ASP.NET MVC web application and still allow you to access pages from your angular application and MVC application and vice versa from the same website. While this can be easily achieved with the hash sign (#) that angular routes provide support for by default, the urls generated are not SEO friendly. So you might want to set html5mode to true in angular to allow HTML5 browsers to serve angular pages without adding the hash sign to the urls in the address bar. Since you have an existing ASP.NET MVC application that uses its own routes, adding angular routes that no longer use the hash sign and making it all work can be tricky. Now you have to consider routing back and forth between angular routes and non-angular routes (ASP.NET MVC routes) on the same site.

I will use the default ASP.NET MVC application created in Visual Studio 2013 as an example.

In Visual Studio 2013, create an ASP.NET MVC application project and name it AngularRoutingDemo. I assume you are using IIS to host the website and not the Visual Studio internal IIS server that allocates a port number for your site. So, the address of the site I have configured on IIS is http://localhost/AngularRoutingDemo.

Read More here.