The list view revisited

We will now add the finishing touches to our app, as follows:

  1. Use logic to display the contacts that we pulled from the contact list
  2. Add the pull-to-refresh feature in order to enable users to dynamically refresh the list of users.

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:

  • We added an 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.
  • We added a 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:

  • We created and bound the empty contacts list to the scope tag injected into this controller. This corresponds to the same contacts list that the collection-repeat directive in our view uses.
  • Likewise, we bound the doRefresh function, which we already saw in the view, to our scope. We made it do the following:
    • Call the 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.
    • If the promise is fulfilled, we bind the resulting list to the scope. Angular will respond to this change by refreshing the view in order to accommodate this change in the model and populating the list with contact information using collection-repeat.
    • If the promise fails, we display an error message.

      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!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.159.223