The Project Objective:
In this example I will try to show a basic interaction between a UI created by the Angular JS and an MVC Web API service.
1) Create the Service Project:
Using VS 2013, create a WebApi project called MvcAngular.WebApi. I have called the solution MvcWithAngularSolution. The images below show can be used as a guideline.
 |
| Image 1 |
 |
| Image 2 |
public class Pet
{
public int Id { get; set; }
public string Name { get; set; }
public string PetType { get; set; }
public int Weight { get; set; }
}
3) Delete the ValueController from the Controllers folder.
4) Create a new "Web API 2 Controller with read/write actions" in the Controllers folder. Call it PetApiController.
 |
| Image 3 |
 |
| Image 4 |
 |
| Image 5 |
 |
| Image 6 |
7) Before we move on, it is well worth to test the service. To do so, run the project in the development environment by hitting Ctrl-F5. Once the landing page appears add /api/PetApi for the first test and then /api/petApi/2 for the 2nd test. The first test should display all pets in the browser (see Image 7) while the 2nd test will display Id, Name, PetType and the Weight of pet with Id = 2 (see Image 8). Please do not proceed until both of these tests are working satisfactorily.
 |
| Image 7 |
 |
| Image 8 |
8) We are done with the back-end. Let's think about the UI. For this project, we need to have 2 views; a list view and a details view. Let add 2 actions to the Home MVC controller: PetsList() and PetById(). Image 9 below shows these actions (also not that I have changed the Index() action to be consistent with the new actions):
9) Now we need to create 2 views, one for each action; PetsList.cshtml and PetById.cshtml. Just right click inside each action and select "Add View". Accept all details and click the OK. Image 10 below shows the views created for these actions.
 |
| Image 10 |
10) At this stage we need to add 2 buttons to the landing page (and remove all unnecessary stuffs) and connect their click actions to the controller actions we just created. So change the index.cshtml in Views > Home folder so that it looks like the following:
 |
| Image 11 |
11) At this stage if you run the application, you we should see screens similar to Image 12 - Image 14 below:
 |
| Image 12 |
 |
| Image 13 |
 |
| Image 14 |
 |
| Image 15 |
 |
| Image 16 |
14) At this stage we need to ensure that AngularJS is installed and configure correctly and it is actually working. The test is simple: we will see if a basic angular expression such as {{ 2 + 3 }} is handled correctly. You just need to add this one of your views, if the view shows "5" the you are good, if not need to go back and see what got messed up! Image 17 highlights the test and Image 18 shows the test result.
 |
| Image 17 |
 |
| Image 18 |
 |
| Image 19 |
16) Now it is time to modify the view files so that they can use the controller module. The first step is to tell the views to use the PetsApp module. This is simple done by modifying the ng-app directive in the html tag i _Layout.cshtml. You need to change the directive from "ng-app" to "ng-app='PetsApp'". No need to say that you also need to add a reference to the controller file in "app" subfolder. See Image 20 below.
 |
| Image 20 |
17) We need to modify both the PetsList.cshtml and PetById.cshtml views as shown in Image 21 below.
 |
| Image 21 |
18) Now it is time to run the application and see if it works. You should have the following series of screens.
Conclusion:
The UX/UI is not great at all. But the purpose of this post was not to show you how to create a great User Interface. The purpose was to focus on getting the AngularJS to work with the WebApi. And this is exactly what this solution does. Basically we passed the Web Service URL to the AngularJS $http service in the AngularJS controller.
