It just dawned on me, in all of my tutorials I never talked about passing data between application pages. Experienced users will not think twice about this topic, though is can be an unpassable mountain for beginners. I remember my time spent at StackOverflow helping newly introduced jQuery Mobile developers, this was a constant topic.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Automatic Data Sharing Between Controllers

 
The first solution is all about automatic data sharing while an application is alive and running. I will teach you how to broadcast messages using Factory services to share data between controllers.
 
This approach is useful when you have multiple controllers on one page or multiple pages, and all controllers (or some of then) needs to know when data managed by another controller has been changed. An excellent example would be storing settings data that have application-wide implications.
 

Example

 
Demo
 
Embeded working example
 
Automatic Data Sharing Between Controllers
 
HTML
 
<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="list.html" type="text/ng-template">
    <ion-view view-title="First page">  
      <ion-content class="padding">
        <h2 style="text-align: center;">Session Wide Sharing Between Controllers</h2><br/>
        <h5 style="text-align: center;">Enter something into input box and go to the next page</h5><br/>
        <div class="list">
          <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" placeholder="Enter your first name" ng-model="input.firstName">
          </label>
          <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" placeholder="Enter your last name" ng-model="input.lastName">
          </label>
        </div>        
        <a href="#/view" style="text-decoration: none;"><button class="button button-full button-positive">
          Open next page
        </button></a>      
      </ion-content>
    </ion-view>
  </script>  
  
  <script id="view.html" type="text/ng-template">
    <ion-view view-title="Second page">
      <ion-content class="padding">
          <h3>First Name: {{input.firstName}}, Last Name: {{input.lastName}}</h3> 
      </ion-content>
    </ion-view>
  </script>   
  
</body>
 
</html>
 
JavaScript
 
var nameApp = angular.module('starter', ['ionic', 'ui.router']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'ListCtrl'
    })
    .state('view', {
      url: '/view',
      templateUrl: 'view.html',
      controller: 'ViewCtrl'
    });
 
  $urlRouterProvider.otherwise('/');
 
});

nameApp.factory('Authorization', function() {

  authorization = {};
  authorization.firstName = '';
  authorization.lastName = '';  
  return authorization;
});

nameApp.controller('ListCtrl', function($scope,  Authorization) {
  $scope.input = Authorization;  
});
 
nameApp.controller('ViewCtrl', function($scope, Authorization) {
  $scope.input = Authorization; 
});
 

Overview

 
This solution uses Factory service as data storage. This Authorization factory service can be injected into each of the controllers as a parameter. This way, we are now attaching the $scope.input to an application service, which serves as the binding point between the two controller models.
 
Provided example has two controllers, one for every page.
 
First Controller:
 
nameApp.controller('ListCtrl', .......
 
Second Controller:
 
nameApp.controller('ViewCtrl', ........
 
We also need a Factory service to share data between controllers:
 
nameApp.factory('Authorization', function($rootScope) {
    //other Authorization factory related code
});
 
Now, we need to inject this factory inside both controllers and set a scope variable called $scope.input which will store out authorization information:
nameApp.controller('ListCtrl', function($scope, $state, Authorization) { // object Authorization is injected Factory
  
  $scope.input = Authorization;  
  //other ListCtrl related code
});

nameApp.controller('ViewCtrl', function($scope, $ionicHistory, Authorization) { // object Authorization is injected Factory
  
  $scope.input = Authorization; 
  //other ViewCtrl related code
});
 
This way both controllers $scope.input objects will be injected with a reference to the Authorization factory. In the end, change to one controller input object will propagate to the other controller.
 
Continue Reading

  • Could you give a guide with sqlite integration? I mean I want sqlite as final storage after click save button

    • Ok, I will write another article.

  • johnwoltman

    Thank you for the excellent tutorial. As a beginner to Angular & Ionic, I found your statement that tutorials never cover data passing is true!

  • Saeed Hassan

    Thank you you saved me dude 🙂

  • Rich Schramm

    Great tutorial, thanks! One thing you may want to add would be how to pass data from a button? Like if I have one button named “Foo” and another named “Bar” and want to capture which button was pushed…

    Thanks again!

  • ablears

    Excellent article, thanks for writing it!

  • Jimmy Berenguer

    I guess I am missing something here (sorry it’s typical).. but how do you do this with two actual pages, as in separate? I have a typical MVC .net project with the usual home.cshtml page and an about.schtml page just to try this and it is not working…

  • McEileen

    Hi, I tried this approach but when I click the button to go to the next page, only the url changes. The actual page doesn’t change. Any idea what I did wrong?

  • Dweep Patel

    I want some text from a database to be shown on all pages of ionic 2 like emp id , po nuber , item , some thing like this on all my pages all

    • Meshileya Israel

      where you able to get this done????

      • Dweep Patel

        Naa I switched to ionic 1 bt if u have a solution please share

  • drdomski

    Thanks for writing this, helped me out no end

  • jeet

    I m only getting ‘Back’ text on screen … Does it require any plugin or other files like list and view .html in some directory

    • jeet

      Sorry my bad I included wrong paths