REST API using Angular 4 HttpClient for Ionic 3
REST API using Angular 4 HttpClient for Ionic 3

This tutorial aims to simplified consuming REST API on Ionic 3 mobile apps using the new Angular 4.3 HttpClient. You can compare this new way of accessing or consuming REST API with the previous way on Angular 2 or 4. Still the same with the previous tutorial, we will use free REST API testing endpoint from JSONPlaceholder.

Before you started, this tasks should be accomplished:

– Install or update the latest Node.js
– Install or update Ionic 3 using this command

– Optionally install or update Cordova if you’re using it for run on the Android or iOS device

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.

If there comes this question.

For now, choose ‘n’. It will include ‘npm install’ and will take some minutes. Go to the newly created app project folder.

To make sure everything working properly run the app in labs mode, it will open automatically in the browser.

Ionic 3 Consuming REST API using New Angular 4.3 HttpClient - Ionic Serve

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.

Notes: Angular 4.3 HTTPClient and HTTPClientModule modules get from ‘@angular/common’ dependencies.

Now, your ‘package.json’ dependencies look like this.

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

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.

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.

Also replace ‘Http’ injection in the constructor.

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

Add this functions after constructors.

You can see the difference for getting data more simple than using the previous HTTP and it also added retry function if something happens with request. Now, add again function for post new data.

For posting data, still, use the same way as previously. If your REST API backend needs additional headers and URL params you can add them like this.

4. Display Data in View

To displaying data in the view, open and edit ‘src/pages/home/home.html’ then replace ‘<ion-content>’ and it’s content using this.

Now, you can see the data on the browser like this.

Ionic 3 Consuming REST API using New Angular 4.3 HttpClient - List of users

5. Post Data to REST API

For posting data to REST API, we need to create a new page. Type this command to generate it.

Open and edit ‘src/pages/adduser/adduser.html’ then replace ‘<ion-content>’ contents with this.

Now, for the controller. Open and edit ‘src/pages/adduser/adduser.ts’ then add import of RestProvider.

Inject RestProvider in the constructor params.

Then add this variable before the constructors.

Next, add a function for saving or post the data from the form.

Don’t forget to add button on ‘home.html’ that call ‘adduser’ page. Now, you can run again the Ionic 3 app and test receives or posts data.

Above example just the basic of the new Angular 4.3 HTTPClient. There is more advanced feature comes with Angular 4.3 HTTPClient that will be covered another time in another tutorial. For full source code, you find it on our GitHub.

Suggest

Learn Ionic 3 From Scratch

Ionic 1 by Example: Create Mobile Apps in HTML5

Ionic 2 Master Course – The New Generation of Mobile Apps

Ionic 2 – The Practical Guide to Building iOS & Android Apps

Ionic 2 – The Practical Guide to Building iOS & Android Apps

Source via: https://www.djamware.com/post/59924f9080aca768e4d2b12e/ionic-3-consuming-rest-api-using-new-angular-43-httpclient

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here