Ionic - Javascript Navigation

Navigation is one of the core components of every app. Ionic is using the AngularJS UI Router for handling the navigation.

Using Navigation

Navigation can be configured in the app.js file. If you are using one of the Ionic templates, you will notice the $stateProvider service injected into the app config. The simplest way of creating states for the app is showed in the following example.

The $stateProvider service will scan the URL, find the corresponding state and load the file, which we defined in app.config.

app.js Code

.config(function($stateProvider) {
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});

The state will be loaded into the ion-nav-view element, which can be placed in the index.html body.

index.html Code


When we created states in the above-mentioned example, we were using the templateUrl, so when the state is loaded, it will search for matching the template file. Now, we will open the templates folder and create a new file state1.html, which will be loaded when the app URL is changed to /state1.

state1.html Code

      This is State 1 !!!
Ionic Navigation State

Creating Navigation Menu

You can add a navigation bar to your app in the index.html body by adding the “ion-nav-bar” element. Inside the navigation bar, we will add the ion-nav-back-button with an icon. This will be used for returning to the previous state. The button will appear automatically when the state is changed. We will assign the goBack() function, which will use the $ionicHistory service for handling this functionality. Therefore, when the user leaves the home state and goes to state1, the back button will appear which can be taped, if the user wants to return to the home state.

index.html Code

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back

Controller Code

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
Ionic Navigation Back Button

Adding Navigation Elements

Buttons can be added to the navigation bar using the ion-nav-buttons. This element should be placed inside the ion-nav-bar or the ion-view. We can assign the side attribute with four option values. The primary and secondary values will place buttons according to the platform that is used. Sometimes you want the buttons on one side no matter if it is IOS or Android. If that is the case, you can use the left or the right attributes instead.

We can also add the ion-nav-title to the navigation bar. All the code will be placed in the index.html body, so it can be used everywhere.


Ionic has the ability for caching up to ten views to improve performance. It also offers a way to handle caching manually. Since only backward views are cached and the forward ones are loading each time the users visit them, we can easily set to cache forward views by using following the code.


We can also set how many states should be cached. If we want three views to be cached, we can use the following code.


Caching can be disabled inside $stateProvider or by setting attribute to ion-view. Both examples are below.

Controlling the Navigation Bar

We can control the behavior of the navigation bar by using the $ionicNavBarDelegate service. This service needs to be injected to our controller.


   <button ng-click = "setNavTitle('title')">
      Set title to banana!

Controller Code

$scope.setNavTitle = function(title) {

The $ionicNavBarDelegate service has other useful methods. Some of these methods are listed in the following table.

The nextViewOptions() method has the following three options available.

  • disableAnimate is used for disabling animation of the next view change.

  • disableBack will set the back view to null.

  • historyRoot will set the next view as the root view.

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.