AngularJS’s $resouce service makes integrating WebAPI with client applications easier.
This post introduces an example of ASP.NET WebAPI as follows.

Implement ASP.NET WebAPI

ProductsController.cs

public class ProductsController : ApiController
{
    // GET api/products
    public IEnumerable<Product> GetProducts()
    {
        return db.Products.AsEnumerable();
    }
}

Web.config

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
    </httpProtocol>
<system.webServer>

$resouce service

JavaScript file (using AngularJS)

var productRepository = $resource('http://localhost:44312/api/products/:id', { id: '@Id' });
// Call "GET /api/products"
$scope.products = productRepository.query();

View html

<ul>
    <li ng-repeat="product in products">{{product.name}}</li>
</ul>

$save() and $remove() methods

productRepository.query() returns an array of deserialized objects.
AngularJS adds CRUD methods ($save, $remove, etc…) to these objests.

For example:

product.name = "New Name";
product.$save();

$save() sends “POST /api/products/1” request with setting “{“id”:1,”name”:”New Name”}” to the request body.
Similarly, product.$remove() sends “DELETE /api/products/1” request.