ASP.NET MVC - AngularJS, Web API And Entity Framework To Build SPA

Introduction

This article walks you through the steps to create a Web Application, using AngularJS, which uses WebAPI to communicate between client and Server side.

Step 1

Create ASP.NET Web API Application

Check the link given below to see all the steps to create a Web API wtih an Entity Framework code first implementation.

http://social.technet.microsoft.com/wiki/contents/articles/26795.asp-net-webapi-entity-framework-code-first.aspx

Step 2

Install NuGet

Now, in order to use an Entity Framework, we need to install a NuGet package.

In Visual Studio 2013, select the menu option given below.

Tools-> Library Package manager -> Manage NuGet Packages for the solution.

Search for AngularJS and select the option Install.

AngularJs

This option will automatically install the NuGet package.

Step 3

Create JavaScript Controller

Now, add a new JavaScript file (contactController.js) in scripts directory and add Angular functions.

JavaScript

  1. function contactController($scope, $http) {   
  2.     $scope.loading = true;   
  3.     $scope.addMode = false;   
  4.    
  5.     //Used to display the data   
  6.     $http.get('/api/Contact/').success(function (data) {   
  7.         $scope.Contacts = data;   
  8.         $scope.loading = false;   
  9.     })   
  10.     .error(function () {   
  11.         $scope.error = "An Error has occured while loading posts!";   
  12.         $scope.loading = false;   
  13.     });   
  14.    
  15.     $scope.toggleEdit = function () {   
  16.         this.Contact.editMode = !this.Contact.editMode;   
  17.     };   
  18.     $scope.toggleAdd = function () {   
  19.         $scope.addMode = !$scope.addMode;   
  20.     };   
  21.    
  22.     //Used to save a record after edit   
  23.     $scope.save = function () {   
  24.         alert("Edit");   
  25.         $scope.loading = true;   
  26.         var frien = this.Contact;   
  27.         alert(emp);   
  28.         $http.put('/api/Contact/', frien).success(function (data) {   
  29.             alert("Saved Successfully!!");   
  30.             emp.editMode = false;   
  31.             $scope.loading = false;   
  32.         }).error(function (data) {   
  33.             $scope.error = "An Error has occured while Saving Contact! " + data;   
  34.             $scope.loading = false;   
  35.    
  36.         });   
  37.     };   
  38.    
  39.     //Used to add a new record   
  40.     $scope.add = function () {   
  41.         $scope.loading = true;   
  42.         $http.post('/api/Contact/'this.newContact).success(function (data) {   
  43.             alert("Added Successfully!!");   
  44.             $scope.addMode = false;   
  45.             $scope.Contacts.push(data);   
  46.             $scope.loading = false;   
  47.         }).error(function (data) {   
  48.             $scope.error = "An Error has occured while Adding Contact! " + data;   
  49.             $scope.loading = false;   
  50.    
  51.         });   
  52.     };   
  53.    
  54.     //Used to edit a record   
  55.     $scope.deleteContact = function () {   
  56.         $scope.loading = true;   
  57.         var Contactid = this.Contact.ContactId;   
  58.         $http.delete('/api/Contact/' + Contactid).success(function (data) {   
  59.             alert("Deleted Successfully!!");   
  60.             $.each($scope.Contacts, function (i) {   
  61.                 if ($scope.Contacts[i].ContactId === Contactid) {   
  62.                     $scope.Contacts.splice(i, 1);   
  63.                     return false;   
  64.                 }   
  65.             });   
  66.             $scope.loading = false;   
  67.         }).error(function (data) {   
  68.             $scope.error = "An Error has occured while Saving Contact! " + data;   
  69.             $scope.loading = false;   
  70.    
  71.         });   
  72.     };   
  73.    
  74. }   

Step 4

Create View

On BundlesConfig file, add the lines of code given below.

C#

  1. bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(   
  2.                      "~/Scripts/angular.js",   
  3.                      "~/Scripts/contactController.js"));    

Open _Layout.cshtml page from shared folder and add these two lines to render AngularJS and contactController in an Application.

JavaScript

  1. @Scripts.Render("~/bundles/angularjs")    

Now, let’s work on View.

HTML

  1. @{   
  2.     Layout = "~/Views/Shared/_Layout.cshtml";   
  3. }   
  4.    
  5. <h2>Contacts</h2>   
  6.    
  7. <div ng-app="" ng-controller="contactController" class="container">   
  8.     <strong class="error">{{ error }}</strong>       
  9.    
  10.     <div class="row">   
  11.         <div class="logs-table col-xs-12">   
  12.             <table class="table table-bordered table-hover" style="width:100%">   
  13.                 <tr>   
  14.                     <th>Id</th>   
  15.                     <th>Name</th>   
  16.                     <th>Address</th>   
  17.                     <th>City</th>   
  18.                     <th>Country</th>   
  19.                 </tr>   
  20.    
  21.                 <tr ng-repeat="contact in contacts">   
  22.                     <td>{{ contact.Id }}</td>   
  23.                     <td>{{ contact.Name }}</td>   
  24.                     <td>{{ contact.Address }}</td>   
  25.                     <td>{{ contact.City }}</td>   
  26.                     <td>{{ contact.Country }}</td>   
  27.                 </tr>   
  28.             </table>   
  29.         </div>   
  30.     </div>   
  31. </div>    

Step 5

Run an Application

Run the Application to see the output.

output
Resources

Some good resources about Windows Azure can be found at

  • My personal blog: http://joaoeduardosousa.wordpress.com/
  • Angular UI:http://angular-ui.github.io/