Where to add REST API consuming functionality in ionic framework 3.x?

Question

It has been a while since I used ionic framework. Last time, I used it it was version 1 and therefore, every page that i created with ionic creator had a controller for it where I used to add js code for consuming my REST framework.

This time I downloaded my ionic creator app and the directory structure is completely changed. There are no js controllers like in angularJS. For each page there is a .ts file containing the following code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class page1Page {

  constructor(public navCtrl: NavController) {
  }

}

Any idea or online tutorial if anyone can suggest?

ionic 2 above uses angular >=2 and typescript..not angularjs — Suraj Rao
– Suraj Rao, Commented Jun 28, 2017 at 11:20

Sohan · Accepted Answer · 2017-06-28 12:30:52Z

You need to create providers to request REST API. Posting example :

Your Provider(rest-api.ts)

import { Injectable } from '@angular/core';
import { Http,Headers} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/throw';


@Injectable()
export class RestApiProvider {

  private apiUrl = 'Your server api url';

    constructor(public http: Http) {
    console.log('Hello RestApiProvider Provider');
    }

    Login(dataparam){
        let param = 'your data params';
        return this.http.get(this.apiUrl+param)
                    .timeout(30000)
            .map(res => res.json())
            .catch(this.handleError);
      }


      handleError(error: any) {
        let errorMsg = error.message || 'Network Error ! Try again later.';
        return Observable.throw(errorMsg);
    }


}

Provider should be inject in (app.module.ts)

import { HttpModule,Http } from '@angular/http';
import { RestApiProvider } from '../providers/rest-api/rest-api';

@NgModule({
  declarations: [
    .....
  ],
  imports: [
  ........
    HttpModule,
    .......
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ......
  ],
  providers: [
    ......
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestApiProvider,
    ......
  ]
})
export class AppModule {}

Also inject provider in the page from where you want to do HTTP request:mobile-login.ts

import { RestApiProvider } from '../../providers/rest-api/rest-api';
..........

@IonicPage()
@Component({
  selector: 'page-mobile-login',
  templateUrl: 'mobile-login.html',
})
export class MobileLoginPage {

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public restProvider: RestApiProvider,
    ) {
  }

yourfunction{
    this.restProvider.Login(your comma seprate data param)
    .subscribe(
            (data: any) => {
                console.log(data)                    
            },
            (err) => {
                      console.log(err);
                    }
    );
}

Above is working example for my Ionic 3 App.

Collectives™ on Stack Overflow

Where to add REST API consuming functionality in ionic framework 3.x?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related