Share via

ASP.NET MVC - AngularJS, Web API and EntityFramework to build SPA

Introduction

This article walks you through the steps for create a web application using AngularJS, that uses WebApi to communicate between client and server side.

 

STEP 1 - Create ASP.NET Web Api Application

Check the link below, to see all the steps to create a Web Api wtih 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 Entity Framework we need to install a Nuget package.

So on the Visual Studio 2013, select the follow menu option:

Tools-> Library Package manager -> Manage NuGet Packages for Solution

Search for AngularJs and select the option Install.

https://code.msdn.microsoft.com/site/view/file/129671/1/1.png 

This option, will install automatically the Nuget Package.

 

STEP 3 - Create Javascript controller

Now add a new javascript file (contactController.js) in scripts directory and add angular functions.

JavaScript

function contactController($scope, $http) { 
    $scope.loading = true; 
    $scope.addMode = false; 
 
    //Used to display the data 
    $http.get('/api/Contact/').success(function (data) { 
        $scope.Contacts = data; 
        $scope.loading = false; 
    }) 
    .error(function () { 
        $scope.error = "An Error has occured while loading posts!"; 
        $scope.loading = false; 
    }); 
 
    $scope.toggleEdit = function () { 
        this.Contact.editMode = !this.Contact.editMode; 
    }; 
    $scope.toggleAdd = function () { 
        $scope.addMode = !$scope.addMode; 
    }; 
 
    //Used to save a record after edit 
    $scope.save = function () { 
        alert("Edit"); 
        $scope.loading = true; 
        var frien = this.Contact; 
        alert(emp); 
        $http.put('/api/Contact/', frien).success(function (data) { 
            alert("Saved Successfully!!"); 
            emp.editMode = false; 
            $scope.loading = false; 
        }).error(function (data) { 
            $scope.error = "An Error has occured while Saving Contact! " + data; 
            $scope.loading = false; 
 
        }); 
    }; 
 
    //Used to add a new record 
    $scope.add = function () { 
        $scope.loading = true; 
        $http.post('/api/Contact/', this.newContact).success(function (data) { 
            alert("Added Successfully!!"); 
            $scope.addMode = false; 
            $scope.Contacts.push(data); 
            $scope.loading = false; 
        }).error(function (data) { 
            $scope.error = "An Error has occured while Adding Contact! " + data; 
            $scope.loading = false; 
 
        }); 
    }; 
 
    //Used to edit a record 
    $scope.deleteContact = function () { 
        $scope.loading = true; 
        var Contactid = this.Contact.ContactId; 
        $http.delete('/api/Contact/' + Contactid).success(function (data) { 
            alert("Deleted Successfully!!"); 
            $.each($scope.Contacts, function (i) { 
                if ($scope.Contacts[i].ContactId === Contactid) { 
                    $scope.Contacts.splice(i, 1); 
                    return false; 
                } 
            }); 
            $scope.loading = false; 
        }).error(function (data) { 
            $scope.error = "An Error has occured while Saving Contact! " + data; 
            $scope.loading = false; 
 
        }); 
    }; 
 
} 

STEP 4- Create View

On BundlesConfig file add these lines of code.

C#

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

Open _Layout.cshtml page from Shared folder and add these two lines to render angularJS and contactController in application.

JavaScript

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

Now let’s work on View.

HTML

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
 
<h2>Contacts</h2> 
 
<div ng-app="" ng-controller="contactController" class="container"> 
    <strong class="error">{{ error }}</strong>     
 
    <div class="row"> 
        <div class="logs-table col-xs-12"> 
            <table class="table table-bordered table-hover" style="width:100%"> 
                <tr> 
                    <th>Id</th> 
                    <th>Name</th> 
                    <th>Address</th> 
                    <th>City</th> 
                    <th>Country</th> 
                </tr> 
 
                <tr ng-repeat="contact in contacts"> 
                    <td>{{ contact.Id }}</td> 
                    <td>{{ contact.Name }}</td> 
                    <td>{{ contact.Address }}</td> 
                    <td>{{ contact.City }}</td> 
                    <td>{{ contact.Country }}</td> 
                </tr> 
            </table> 
        </div> 
    </div> 
</div> 
 
 

STEP 5 - Run application

Run application to see output:

https://code.msdn.microsoft.com/site/view/file/129672/1/2.png

Resources

Some good resources about Windows Azure could be found here:

See Also