Tuesday, March 25, 2014

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:

image

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

image

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:

image

image

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.

image

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.

5 comments:

Hel Stone said...

I found your blog incredibly useful. Recommend to also get acquainted with these persuasive essay topics to write a good paper.

Dakota Leest said...

I can use free pre written essays. When I need to write an essay, I order it. Many writers can quickly write for me anything on any topic.

meldaresearch said...

Dentistry Research Paper Writing Services have come up with Dentistry Writing Services for dentistry coursework writing service students in order for them to score straight A’s in their dentistry paper writing services.

IT said...

The development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. machine learning projects for final year In case you will succeed, you have to begin building machine learning projects in the near future.

Projects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.


Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.


The Nodejs Training Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

Anu said...

Very well written post. Thanks for sharing this, I really appreciate you taking the time to share with everyone. PMP Certification