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.
