Lists are some of the most ubiquitous data structures in apps everywhere. So, it is no surprise that most frameworks provide powerful tools to work with them. Ionic is certainly no exception.

Have a look at the code that we added earlier. Especially note the tags inside the ion-content tag:

<ion-view view-title="contacts">
  <ion-content>
    <ion-list>
      <ion-item>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

The following two tags encapsulate the majority of Ionic's list rendering capabilities and are generally everything that you need in order to display the list:

Since each item in our list will be a single contact, we will wrap each of them in an ion-item tag.

At present, our view does not really do much apart from displaying an empty list. We need to add some markup in order to show the details of the contact wrapped in each item. Let's do something basic first, such as just showing the name and mobile number of the contact, if any:

<ion-view view-title="contacts">
  <ion-content>
    <ion-list>
      <ion-item>
        <h2>{{contact.name}}</h2>
        <p>{{contact.number}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Here, we defined two Angular expressions to render the name and number of a contact during runtime. The contact in this case is simply a JavaScript Object Notation (JSON) object holding information about a given person in our contact list. Next, we will see how to assign a concrete value to this JSON object; this will take place in the associated controller.

To make your expressions bind-once, add two colons (::) before them, as follows:

<ion-view view-title="contacts">
  <ion-content>
    <ion-list>
      <ion-item>
        <h2>{{::contact.name}}</h2>
        <p>{{::contact.number}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

In AngularJS, it is considered good design practice to keep as little logic in the controllers as possible. Remember that controllers should only be the glue between the view and the model. They should ideally not be responsible for doing any of the heavy fetching and crunching of data. For that, AngularJS provides the services.

Services are objects that are injected into other components of your app on demand by the dependency injection system. If you look back at the app.js code, you have seen some of them already; both the $stateProvider and $urlRouterProvider arguments fall in this category.

If you look at advanced AngularJS apps, you will start seeing services pretty much everywhere. They make up a large part of almost any app and can be used to contain almost any kind of functionality. For example, we can create a service that encapsulates access to a given REST API, allowing us to query it by a set of utility functions while the service itself handles connections to the server, security, and so on. Likewise, we can define a service that represents a set of mathematical operations, which can be fed simple data in order to get arithmetic results.

Services are singletons, which means that only a single instance of each exists during runtime.

Implementing your business logic in this fashion is important for several reasons, some of which are as follows:

Now that we have established how awesome services are, the natural question is, how are we going to go about their creation?

Like controllers, it is customary to place your service definitions in their own file (or files, if you prefer to have each service recipe in its own file. Here, we use a common file for all of them). In your project directory, create the following file:

js/services.js

In this file, put the following:

angular.module('phonebook.services', [])
.factory('contactsFactory', function contactsFactory() {
  return {
    all: function () {
      return [];
    }
  }
});

Let's have a look at what we have done:

We created a module named phonebook.services to host our services

We defined a basic factory service named contactsFactory

The service which exposes a single utility method is called all, which currently does not do anything (we will change this soon, don't worry).

Now, we need to modify the app.js and index.html files in order to make the app aware of the new service. Make sure that the app.js file starts with the following:

angular.module('phonebook', ['ionic', 'phonebook.controllers','phonebook.services'])

This injects the services module into the main app. Now, we just need to import the file the module is located in. To do so, make sure that your JavaScript imports in index.html look like this:

<!-- your app's js -->
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/app.js"></script>

That's it! We now have the groundwork of our app in place. However, if you run the emulator again, you will notice that not much has changed. We are still greeted by the same blank screen. Now, it is time to add some actual content to our app by loading the contact list.