Ionic - Javascript Navigation

Navigation is one among the core elements of each app. Ionic is victimization 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 power for caching up to 10 views to boost performance. It additionally offers the way to handle caching manually. Since solely backward views ar cached and therefore the forward ones ar loading on every occasion the users visit them, we are able to simply set to cache forward views by victimization 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() technique has the subsequent 3 choices accessible.

  • disableAnimate is employed for disabling animation of consecutive read amendment.

  • disableBack can set the rear read to null.

  • historyRoot can set consecutive view the basis read.

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