Day 7: Connect our application to a REST API using ngResource

Creating our first resource :-

Initially we are going to write the first resource in a factory format which is similar to a service.

//trimmed code

app.factory("contact", function($resource) {

return $resource("API_URL");

});

//trimmed code

This resource helps to manage all the CRUD operation on the API. Next we will inject the contact resource into ContactService. In the app service for the object self we are going to add three additional variables page, hasMore, isLoading and additionally we will add a function called loadContacts which is going to get the data from rest api url.

 

Setting up ngInfinite Scroll :-

ngInfinite  Scroll is a third party application. we add the dependency in both index.html and main.js. After adding dependencies we all add the infinite-scroll directive to table tag with function loadMore() and infinite-scroll-distance of 3.

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

Implementing pagination :-

Here we will connect the loadMore function on controller to loadMore on service. Every we reach the bottom of the page a request is hitting to api which we dont want.

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