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