AngularJS Tutorial and .Net Web API (part 1)

This is the start of a series of posts aimed at getting the official AngularJS tutorial running on top of the .Net Web API framework . 

I would probably suggest doing the whole AngularJS tutorial first, however you could start with http://docs.angularjs.org/tutorial/step_00, following the instructions and the tutorial up to our jumping off point, step 5 (http://docs.angularjs.org/tutorial/step_05 XHRs and Dependency Injection) and then follow both these posts and the AngularJS tutorial at the same time (which you'll probably need to do anyway).

In this first post I'll get the code running using the Web API and in the next one I'll tidy things up a bit so that the solution uses a few more of the features of the .Net Web framework.  You can clone the code from github 'git clone git@github.com:stevef4000/angular-and-web-api.git'. 

There are a couple of missing references  - Newtonsoft.Json and Microsoft.Web.Mvc.FixedDisplayModes - as they were added in the packages folder, which is excluded by the .gitignore file.  The missing Newtonsoft reference will cause the build to fail, so use NuGet to search for Json.Net and install it.  (You can search for FixedDisplayModes and install that as well, but it shouldn't affect the code).

If you just want to read the finished code, use 'git checkout -f step5' to get the correct commit that matches this post. Or you can follow this post in conjunction with the AngularJS tutorial and work from scratch.

So, if you were going from scratch you would ...
Create a new ASP.Net MVC4 Web Application "AngularJSWithWebAPI" using the 'Empty' template.  Use NuGet to install AngularJS.  You should now see a 'Scripts' folder at the root level of your website which contains a lot of Angular code.  (Note that the location of this code is not in keeping with the file structure for the Angular Seed project, but I will stick with this for these blog posts.  In terms of file layout, this may well not be the 'correct' way to do things.  The code still works though).

Add a new controller 'Home' to the controllers folder.  Choose the 'Empty MVC controller' template.
Add the matching 'Index' view for the automatically created ActionResult 'Index'.  Uncheck the 'Use a layout or master page' check-box, as we're just going to focus on the interaction bedtween AngularJS and the WebAPI so we'll keep the project very simple - one page/file that contains all the references it requires. Paste the code from the AngularJS 'app/index.html' file into your Home/Index.cshtml view.

Copy the 'app/js/controllers.js' file from the Angular tutorial directory into the 'Scripts' directory
Change the 'script src' tags in the head of the Index.cshtml view to:

  <script src="~/Scripts/angular.js"></script>
  <script src="~/Scripts/controllers.js"></script> 

Add a new folder called 'Content' to the root level of your MVC project.  Copy the app/css/app.css and bootstrap.css files from the AngularJS project to this folder and add them (via add existing item) to your project).  Change the link to the stylesheets at the top of the Index.cshtml file to:
  <link rel="stylesheet" href="~/Content/app.css">
  <link rel="stylesheet" href="~/Content/bootstrap.css">
 
Again, we're not using the power of the .Net MVC framework to use script and style bundles here, because I want to focus on getting the application using the Web API without a lot of other magic going on.
 
Add a new controller 'Phones' to the controllers folder.  Choose the 'Empty API controller' template.  Create a new method 'GetAll', that looks like this:

public HttpResponseMessage GetAll()
{
 return new HttpResponseMessage
  {
   Content = new StringContent(_rawJson, Encoding.UTF8, "text/html")
  };
}

The private variable _rawJson comes directly from the 'app/phones/phones.json' file in the AngularJS repo and is best got from the code in the git repo (as it's so big and ugly I don't want to paste it here). This method simply returns a string to the client-side app, bypassing the cleverness of the WebAPI.

Your application should now work and look like the live demo of the application http://angular.github.io/angular-phonecat/step-5/app/

What we've done is to neatly side-step all the clever JSON formatting that the framework gives us in order to get the tutorial up and running as quickly as possible, while at the same time keeping it very similar to the original AngularJS tutorial.  In a real-world application you wouldn't have a massive string sitting in your controller (I hope).  In the next post, I'll move to something a bit more maintainable that uses the smarts of the Web API to better effect.