How to pass data between pages in Ionic app

Question

I have had a look at all the examples around and tried to integrate with my Ionic project and failed. Here is what I have so far.

I am using a project created using creator.ionic.com

I have an html page that im loading a JSON file into

(agentSchedule.html)

<ion-view style="" title="Agent Schedule">
 <ion-content class="has-header" overflow-scroll="true" padding="true">
  <ion-refresher on-refresh="doRefresh()">
    </ion-refresher>
    <div ng-controller="agentScheduleCtrl">
      <ion-list style="">
          <ion-item  class="item-icon-right item item-text-wrap item-thumbnail-left" ng-repeat="user in users">
            <img ng-src="{{ user.image }}">
          <h2>{{ user.fname }} {{ user.lname }}</h2>
          <h4>Role : {{ user.jobtitle }}</h4>
          <h4>Username : {{ user.username }}</h4><i class="button-icon icon ion-ios-arrow-forward"></i>
          </ion-item>
      </ion-list>
  </div>
</ion-content>

Here is the controller and routes for that page

.controller('agentScheduleCtrl', function($scope, $http, $timeout) {
  var url = "http://www.otago.ac.nz/itssd-schedule/mobileappdevice/services/getUsers.php";
  var url = "users.json";
  $http.get(url).success( function(response) {
      $scope.users = response;
});

.state('menu.agentSchedule', {
  url: '/page4',
  views: {
  'side-menu21': {
    templateUrl: 'templates/agentSchedule.html',
    controller: 'agentScheduleCtrl'
    }
  }
})

I am another page that I want to pass the username to, and then use on any page that I go from there

(specificAgentDetails.html)

<ion-view style="" view-title="Agent Specific Schedule">
<ion-content class="has-header" overflow-scroll="true" padding="true">

</ion-content>
</ion-view>

Here is the controller and routes for that page

.controller('specificAgentDetailsCtrl', function($scope) {

})

.state('menu.specificAgentDetailsCtrl', {
url: '/page9',
views: {
  'side-menu21': {
    templateUrl: 'templates/specificAgentDetailsCtrl.html',
    controller: 'specificAgentDetailsCtrl'
  }
}
})

How to Pass the user.username JSON variable to the next page as a global variable ??

Any help would be awesome - im going around in circles

Angular is an SPA framework. You're supposed to have 1 (!!!) .html page and switch views in it, not several .html pages. — shershen, Mar 22 '16 at 20:02
New to Ionic, that's how the creator.ionic.com made it, so I'm just following along - any ideas using the format that I've used ?? — James_Inger, Mar 22 '16 at 20:05

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

So what @shershen said is true most ionic apps are set up as SPA's, what you're going to do isn't a "ionic" thing it's more of a AngularJS thing. You're going to want to setup a Service to hold your User info and then share it with your other controllers.

Create a Factory to share the data.
Inject the factory into the first controller and set it.
Inject the factory into the second controller and retrieve it.

Share data between AngularJS controllers

If you're familiar with get/set in OOP you should have no problem.

.factory('Data', function () {
var user = {};
return {
    getUser: function () {
        return user;
    },
    setUser: function (userparameter) {
        user = userparameter;
    }
};
})
.controller('agentScheduleCtrl', function($scope, $http, $timeout, Data) {
 var url = "http://www.otago.ac.nz/itssdschedule/mobileappdevice/services/getUsers.php";
 var url = "users.json";
$http.get(url).success( function(response) {
  Data.setUser(response);
  $scope.users = response;
});

Then in your second controller:

.controller('specificAgentDetailsCtrl', function($scope, Data) {
   $scope.user = Data.getUser();
})

Make sure the syntax between the view and controllers are correct. I'm using user you're using users, setup breakpoints in your controllers to see what's going on there.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 22 '16 at 20:14

Faraji Anderson

653
6
18

Good man - I'll try it out,. hopefully I can get my head around it – James_Inger Mar 22 '16 at 20:26
OK got it working within the same page, how do I pass the variable to another page ?? – James_Inger Mar 22 '16 at 21:18
Not page. Think Controller. You want to pass data between controllers. In actually they're states, the concept of pages isn't relevant to your project because if you notice you're routing to views. Now in your second controller inject the shared factory and then get the user object. – Faraji Anderson Mar 22 '16 at 21:26
The link above illustrates how to inject the shared data service and then get the values you've stored. – Faraji Anderson Mar 22 '16 at 21:27
so if a
had the variable of {{user.username}} in it how would i use that data into the factory ?? as of code at start. - do i need a function to start the transfer ?
– James_Inger Mar 22 '16 at 21:41

score 0 · Answer 2 · answered Jun 22 '17 at 13:44

I use a little generic factory to do the job.

.factory('LocalRepo', function () {
    var data = {}
    return {
        Get: function (key) {
            return data.key;
        },
        Set: function (key, val) {
            return data.key = val;
        }
    }
})

.controller('One', function($scope, LocalRepo) {
    //Set in first controller
    //TODO: $scope.users = .... from your call
    LocalRepo.Set('users', $scope.users);
})

.controller('Two', function($scope, LocalRepo) {
    //Get in second controller
    $scope.users = LocalRepo.Get('users');
})

Use it to set whatever you want between controllers

score 0 · Answer 3 · answered Aug 26 '17 at 11:26

Here is a quite simple solution. use $window and it will hold the data globally available for all controllers, services or anything etc.

.controller('agentScheduleCtrl', function($scope, $http, $timeout,$windows) {
    $window.users = [];
    var url = "http://www.otago.ac.nz/itssd-schedule/mobileappdevice/services/getUsers.php";
    var url = "users.json";
    $http.get(url).success( function(response) {
        $window.users = response;
    });
})

Inject $window as dependency in other controller and you can access it like $window.users.

Hope it helps someone.

How to pass data between pages in Ionic app

3 Answers3

had the variable of {{user.username}} in it how would i use that data into the factory ?? as of code at start. - do i need a function to start the transfer ?