I covered this topic briefly in one of my previous articles. Unfortunately, I don’t think it was enough. This article will hopefully cover much more of this topic; everything you need to know about page navigation, page transitions and how to animate them.
 
 

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 ...

Working example

 
Play with this article for now, we’ll talk details further down the line.
 
Demo
 
Embeded example:
 
Ionic Page Navigation
 
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"/>
  <link href="style.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.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">
        <h1 style="text-align: center;">Page navigation examples</h1><br/>
        <a nav-transition="none" href="#/movie/1">
          <button class="button button-positive">
            Change page using href attribute
          </button>
        </a><br/><br/>
        <a nav-transition="android" href="#/movie/1">
          <button class="button button-positive">
            Animate change page using href attribute
          </button>
        </a><br/><br/>        
        <button class="button button-positive" ng-click="changePage()">
          Programmatically change page
        </button>        
      </ion-content>
    </ion-view>
  </script>  
  
  <script id="view.html" type="text/ng-template">
    <ion-view view-title="Second page">
      <ion-content class="padding">
            <button class="button icon ion-ios-arrow-back" ng-click="goBack()" nav-direction="back">Go Back</button>
      </ion-content>
    </ion-view>
  </script>   
  
</body>
 
</html>
 
JavaScipt
 
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: '/movie/:movieid',
      templateUrl: 'view.html',
      controller: 'ViewCtrl'
    });
 
  $urlRouterProvider.otherwise("/");
 
});

nameApp.controller('ListCtrl', function($scope, $state) {
  $scope.changePage = function(){
    $state.go('view', {movieid: 1});
  }    
});
 
nameApp.controller('ViewCtrl', function($scope, $stateParams, $ionicHistory) {
  console.log($stateParams.movieid);
  $scope.goBack = function(){
    $ionicHistory.goBack();
  }    
});
 
Continue Reading