AngularJS with Web API 2

In this brief tutorial I going to shop you how to set up a C# AngularJS with Web API 2. This tutorial does not aim to show you the ins and outs of AngularJS (or Web API 2) as this has been done in many other articles, including some of my own. The goal is simply to set you up to work with AngularJS and Web API.

Let’s dive straight in. I’m using Visual Studio 2013 but the basic steps will be fairly similar with most of the latest versions.

Create a new Web Application

Fire up your version of Visual Studio and create a new web application (by the way, I will be using C#).

create new c# web application

Make sure you select an empty project with Web API ticked.

empty web api

AngularJS

Now we need to get AngularJS into our project. Few different ways to do this but I’m going to use the NuGet Package Manager. From the top menu select Tools then NuGet Package Manager, then Manage NuGet Packages for Solution.

nuget package manager

Type Angular in the search box and click install on the entry for AngularJS Core

angularjs

Ok with that done let’s get into some code

The Model

For our tutorial we are going to use a simple model, but from this basic beginning you should easily see how you could implement Entity Framework very easily. Anyway, right-click on the models and create a class; call it Product.

Depending on how you created the class make sure that it has the “public” access modifier. Ok now we need to create the Web API controller, so right-click on the controllers folder and select Add Controller. Call it ProductsController

new empty web api controller

At the top we need to add a using statement for our model.

Next we are going to instantiate our model and create a method to get the list

With that done we can look at our html page and AngularJS.

HTML Page

First create a new HTML page called index. Then, in the solution explorer, create a sub-folder in the Scripts folder called Controllers. Then inside that create a new javascript file called controllers.js.

controllers javascript

Go back to your index.html file and add the following script tags in the head section.

In the <html> tag at the top add¬†ng-app=”productsApp” after the xmls declaration. This is an AngularJS directive that states the html element is the root of our AngularJS application. In the body tag add the following.

This might look complicated but it really isn’t. It’s just standard html mark up (with some Bootstrap css) but you will notice ng-controller in our top div statement. ng-controller attaches our controller (which we will create shortly) to our view: the html code. We are then using a ng-repeat directive to loop through our data. Finally we have bound properties using the {{}} syntax.

AngularJS Controller

Now for the fun bit. Open up your controllers.js file and enter the following

Right away you should see that this is fairly straight forward code. At the top we declare our module (if you recall we use this name in the ng-app tag in the index file). Next we define the controller. The important statement in here is the $http.get which takes the path of our Web API controller that will return all the products.

If you now save the file and run the solution you should see the following

running-web-api

This has been a pretty simple demonstration, but it should be enough to get you going and implement the many other features of AngularJS. In the next part we will talk about routing

1 thought on “AngularJS with Web API 2

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.