Vamos a conectar nuestra aplicación de ionic con una API

REST, para ello

utilizaremos https://jsonplaceholder.typicode.com, una página
que nos proveé de una API de entradas de blogs, que nos
viene perfecta para este ejemplo.

Este sería parte del JSON que nos va a retorna la API:

"userId": 1,

"id": 1,

"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",

"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et

cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet

architecto"

},

"userId": 1,

"id": 2,

"title": "qui est esse",

 "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores

neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non

debitis possimus qui neque nisi nulla"

},

"userId": 1,

"id": 3,

"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",

"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem

doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"

},

"userId": 1,

"id": 4,

"title": "eum et est occaecati",

"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda

provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis

sunt voluptatem rerum illo velit"

},

"userId": 1,
 "id": 5,

"title": "nesciunt quas odio",

"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed

est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"

},

Instalación de Ionic

Si no tenemos instalado ionic, podemos instalarlo con npm con

el siguiente comando desde nuestra consola:

npm install -g ionic

Y crearemos un proyecto nuevo de ionic:

ionic start api blank --cordova

Configuración para realizar la petición

Ahora nos dirijeremos a app.module.ts que se encuentra

en src/app e importaremos HtttpClienteModule, que lo
utilizaremos para hacer la petición con nuestra aplicación.

Debemos hacer su importación y añadirlo en el

apartado imports

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

MyApp,

HomePage

],

imports: [

BrowserModule,

HttpClientModule,//Lo agregamos aqui también

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

],

providers: [

StatusBar,

SplashScreen,
 {provide: ErrorHandler, useClass: IonicErrorHandler},

PostServiceProvider

})

export class AppModule {}

Ahora debemos crear nuestro service, que será el encargado

de hacer la petición y retornarnos la información obtenida a
nuestra page. Ejecutamos en nuestra consola este comando:

ionic g provider post-service

Esto nos creará nuestro service en src/providers/post-service y

nos lo importará tambien a nuestro app.module.ts.

En post-service.ts crearemos una variable url, donde

añadiremos la url de la API y la función getPosts para hacer la
petición:

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

/*

Generated class for the PostServiceProvider provider.

 See https://angular.io/guide/dependency-injection for more info on providers

and Angular DI.

*/

@Injectable()

export class PostServiceProvider {

url = 'https://jsonplaceholder.typicode.com/posts';

constructor(public http: HttpClient) {

getPosts(){

return new Promise(resolve=>{

this.http.get(this.url).subscribe(data=>{

resolve(data);

},error=>{

console.log(error);

});

});
 }

Con esto, nuestra aplicación ya estará lista para conectarse con

la API.

Si necesitaramos hacer una insercción de datos en una API

propia, podriamos hacelo de la misma forma pero con el
metodo post y pasandole la información mediante el
parametro data:

addPost(data) {

return new Promise((resolve, reject) => {

this.http.post(this.url, JSON.stringify(data))

.subscribe(response => {

resolve(response);

}, (error) => {

reject(error);

});

});

Obtenemos los datos en nuestra vista

Vamos a mostrar los datos que nos devuelve nuestro service
en la page home, para ello vamos a home.ts, que se encuentra
en src/pages/home.

Importaremos el servicio en home.ts, crearemos una variable

llamada arrayPost, un método llamado getPost que llamará a
la función de nuestro servicio y guardará los datos en nuestra
variable. Una vez hecho esto llamaremos a getPost en la
función de ionic ionViewLoad, que se ejecutará en cuanto
nuestra page se cargue:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { PostServiceProvider } from '../../providers/post-service/post-service';

//importamos nuestro service

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

 arrayPosts:any; //Creamos la variable donde guardaremos los datos que nos retorna el

servicio

constructor(public navCtrl: NavController, public postServices:PostServiceProvider) {

ionViewDidLoad() {

this.getPosts();//Llamamos a la función getPost cuando la vista se cargue

getPosts() { //llamamos a la funcion getPost de nuestro servicio.

this.postServices.getPosts()

.then(data => {

this.arrayPosts = data;

});

Mostramos los datos en nuestra vista

Una vez hecho esto, ya tendremos nuestra variable arrayPost

cargada con los datos, ahora solo debemos ir a home.html
donde mostraremos el título y el contenido de los post
retornados por la API:

<ion-header>

<ion-navbar>

<ion-title>

Test API IONIC

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<div class="post" *ngFor="let post of arrayPosts">

<h2>{{post.title}}</h2>

<p>{{post.body}}</p>

</div>

</ion-content>

Para ver más clara la información añadiremos estos estilos en

html.scss:

page-home {

.post{

border:1px solid gray;

 padding:1rem;

margin-top:1rem;

Y obtendriamos el siguiente resultado: