2020 Update: Building Ionic 1, 2, or 3 apps? We recommend Ionic 4 and above – learn how to migrate. For an updated way to make API calls natively, see the Capacitor Community HTTP plugin.

Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. In our first two articles 10 Minutes with Ionic 2: Hello World and 10 Minutes with Ionic 2: Adding Pages and Navigation, we looked at the basics of creating an Ionic app. In this article, we’ll build on what we learned and look at calling backend APIs using a class.

Ionic Start

We’ll start by creating an app with the blank template, using ionic start.

ionic start apiApp blank --v2 --ts

As described in the first post of this series, we now have some basic plumbing, including a home page.

Default File Structure

Creating a New Provider

Let’s look at adding a new provider (also known as a service), which will be used to make an HTTP request to an API. Similar to the last post, where we created a page, the CLI makes this significantly easier by providing automatic provider generation, using ionic g. After changing into the project directory (cd apiApp), let’s create a new provider called PeopleService, using the CLI.

ionic g provider PeopleService

The CLI will generate the an @Injectable class called PeopleService in app/providers/people-service/people-service.ts.

New project structure with about page

This class will have the basic boilerplate code inside of a load method to make an HTTP request.

load() {
  if (this.data) {
    // already loaded data
    return Promise.resolve(this.data);

  // don't have the data yet
  return new Promise(resolve => {
    // We're using Angular HTTP provider to request the data,
    // then on the response, it'll map the JSON data to a parsed JS object.
    // Next, we process the data and resolve the promise with the new data.
      .map(res => res.json())
      .subscribe(data => {
        // we've got back the raw data, now generate the core schedule data
        // and save the data for later reference
        this.data = data;

Random User API

The Random User Generator is a free API that generates data of fake users, including names, emails, pictures, etc. It is a very helpful API for doing mockups and learning. Making an HTTP request to https://randomuser.me/api/ will return a JSON response similar to the following:

        "street":"3277 green rd",
        "city":"australian capital territory",

If we modify our request to https://randomuser.me/api/?results=10, the results array in the response will contain ten users. Let’s put this in our PeopleService. We will need to make a couple of changes to the code the provider gave us. First, let’s put in the URL:


Currently, our code stores/returns the whole response. However, we only want to return the results array in the response. We’ll modify the .subscribe method:

.subscribe(data => {
  this.data = data.results;

Now, our method, when called, will return a promise, which will resolve with an array of users when we get a response back from the API.

Calling PeopleService

Let’s take a look at calling our PeopleService and outputting the results as a list on our home page. First, inside app/pages/home/home.ts, we need to import our service:

import {PeopleService} from '../../providers/people-service/people-service';

Next, in our @Page decorator, we will need to add our service as a provider.

  templateUrl: 'build/pages/home/home.html',
  providers: [PeopleService]
export class HomePage {

Now, we can add a constructor to our page, create a people property, import the PeopleService, and assign the PeopleService to a property of the class.

export class HomePage {
  public people: any;

  constructor(public peopleService: PeopleService){


Let’s add a method to our HomePage class called loadPeople that will call our peopleService.load method and assign the result of the promise in a people property of the class.

  .then(data => {
    this.people = data;

Finally, we will call this method from our constructor.

export class HomePage {
  public people: any;

  constructor(public peopleService: PeopleService){

    .then(data => {
      this.people = data;

Now that our class is getting the data, let’s modify our template for this page (app/pages/home.html) to list out users with their picture, first name, last name, and email. We’ll accomplish this by looping through our people array property using ngFor.

<ion-navbar *navbar>

<ion-content class="home">
    <ion-item *ngFor="#person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      <h2>{{person.name.first}} {{person.name.last}}</h2>


Finally, in the CLI, we’ll run ionic serve to view our app in the browser:

ionic serve

You should end up with something similar to the following in your browser:

Screenshot of Browser Output


In under ten minutes, using the power of the Ionic CLI and some simple code, we have created an app that interacts with a backend API. This functionality is needed to create most apps, and this ability to get it working quickly will help you greatly on your journey toward creating the next #1 app in the app stores!

Sign up for the Ionic Newsletter to get the latest news and updates!