Setting up AngularJS with ASP.Net MVC and Web API 2.0

I spent some time looking up how to setup AngularJS with ASP.Net MVC and Web API and everyone had a very partial implementation, and most didn’t show setting up MVC routing with client side routing.

Here are some quick steps to get started

Create a new project:

On the next UI, select Empty and check “MVC” and “Web API”:

Before doing anything else, update all packages. The packages that are installed by default are those in your template directory, NOT from Nuget.org, so they are most likely out of date.

Once your packages are updated, lets create an Empty MVC 5 Controller called Home:

For now, this is all we want to do here, next, lets create a View for that controller in Views/Home/. For simplicity sake, uncheck the Use layout page.

Now we have our “Home” page, compiling and navigating to the root URL will give you the page we just created, but now we want angular support.

For the brevity of this article, I am not going to go into any AngularJS specifics here, I am only going to show you how to configure your ASP.Net application to support client side routing.

Open up the RouteConfig.cs inside the App_Start directory and change the routing to look like this:

        public static void RegisterRoutes(RouteCollection routes)
        {
            // ignores
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            // mvc [Route] attribute support
            routes.MapMvcAttributeRoutes();

            // default route goes to our angularjs page
            routes.MapRoute(
                name: "AngularJS",
                url: "{*any}",
                defaults: new { controller = "Home", action = "Index" }
            );
        }

And there you have it, the index.cshtml in the Views/Home directory is now your “AngularJS” home page, and you have full support for client side routing and server side boostrapping of application resources and initialization data.

In the next article, I will dive deeper into this sample, and include integrating AngularJS into this site.

You can find the code used in this Blog Post on my GitHub Repository.