Angularjs the idea of using OData to request ASP. NET WEB API Resources

This consolidation angularjs the idea of using OData to request ASP. NET Web API resources.

First, you plug the ASP. NET Web API into OData's wings and install OData through NuGet.

Then, add the Enablequery attribute to the controller that needs to use the OData action, and let the action method return the Iqueryable<t> type.

 
 
public class ProductsController : ApiController
{
    // GET: api/Products
    [EnableQuery()]
    public IQueryable<Product> Get()
    {
        var productRepository = new ProductRepository();
        return productRepository.Retrieve().AsQueryable();
    }
    
    ...
}

Above, the Enablequery feature can also make many configurations, such as:

[Enablequery (PAGESIZE=50)]
[Enablequery (Allowedqueryoptons=allowedqueryoptions.skip | Allowedqueryoptions.top)]

On the front end, you might want to customize a module to use the URI path as a constant for this module.

(function () { "use strict";

    angular.module("custommodule", ["ngResource"])
        .constant("appSettings", {
            serverPath: "http://localhost:49705/" });
}());

	 

Ngresource This module is from the Angular-resource.js file and needs to be referenced.

You may then want to add a custom service for CustomModule this module by factory.

function () {
     "use strict";

     // Created a service through the factory
     angular.module ("custommodule")
         .factory ("productResource", ["$ resource", "appSettings", productResouce]);

     function productResouce ($ resource, appSettings) {
         return $ resource (appSettings.serverPath + "/ api / products /: search");
     }
} ()); 

Above, Productresource This service returns a complete API request path.

Then you need to inject the Productresource service into a controller. At this point, the OData syntax can be placed on a single Object object for delivery to the server.

(function () {
    "use strict";
    angular
        .module("productManagement")
        .controller("ProductListCtrl",
                     ProductListCtrl);

    function ProductListCtrl(productResource) {
        var vm = this;

        vm.searchCriteria = "GDN";

        productResource.query({ $orderby: "Price desc" }, function (data) {
            vm.products = data;
        });
    }
}());

The resulting OData-related URI is roughly the same: Http://localhost:52293/api/products? $filter =price+gt+5& $orderby =price

That's basically the idea.

Operation about OData:

$top
$skip
$orderby
$filter
$select

Some of the $filter operators:

$filter: "Price eq 10"
$filter: "Price NE 10"
$filter: "Price GT 10"
$filter: "Price GE 10" is greater than or equal to
$filter: "Price lt 10"
$filter: "Price le 10" is less than or equal to
$filter: "Price GT, and price LT 20"
$filter: "Price eq. or price eq 20"
$filter: "(Price lt) and not (price eq 0)"

Some of the functions $filter:

$filter: "Starswith (ProductCode, ' GDN ')"
$filter: "EndsWith (ProductCode, ' 001 ')"
$filter: "Contains (ProductCode, ' GDN ')"
$filter: "ToLower (ProductCode) eq ' 001a '"
$filter: "ToUpper (ProductCode) eq ' 001B '"

$filter Other:

Operator: Additon, subtraction
Date: Year, month, day, now, etc
Operations: round, floor, etc
Location: distance, length, etc
Lamda:any, all
Nullable: null, etc

Angularjs the idea of using OData to request ASP. NET WEB API Resources