Part 20 consuming rest api in ionic

in this video, I will show you that how you can consume the rest API.

in the previous video we have implemented the asp.net web API project so here we will retrieve that data.

1. Create the New Ionic 3 App

As usual, we are creating new Ionic 3 app from scratch. Open the terminal or Node command line then type this command

ionic start ionic3Example blank

now navigate to our project

cd ionic3Example

2. Install and Configure the New Angular 4.3 HttpClient

By default in the last version of Ionic 3 (when this tutorial created) it still using old Angular HTTP module. For this, we have to install a different module for the new Angular 4.3 HTTPClient. Angular use different module name for HTTP, so the developer can migrate to the new Angular 4.3 HTTPClient slowly because old HTTP module still can be used. For safe use with Ionic 3, update all '@angular' dependencies with the latest version.

npm install @angular/common@latest --savenpm install @angular/compiler@latest --savenpm install @angular/compiler-cli@latest --savenpm install @angular/core@latest --savenpm install @angular/forms@latest --savenpm install @angular/http@latest --savenpm install @angular/platform-browser@latest --savenpm install @angular/platform-browser-dynamic@latest --save

Next, open and edit 'src/app/app.module.ts' then add this import.

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

Then register it to '@NgModule' imports after 'BrowserModule', so it will look like this.

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

3. Create Ionic 3 Service or Provider

This time we will implement the new Angular 4.3 HTTPClient on the Ionic 3 service or provider. Create the service or provider file by type this command.

ionic g provider Rest

It will create 'rest.ts' file and 'rest' folder inside 'providers' folder and also register it on 'app.module.ts'. Now, open and edit 'providers/rest/rest.ts' then replace 'http' import by new Angular 4.3 HTTPClient.

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

Also, replace 'Http' injection in the constructor.

constructor(public http: HttpClient) {  console.log('Hello RestServiceProvider Provider');}

Next, we will create all REST API call inside 'rest.ts' file. Add this line before the constructor.

apiUrl = 'your url here';

Add this functions after constructors.

getStudents() {  return new Promise(resolve => {    this.http.get(this.apiUrl+'/students').subscribe(data => {      resolve(data);    }, err => {      console.log(err);    });  });}

4. Display Data in View

To displaying data in the view, open and edit `src/pages/home/home.ts` then add this import

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

Inject the `RestProvider` to the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {}

Add variable for holds users data before the constructor.

  students : any;

Create a function below the constructor for calling the users from the provider then fill users variable.

getStudents() {    this.restProvider.getStudents()    .then(data => {      this.students = data;      console.log(this.students);    });  }

Now, call that function inside the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {      this.getStudents();  }
Then, open and edit 'src/pages/home/home.html' then replace '<ion-content>' and it's content using this.

    <ion-list inset>      <ion-item *ngFor="let student of students">        <h1> {{student.id}}</h1>        <h2>{{student.name}}</h2>        <p>{{student.dept}}</p>        <p>{{student.gender}} </p>      </ion-item>    </ion-list>

Run the Application .====================================================
to download full source code and presentation visit our wesite and Blog
website : - http://dotnetlab.in/source code : - https://github.com/rahuljogranafacebook page :- https://www.facebook.com/DotnetLab-1896440207343189/visit my blog : - http://aspnetinhindi.blogspot.infollow me on twitter : https://twitter.com/THEJOGRANA