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;
  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. });
  15. $scope.toggleEdit = function () {
  16. this.Contact.editMode = !this.Contact.editMode;
  17. };
  18. $scope.toggleAdd = function () {
  19. $scope.addMode = !$scope.addMode;
  20. };
  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;
  36. });
  37. };
  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;
  51. });
  52. };
  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;
  71. });
  72. };
  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. }
  5. <h2>Contacts</h2>
  7. <div ng-app="" ng-controller="contactController" class="container">
  8. <strong class="error">{{ error }}</strong>
  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>
  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