|
1 | 1 | #Angular-Query
|
2 |
| -============== |
3 |
| - |
4 |
| - |
5 |
| -Server-side Filtering, Paging and Sorting |
| 2 | +-============== |
| 3 | ++AngularQuery is a Model Factory that allows high level methods for server-side filtering, paging and sorting. |
| 4 | ++##Getting Started |
| 5 | ++- Clone the repo `git clone [email protected]:ducondez/angular-query.git` or just [download ](https://github.com/ducondez/angular-query/archive/master.zip) to your angular resources folder |
| 6 | ++- Inject the `ngQuery` module into your app |
| 7 | + |
| 8 | ++> |
| 9 | ++``` javascript |
| 10 | ++var app = angular.module('ngQuery', ['ngQuery']); |
| 11 | ++``` |
| 12 | + |
| 13 | +-Server-side Filtering, Paging and Sorting |
| 14 | ++Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/maker/ratchet/tags). |
| 15 | ++ |
| 16 | ++ |
| 17 | ++##Usage |
| 18 | ++###Creating a QueryModel |
| 19 | ++The QueryModel accepts a [REST URL, ngResource or VModel(coming soon)] and returns an instance of the QueryModel. The instance has a property called `rows` which is an array containing the results of the query. |
| 20 | ++- URL link |
| 21 | ++ |
| 22 | ++> |
| 23 | ++``` javascript |
| 24 | ++var Cars = new QueryModel('http://mylink.com/cars'); |
| 25 | ++``` |
| 26 | ++ |
| 27 | ++- $resource |
| 28 | ++ |
| 29 | ++> |
| 30 | ++``` javascript |
| 31 | ++var carsResource = $resource('http://mylink.com/cars'); |
| 32 | ++var Cars = new QueryModel(carsResource); |
| 33 | ++``` |
| 34 | ++ |
| 35 | ++- VModel (future: ngResource wrapper superset features) |
| 36 | ++ |
| 37 | ++###Filtering / Querying |
| 38 | ++ |
| 39 | ++> |
| 40 | ++``` javascript |
| 41 | ++// In the Controller |
| 42 | ++var Cars = new QueryModel(carsResource); |
| 43 | ++cars.find(); |
| 44 | ++``` |
| 45 | ++ |
| 46 | ++> |
| 47 | ++``` html |
| 48 | ++<!-- Search box --> |
| 49 | ++<input type="text" ng-model="carQuery"> |
| 50 | ++<button ng-click="cars.find(carQuery)">Find</button> |
| 51 | ++<!-- Cars List --> |
| 52 | ++<ul> |
| 53 | ++ <li ng-repeat="car in cars.rows">car.name</li> |
| 54 | ++</ul> |
| 55 | ++``` |
| 56 | ++ |
| 57 | ++###Pagination |
| 58 | ++ |
| 59 | ++> |
| 60 | ++``` html |
| 61 | ++<!-- Next --> |
| 62 | ++<button ng-click="cars.next()">Next</button> |
| 63 | ++<!-- Will create 5 page buttons before and after the current page when applicable --> |
| 64 | ++<button ng-repeat="page in cars.pageNumbers(5)" ng-click="cars.movePage(page)"></button> |
| 65 | ++<!-- Previous Page --> |
| 66 | ++<button ng-click="cars.prev()">Next</button> |
| 67 | ++``` |
| 68 | ++ |
| 69 | ++###Sorting |
| 70 | ++ |
| 71 | ++> |
| 72 | ++``` html |
| 73 | ++<table> |
| 74 | ++ <thead> |
| 75 | ++ <th ng-click="cars.sort('make')">Make</th> |
| 76 | ++ <th ng-click="cars.sort('model')">Model</th> |
| 77 | ++ <th ng-click="cars.sort('year')">Year</th> |
| 78 | ++ </thead> |
| 79 | ++</table> |
| 80 | ++``` |
| 81 | ++ |
| 82 | ++ |
| 83 | ++ |
| 84 | ++ |
| 85 | ++##Roadmap |
| 86 | ++- Features/Ideas |
| 87 | ++ - Resultset Model instatntiation (for $resource or VModel) |
| 88 | ++ - Flexible client-side caching |
| 89 | ++- Bower repo |
| 90 | ++- Tests |
| 91 | ++ |
| 92 | ++##Reporting bugs & contributing |
| 93 | ++Please file a GitHub issue to report a bug. |
0 commit comments