AngularJS With MVC Web API - Part 3

My Previous Articles

• Call WCF Service Using jQuery - Part 1 
• Call WCF Service in AngularJS - Part 2

I have used the following method in this article:

• Used MVC Web API.
• AngularJs Filter.

SQL Script is available in part 1  (link is given above)

 

View page Index.cshtml

• Here I have used filter for description.
• I placed filter:search in my ng-repeat and used in description text box ng-model ="search.ProductDescription".

<table class='table table-bordered'>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th colspan="2">Action</th>
            </tr>
            <tr>
                <th>
                    <label for="description">Filter By Description-> </label>
                </th>
                <th>
                    <input type="text" ng-model="search.ProductDescription" placeholder="Enter Description" class="form-control"></th>
                <th colspan="2"></th>
            </tr>
            <tr ng-repeat="Product in Products | filter:search ">
                <td>{{ Product.ProductName}}</td>
                <td>{{ Product.ProductDescription}}</td>
                <td><span><a href="javascript:void(0);" ng-click="edit(Product);">
                    <img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>
                <td><span><a href="javascript:void(0);" ng-click="delete(Product.Id);">
                    <img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td>
            </tr>
        </table>

Controller page (ProductInfoController.cs)

public ActionResult Index()
       {
           return View();
       }

API Controller page(ProductInfoAPIController.cs)

•  Here I have written method for getting data from my model.

public class ProductInfoAPIController : ApiController
    {

        private readonly TestProductEntities db = new TestProductEntities();

        // GET: api/ProductInfoAPI
        public string GetProductInfos()
        {
            var serializer = new JavaScriptSerializer();
            return (serializer.Serialize(db.ProductInfoes.ToList()));
        }

    }

Service.js

• Below I have declared get service for fetching data.
  
• Also my Controller.js and App.js is same as my previous article.
• I have attached the source code.

app.factory('AngularService', ['$http', function ($http) {
           return {
               get: function () {
                   return $http({
                       method: 'GET',
                       headers: {
                           'Content-Type': 'application/json; charset=utf-8'
                       },
                       url: '/api/ProductInfoAPI/GetProductInfos',
                       data: {}
                   });
               },
   };
]);

Output 

You can also test the output here.