#Angular-Query
Status: Conception / Initial Prototype
AngularQuery is a Model Factory that allows high level methods for server-side filtering, paging and sorting.
##Getting Started
- Clone the repo
git clone git@github.com:ducondez/angular-query.gitor just download to your angular resources folder - Inject the
ngQuerymodule into your app
var app = angular.module('ngQuery', ['ngQuery']);Take note that our master branch is our active, unstable development branch and there is no stable version yet.
##Usage
###Creating an instance
The QueryModel accepts 2 parameters. The <source> and <options> where the <source> can be any of the following:
- URL link
var cars = new QueryModel('http://mylink.com/cars');- $resource
var carsResource = $resource('http://mylink.com/cars');
var cars = new QueryModel(carsResource);- VModel (future: ngResource wrapper superset features)
###Options
// Example option
var options = {afterFind: function() { ... } };
var cars = new QueryModel('http://mylink.com/cars', options);AngularQuery defines serveral options
(after|before)Find[function] - calls the before/afterFind function respectively after a successfull find query.(after|before)Sort[function] - calls the before/afterSort function respectively after a successfull sort query.(after|before)PageMove[function] - calls the before/afterPageMove function respectively after a successfull pagination query.instantiateRows[boolean] - (default totrue) intantiate a$resourceorVModelobject for every records returned by the query.
###Results and promises
Query Methods find(), sort(), and next() etc... returns a promise object. The resulting data from the queries are stored in the data propery of the AngularQuery instance.
// keep the promise
var carsPromise = cars.next();
carsPromise.success(function() {
alert('Found a couple more cars!');
});
// check data
console.log(cars.data); // [ {...}, {...}, ... ]###Filtering / Querying
// In the Controller
var cars = new QueryModel(carsResource);
cars.find();<!-- Search box -->
<input type="text" ng-model="carQuery">
<button ng-click="cars.find(carQuery)">Find</button>
<!-- Cars List -->
<ul>
<li ng-repeat="car in cars.data">car.name</li>
</ul>###Pagination
<!-- Next -->
<button ng-click="cars.next()">Next</button>
<!-- Will create 5 page buttons before and after the current page when applicable -->
<button ng-repeat="page in cars.pageNumbers(5)" ng-click="cars.movePage(page)"></button>
<!-- Previous Page -->
<button ng-click="cars.prev()">Next</button>###Sorting
<table>
<thead>
<th ng-click="cars.sort('make')">Make</th>
<th ng-click="cars.sort('model')">Model</th>
<th ng-click="cars.sort('year')">Year</th>
</thead>
</table>##Roadmap
- Make it work
- Features/Ideas
- Resultset Model instatntiation (for $resource or VModel)
- Flexible client-side caching
- Bower repo
- Tests
##Reporting bugs & contributing Please file a GitHub issue to report a bug.