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.
Embeded example:
Ionic Page Navigation
<html ng-app="starter">
  <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>
  <!-- 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
  <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
        <a nav-transition="android" href="#/movie/1">
          <button class="button button-positive">
            Animate change page using href attribute
        <button class="button button-positive" ng-click="changePage()">
          Programmatically change page
  <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>
var nameApp = angular.module('starter', ['ionic', 'ui.router']);

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

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

  • Would love to see a version of this tutorial where pages are served externally instead of within the one page under the tags.