Today lets learn about the basics of injectables or providers in Ionic 2. Injectable or provider concept is same as factory or services in Ionic 1 and angular 1.
Injectables are kind of an abstract layer between your application and external or internet data service.
Related Read:
Basics of Page Component: Ionic 2
Injectable or Providers: Ionic 2
[youtube https://www.youtube.com/watch?v=f7pCBCECI5M]
Let us first create a provider by using CLI command
ionic g provider Data |
g is a short name for generate
Data is our provider name. We can give any name to our provider.
Ionic 2 CLI generates following provider
src/providers/data.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Data {
data: any;
constructor(public http: Http) {
}
} |
We won’t be using Http and map services in this tutorial. We’ll still retain Http reference as we’ll be using it in our next tutorial i.e., passing data between pages using NavParams class.
src/providers/data.ts Full Source Code
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class Data {
data: any;
constructor(public http: Http) {
this.data = [
{name: 'Microsoft', code: 324, product: 'Windows 10'},
{name: 'Apple', code: 678, product: 'iPhone 7'},
{name: 'Google', code: 567, product: 'Pixel'},
{name: 'Oracle', code: 89, product: 'RDBMS'},
{name: 'IBM', code: 542, product: 'Computer Hardware and Software'}
];
}
loadAll(){
return Promise.resolve(this.data);
};
} |
Here we declare and initiate an array variable( data ) which has couple of objects as its elements. Each object has a company name, a unique code and a product entry. We also define a method called loadAll() which returns the array variable in the form of a promise.
src/pages/home/home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data } from '../../providers/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
companies: any;
constructor(public navCtrl: NavController, public data: Data) {
this.data.loadAll().then(result => {
this.companies = result;
});
}
} |
Here we import the Data provider and then create its instance/reference. Using this reference we call loadAll() method. Since loadAll() method returns a promise, we use then() to capture the result(once the promise is resolved) and then assign the result to a local variable this.companies
src/pages/home/home.html
< ion-header>
< ion-navbar>
< ion-title>
Welcome
< /ion-title>
< /ion-navbar>
< /ion-header>
< ion-content padding>
< h2>Company Names< /h2>
< ion-list>
< ion-item *ngFor="let Company of companies">
{{Company.name}} - {{Company.product}}
< /ion-item>
< /ion-list>
< /ion-content> |
Using ngFor directive we iterate through the array and printout the individual company names as a list of items.
Important: Also make sure to import the Data provider inside src/app/app.module.ts file
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Data } from '../providers/data';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [Data]
})
export class AppModule {} |
Also make sure to specify the class name of the provider(Data) inside providers section.
Output:
Microsoft – Windows 10
Apple – iPhone 7
Google – Pixel
Oracle – RDBMS
IBM – Computer Hardware and Software
please dear
what is the difference (if exist) between provider and the normal way
(import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;)
@khaled, No, there is no difference in the working. Having said that, we do separate the code to maintain logical separation of the application files and to make it easy for maintenance. It’s logical to maintain a separate file for services – providers.
Even if you’re writing a small application, its always better to separate the code orelse it’ll get confusing and hard to come back and make changes after sometime.