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

Working example

 
Play with this article for now, we’ll talk details further down the line.
 
Demo
 
Embeded working example:
 
OnsenUI Page transitions
 
HTML
 
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="ListCtrl">

  <ons-navigator animation="slide" var="app.navi">
    <ons-page>
      <ons-toolbar class="toolbar-black">
        <div class="center">First Page</div>
      </ons-toolbar>
    
      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large" ng-click="changePageNoAnimation()">Programmatically change page</button>
      </ons-row>    
    
      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large--cta" ng-click="changePageWithAnimation()">Programmatically change page with animation</button>
      </ons-row>    
     
    </ons-page>   
  </ons-navigator>    
   
  <ons-template id="view.html">
    <ons-page ng-controller="ViewCtrl">
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>        
        <div class="center">Second Page</div>
      </ons-toolbar>

      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large--cta" ng-click="goBack()">Go Back</button>
      </ons-row>  

    </ons-page>
  </ons-template>
  
</body>
</html>
 
JavaScipt
 
var module = ons.bootstrap('my-app', ['onsen']);

module.controller('ListCtrl', function($scope) {

  $scope.changePageNoAnimation = function(){ 
    app.navi.pushPage("view.html", { animation: "none"});
  }  
  
  $scope.changePageWithAnimation = function(){
    app.navi.pushPage("view.html", { animation: "lift", movieid: '1' });
  }    
});

module.controller('ViewCtrl', function($scope) {
  var page = app.navi.getCurrentPage();
  console.log(page.options.movieid);
  
  $scope.goBack = function(){
    app.navi.popPage();
  }     
});
 

Programmatically changing page

 
Before we can talk about this topic any further make sure your application has at least two pages. Those pages must have defined ons-navigator directive. For those of you who skipped my previous tutorials ons-navigator is a component that provides page stack management and navigation (it does not need to have a visible content).
 
Navigator needs to have defined var attribute. It will proviede JavaScript with direct connction to ons-navigator directive.
 
It can be used with any event to programmatically trigger a page change, here’s an example:
 
<ons-row class="profile-wrapper" style="padding: 10px;">
	<button class="button button--large" ng-click="changePageNoAnimation()">Button</button>
</ons-row>    

<ons-row class="profile-wrapper" style="padding: 10px;">
	<button class="button button--large--cta" ng-click="changePageWithAnimation()">Button</button>
</ons-row>  
 
When button is clicked, it will trigger function called changePageNoAnimation. This function needs to be defined in a controller:
 
$scope.changePageNoAnimation = function(){
    app.navi.pushPage("view.html");
}  

$scope.changePageWithAnimation = function(){
    app.navi.pushPage("view.html", { animation: "lift", movieid: id });
}  
 
Continue Reading

  • Tri Wibowo

    Hi,

    I’ve been wondering how to return to the first page successfully. I had used app.navi.resetToPage(‘index.html’) where index.html is the actual file name. It did return to the first page, but the display was messed up. All pages are displayed in one page.

    I’ve been pulling my hair out this weekend because of this issue -,-