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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

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

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

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