Angular.js with WebAPI

I want to show you how to integrate WebAPI and angular.js It won’t be very complex example but it could be helpful at the begining. So, I want to create simple web to store contacts.

We need controller:

using System;
using System.Linq;
using System.Web.Http;
using WebApiAngular.Data;
using WebApiAngular.Domain;
 
namespace WebApiAngular.Controllers
{
    public class ContactController : ApiController
    {
        private readonly IRepository<Contact> contactRepository;
 
        public ContactController()
        {
            this.contactRepository = new Repository();
        }
 
        [HttpGet]
        public IQueryable<Contact> List()
        {
            return contactRepository.GetAll();
        }
 
        [HttpGet]
        public Contact Get(Guid id)
        {
            return contactRepository.Get(x => x.Id == id).FirstOrDefault();
        }
 
        public void Add(Contact contact)
        {
            this.contactRepository.SaveOrUpdate(contact);
        }
 
        public void Update(Guid id, Contact contact)
        {
            this.contactRepository.SaveOrUpdate(contact);
        }
 
        public void Delete(Guid id)
        {
            this.contactRepository.Delete(this.contactRepository.Get(x => x.Id == id).FirstOrDefault());
        }
    }
}

We need also angular controller:
angular.module('contactsModule').controller('contactsController', function ($scope, $http) {
 
    $scope.loadRecords = function () {
        $http.get("/api/Contact").success(function (data, status, headers, config) {
            $scope.Contacts = data;
            $scope.ContactsQuantity = $scope.Contacts.length;
 
            $scope.Id = "";
            $scope.Firstname = "";
            $scope.Secondname = "";
            $scope.Email = "";
            $scope.Phone = "";
        });        
    }
 
    $scope.save = function () {
        if ($scope.Id === undefined) {
            var contact = {
                Firstname: $scope.Firstname,
                Secondname: $scope.Secondname,
                Email: $scope.Email,
                Phone: $scope.Phone
            };
 
            var request = $http.post("/api/Contact/", contact).success(function (data, status, headers, config) {
                $scope.loadRecords();
            });
        }
        else {
            var contact = {
                Id: $scope.Id,
                Firstname: $scope.Firstname,
                Secondname: $scope.Secondname,
                Email: $scope.Email,
                Phone: $scope.Phone
            };
 
            var request = $http.post("/api/Contact/" + contact.Id, contact).success(function (data, status, headers, config) {
                $scope.loadRecords();
            });
        }
 
         
    };
 
    $scope.get = function (Contact) {
        $http.get("/api/Contact/" + Contact.Id).success(function (data, status, headers, config) {
            $scope.Id = data.Id;
            $scope.Firstname = data.Firstname;
            $scope.Secondname = data.Secondname;
            $scope.Email = data.Email;
            $scope.Phone = data.Phone;
        });
    }
 
    $scope.delete = function () {
        $http.delete("/api/Contact/" + $scope.Id).success(function (data, status, headers, config) {
            $scope.loadRecords();
        });        
    }
 
    $scope.cancel = function () {
        $scope.Id = "";
        $scope.Firstname = "";
        $scope.Secondname = "";
        $scope.Email = "";
        $scope.Phone = "";
    }
 
    $scope.loadRecords();
});

We also need to add HomeController and view for index action:


<!DOCTYPE html>
<html ng-app="contactsModule">
 
<head> 
    <script src="~/Scripts/angular.min.js"></script>
    <link href="~/Content/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div ng-controller="contactsController">
        <input type="text" ng-model="Id" hidden="hidden" />
        <input type="text" ng-model="Firstname" placeholder="First name" />
        <input type="text" ng-model="Secondname" placeholder="Second name" />
        <input type="text" ng-model="Email" placeholder="Email" />
        <input type="text" ng-model="Phone"placeholder="Phone" />        
        <input type="button" id="save" value="Save" ng-click="save()" />
        <input type="button" id="delete" value="Delete" ng-click="delete()" ng-show="Id" />
        <input type="button" id="save" value="Cancel" ng-click="cancel()"  ng-show="Firstname" />
        <br />
        {{"Number of contact(s): "}} {{ContactsQuantity}}
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First name</th>
                    <th>Second name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tr ng-repeat="contact in Contacts" ng-click="get(contact)">
                <td>{{ contact.Id }}</td>
                <td>{{ contact.Firstname }}</td>
                <td>{{ contact.Secondname }}</td>
                <td>{{ contact.Email }}</td>
                <td>{{ contact.Phone }}</td>
            </tr>
        </table>        
    </div>
    <script src="~/Scripts/web/module.js"></script>
    <script src="~/Scripts/web/controller.js"></script>
</body>
</html>

I don’t want to show you all source code because you can find it here: https://github.com/letyshub/WebApiAngular I used NHibernate but I think that you change it to another orm 😉

Result looks that: