We will now add the finishing touches to our app, as follows:
First, let's modify the contacts.html
file in order to handle the rendering of the list itself. Open the file and make sure that it looks like this:
<ion-view view-title="contacts"> <ion-content class="has-header"> <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"> </ion-refresher> <ion-list> <ion-item collection-repeat="contact in contacts" type="item-text-wrap"> <h2>{{contact.name}}</h2> <p>{{contact.number}}</p> </ion-item> </ion-list> </ion-content> </ion-view>
Most things look the same, but we have highlighted some important changes:
ion-refresher
tag, which creates a pull-to-refresh interface for our view. When the user swipes a finger downward over the screen, the text Pull to refresh will be shown. If the full gesture is then carried out (that is, swipe and drop), the doRefresh()
function, which was defined in the scope of this view, will be called. We will define this function in just a bit.collection-repeat
attribute to the ion-item
tag. This is a variation of the ng-repeat
AngularJS attribute, which means that one ion-item
will be created for each contact number in the contacts collection. The contacts collection needs to be defined in the scope of the view, which will be done next.Modify the controllers.js
file to make it look like the following code:
angular.module('phonebook.controllers', []) .controller('ContactsCtrl', function ($scope, contactsFactory) { // List of contacts $scope.contacts = []; $scope.doRefresh = function () { contactsFactory.all().then( function (contacts) { $scope.contacts = contacts; $scope.$broadcast('scroll.refreshComplete') }, function (error) { alert(error); $scope.$broadcast('scroll.refreshComplete') }, function (notify) { console.log("Just notifying"); }); }; });
Let's consider what happened here:
scope
tag injected into this controller. This corresponds to the same contacts list that the collection-repeat
directive in our view uses.doRefresh
function, which we already saw in the view, to our scope. We made it do the following:all()
method of the contactsFactory
class. This gives us a promise that a list of contacts will be delivered at some point in the future.Angular promises allow us to listen to progress notifications from promises. We do not use this feature here, but we simply catch such messages.
That's it! You should now be able to run your app and browse your contacts. Go through the build steps for native devices again and try it out!
3.133.159.223