Uncategorized

Day # 9 Connecting our application to REST API using ngResource

Server side sorting and searching :-

Whenever if any one types anything in search field we will pass that value as the query parameter. First thing we will do is whenever we type we have to see if the value is defined in the list or not or is it blank.


//Trimmed code

$scope.$watch('search', function (newVal, oldVal) {
if (angular.isDefined(newVal)) {
$scope.contacts.doSearch(newVal);

}

})

//Trimmed code

Since we are doing search, we will reset after everything is done.


//trimmed code

'persons': [],

'doSearch': function (search) {
self.hasMore = true;
self.page = 1;
self.persons = [];

},

//trimmedcode

After we reset everything, we will store the search in an object


//trimmed code

'persons': [],
'search': null,
'doSearch': function (search) {
self.hasMore = true;
self.page = 1;
self.persons = [];
self.search = search;
self.loadContacts();
},

//trimmed code

For loadContacts function, in the param variable we will add search.

When we run the local Server, we could observe through network console how we are querying.

Screen Shot 2016-07-05 at 11.14.29 pm.png

But the ordering is broken! :/

To fix this we will follow same $watch which we have used for search, we will use it for order.

code:- https://github.com/praneethkumarpidugu/angular1-core/commit/f35051aed3d9868800694727d439b8eccf5513e6

Adding a loading spinner :-

For this purpose we will using angular directive called spin.js https://github.com/urish/angular-spinner

we will install through bower

$ bower install angular-spinner

We will add the dependency in both index.html and main.js. To intially playaround with spinner, we will add this below table tag in index.html.

</table>
<span us-spinner="{radius:8, width:5, length:3, lines:9}"></span>

We will load the spinner only when contacts isLoading.

<div ng-show="contacts.isLoading">

<span us-spinner="{radius:8, width:5, length:3, lines: 9}"></span>`

</div>

code:- https://github.com/praneethkumarpidugu/angular1-core/commit/812a46d48256998af1eda8b26bcda5745163629a

Leave a comment