title: Ionic 2 (uses Angular 2) - how to access functions of another page?
body: <p>I am quite new to Ionic and Angular 2:</p>
  
  <p>I was trying to make a service (or provider in Ionic 2), which will hold my global variables and global functions.</p>
  
  <p>When I tried importing AlertController and LoadingController (instantiate it via on my service file's constructor and call it's methods on one of my service file's functions) in my service file, I would get an error saying "No Provider for AlertController" etc.</p>
  
  <p>So, I thought - I could make a page called "CommonFunctions", which I can use as a wrapper around my service/provider functions - This way I can separate the Data Functions and the UI functions (AlertContorller etc.).
  <a href="https://i.stack.imgur.com/26aMU.png" rel="nofollow noreferrer">See this diagram</a></p>
  
  <p>I'm now getting an error saying "No Provider for CommonFunctions". I declared CommonFunctions as a normal page, but I'm guessing I can't use CommonFunctions functions on another page?</p>
  
  <p>So my current choices (that I can think of is):</p>
  
  <ol>
  <li><p>How can I call AlertController/LoadingController (or Controllers alike)
  in a service/provider</p></li>
  <li><p>How can I use another page's functions</p></li>
  <li><p>If these are not possible, I guess I'll have to just accept that I
  can't call AlertController/LoadingController function on a service
  (this would mean a lot of repetition of code too).</p></li>
  </ol>
  
  <p>Any help is very much appreciated.</p>
  
  <p>exercise.ts is the main page seen by user</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, LoadingController } from 'ionic-angular';
  import { FirebaseListObservable , FirebaseObjectObservable} from 'angularfire2';
  import { Common } from '../common/common'; 
  
  @Component({
    selector: 'page-exercise',
    templateUrl: 'exercise.html'
  })
  export class ExercisePage {
  
    public FBexercises: FirebaseListObservable&lt;any[]&gt;;
  
    constructor(
        public navCtrl: NavController,
        public loadingCtrl: LoadingController,
        public common: Common
      ) {
      this.getFBexercises();
    }
  
    getFBexercises(){
      let that = this;
  
        this.common.getFBLUL().then(function(){
        that.exerciseLUL = this.glob_var.exerciseLUL;
        that.exerciseLUL_backup = this.glob_var.exerciseLUL_backup;
        that.muscleGroupLUL = this.glob_var.muscleGroupLUL;
        that.muscleLUL = this.glob_var.muscleLUL;
      });
    }
  
    ionViewDidLoad() {
      console.log('Exercise Page Loaded');
    }
  
  
  }
  </code></pre>
  
  <p>common.ts is a page, but I intend to use it to store my global functions</p>
  
  <pre><code>import {Component, Injectable} from '@angular/core';
  import {GlobalVars} from '../../providers/global-vars';
  import {NavController, AlertController, LoadingController } from 'ionic-angular';
  
  @Component({
    selector: 'page-common',
    templateUrl: 'common.html'
  })
  
  @Injectable()
  export class Common {
  
      public static navCtrl: NavController
      public static alertCtrl: AlertController
      public static loadingCtrl : LoadingController
      public static globalVars: GlobalVars
  
      constructor () {
      }
       //creates loading bar
      createLoadingBar(message){
          return this.loadingCtrl.create({
            content: message
          });
      }
  
      getFBLUL(){
          let that = this;
          return new Promise(function(resolve, reject){
                //create loading bar
              var loadingBar = that.createLoadingBar('Exercise List loading');
              loadingBar.present();
              that.globalVars.FBexercisesToLUL().then(function(){
                  loadingBar.dismiss();
  
            //TO-DO, receive exerciseLUL from FBexerciseToLUL() and return it when promise finishes
  
                  resolve();
              });
          });
      }
  }
  </code></pre>
  
  <p>global-vars.ts is my data service i use to grab my data from firebase database</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {AngularFire, FirebaseListObservable } from 'angularfire2';
  import 'rxjs/add/operator/map'
  
  @Injectable()
  export class GlobalVars {
  
    public muscleGroupLUL = [];
    public muscleLUL = [];
    public exerciseLUL = [];
    public exerciseLUL_backup = [];
  
    public FB_exercise: FirebaseListObservable&lt;any[]&gt;;
  
    constructor(
      public af: AngularFire
      ) {
      this.getFBexercise();
    }
  
    getFBexercise() {
      console.log("Getting FB Exercises");
      this.FB_exercise = this.af.database.list('/Exercise');
    }
  
    FBexercisesToLUL() {
      let that = this;
      return new Promise(function(resolve, reject){
          that.muscleGroupLUL.push("");
          that.muscleLUL.push("");
  
          that.FB_exercise.subscribe(exercises =&gt; {
            console.log("Exercises Loaded");
              // items is an array
  
              exercises.forEach(FBexercise =&gt; {
  
              var ref = FBexercise.$key;
                var muscleGroup = FBexercise.body_part_name;
                var muscle = FBexercise.muscle_name;
                var exercise = FBexercise.exercise_name;
  
              if (that.muscleGroupLUL.indexOf(muscleGroup) === -1) { //if not in LUL
                  that.muscleGroupLUL.push(muscleGroup);
              }
                  if (that.muscleLUL.indexOf(muscle) === -1) { //if not in LUL
                  that.muscleLUL.push(muscle);
              }
              if (that.exerciseLUL.indexOf(exercise) === -1) { //if not in LUL
                  that.exerciseLUL.push({ref:ref, exercise: exercise, muscle : muscle, muscleGroup : muscleGroup});
              }
  
            });
  
            that.exerciseLUL_backup = that.exerciseLUL;
  
        //TO-DO, return exerciseLUL when promise finishes 
  
            resolve();
  
        });
      });
    }
  }
  </code></pre>