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
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
