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:
[csharp]
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 contactRepository;

public ContactController()
{
this.contactRepository = new Repository();
}

[HttpGet]
public IQueryable 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());
}
}
}
[/csharp]
We need also angular controller:
[js]
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();
});
[/js]
We also need to add HomeController and view for index action:
[html]

[/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: