Build a RESTful API

We’re now going to take this further and build a Restful API.

Go here and follow this. We don’t need to deploy to Azure (doing so is optional). We just need to build the API.

https://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-rest-service-aspnet-api-sql-database/

At the end we should be able to hit /api/contacts to get a list of contacts. We should also be able to post to the same URL to create a new contact.

Build a service to talk to the API

First up, build a service which can talk to the API. It will look something like the following:

angular.module("products", []).service("products", function ($http) {
  this.index = function () {
    var url = "/api/products";
    return $http.get(url);
  };
  this.get = function (id) {
    var url = "/api/product/" + id;
    return $http.get(url);
  };
  this.delete = function (product) {
    var url = "/api/product/" + product._id;
    return $http.delete(url);
  };
  this.create = function (product) {
    var url = "/api/products";
    return $http.post(url, product);
  };
  this.save = function (product) {
    var url = "/api/products";
    return $http.patch(url, product);
  };
});

(You will need to update the URLs here.) Test this out in the console.

Ideally build a Karma test to check it works.

Build a controller

Next build a controller which can pull a list of the contacts. Save the contacts in $scope. Write a view which can render them.

Create a form

Make a form which can create a new contact. Create a createContactController to manage the form. When the form is submitted, send the new contact.

Optional Extra - Extract the form into a template

If you extract the form into a template, you can reuse the same form to edit contacts.

Optionally create an editContactForm controller which will let you edit a contact in scope.