Ionic 3 and Angular 4 connection with a REST web service

Announcement of Ionic 3

Wait, the Ionic 2 has just been launched a few months ago, is not it? Do not worry! Ionic 3 is Ionic 2 with some break changes. Like Angular, which arrives at its 4th version a few days ago, which means that when some updates require structural changes, the number of major versions increases accordingly.

This version comes with support for Angular 4 and an experimental support for Lazy Loading. 

More details on the Ionic blog:  http://blog.ionic.io/ionic-3-0-has-arrived/ 

Create desktop applications with Ionic Split Pane and Grid

Create applications that work on a mobile, tablet, and now desktop application with the new Ionic Split Pane and Grid controls. We are getting closer to our vision of an ionic application running wherever your users are, and these two components are major pieces of this puzzle.

Discover  Split Pane  and the new  Responsive Grid ! 

The Ionic 3 is still in beta. Before you start, you have to make a checklist.

- Node.js already installed with the command prompt.

- Ionic must be updated with this command.

npm install -g ioni

Create an Ionic 3 application

Always like the previous version of Ionic. Type this command to create a new Ionic 3 application.

ionic start ionic3 --v2

This command always uses the prefix "--v2", but do not worry if you check the dependencies in "package.json", you will see the difference.

Now you have to place yourself, with the command prompt, in the folder of your project (ionic3) and run on the browser after typing this command.

ionic serve -l

You are going to have an ionic 3 project with 3 tabs: Home, about and contact.

In this project we will try to display a list of countries that exist in this link which displays the data in JSON format:  https://restcountries.eu/rest/v2/all 

Ionic 3: connection with a REST web service

First, to be able to access a REST API, we must create a service or a Provider by this command.

ionic g provider rest

You will get a folder provider in which there is a file rest.ts
Open this file and put the following code in this file:

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

Import { Http } from  '@ angular / http' ;

Import  'rxjs / add / operator / map' ;

@ Injectable ()

Export  class  Rest 

{

Constructor ( public  http : Http )

{

This . Http = http ;

}

GetAll ()

{

Return  this . Http . Get ( 'https://restcountries.eu/rest/v2/all' ). Map ( res => res . Json ());

}

}

We need to register "HttpModule" in "app.module.ts", add this import to "app.module.ts".

import { HttpModule } from '@angular/http';

In the @NgModule imports section, add "HttpModule" so that it looks like this.

imports: [
  BrowserModule,HttpModule,
  IonicModule.forRoot(MyApp)
  ],

Always in "app.module.ts", save the Provider "Rest" first.

import { Rest } from '../providers/rest';

In the @NgModule providers section, add "Rest".

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler}, Rest
 ]

Now it's time to display the list of countries in the Home page. First, we need to change "home.ts" and put this code.

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

Import { NavController } from 'ionic-angular' ;

Import { Rest } from '../../providers/rest' ;

@ Component ({

Selector: 'page-home' ,

TemplateUrl: 'home.html'

})

Export class HomePage {

Items : string [];

Constructor ( public navCtrl : NavController , public rest : Rest ) {

This . GetPays ();

}

GetPays ()

{

This . Rest . GetAll (). Subscribe ( res => {

This . Items = res ;

});

}

}

Now change the code of the home.html file and put this code:

< Ion-header >

< Ion-navbar >

< Title-title > Home </ ion-title >

</ Ion-navbar >

</ Ion-header >

< Ion-content padding >

< Ion-list >

< Ion-item * ngFor = "let item of items" >

< Ion-avatar item-left >

< Img src = "{{item.flag}}" >

</ Ion-avatar >

< H2 > Country: </ h2 > < h2 > {{item.name}} </ h2 >

< P > Capital: {{item.capital}}, Region: {{item.region}} </ p >

</ Ion-item >

</ Ion-list >

</ Ion-content >

• Tweet
• Share
• Share
• Share
• Share