contructor-or-module.ts

// Is there any performance difference on this 2 approaches:

// Injecting on the Page itself:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
  public billList: FirebaseListObservable;
  constructor(public navCtrl: NavController, public af: AngularFire) {
    this.billList = this.af.database.list('/billList');
  }

}





// Versus using a modular approach and inject through a Provider like this:

// Page component
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BillData } from '../../providers/bill-data/bill-data';

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [BillData]
})
export class HomePage {
  public billList: any;
  constructor(public navCtrl: NavController, public billData: BillData) {
    this.billList = this.billData.getBillList();
  }

}

// Provider
import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Injectable()
export class BillData {
  public billList: FirebaseListObservable<any>;

  constructor(public af: AngularFire) {}

  getBillList(){
    return this.af.database.list('/billList');
  }

}