Putting it all together

In this recipe, we are going to dig deeper into using AngularJS with the Ionic framework. We are going to add two common features to the existing ionSnap app. The first feature is infinite scrolling, which loads more content whenever the user navigates to the bottom of the list. The second feature is pull to refresh, which allows the user to refresh the content by pulling from the top.

How to do it…

To start adding more features into the existing ionSnap app, follow these steps:

1. We will continue building the ionSnap app we created in an earlier recipe. Open the terminal, change the directory to ionSnap, and run the Ionic server:

   cd path/to/ionSnap
   ionic serve
   

2. Then open www/templates/tab-dash.html, and add the ion-infinite-scroll directive before the ion-content close, as shown in this code:

       <ion-infinite-scroll
           on-infinite="loadMore()"
           distance="1%">
       </ion-infinite-scroll>
   
   </ion-content>

3. When the user...