Ionic Navigation

Ionic Navigation : Navigation in app is used to provide navigation to the users throughout the application. Ionic provides a beautiful navigation system which you can use easily. Ionic uses the AngularJs UI Router for navigation. In this tutorial, we are going to explain the functionality of ionic navigation.

Ionic Navigation

As Ionic uses the AngularUI Router so app interfaces are organized into various “states”. State contains the state name and template url. Ionic maintains the history of the states which makes it’s better. In this example we are going to create a navigation system which will contain different states for the app.

Controller Code

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'MainCtrl'
        }
      }
    })
	.state('profile', {
      url: "/profile",      
      templateUrl: "templates/profile.html"
      
    })
	.state('contact', {
      url: "/contact",      
      templateUrl: "templates/contact.html"
      
    }); 
   $urlRouterProvider.otherwise("/tab/home");

})

.controller('MainCtrl', function($scope, $ionicModal) {
});

When the app is started the router searchs the index state and loads it’s template. If index state is not defined it will load the default router.

$urlRouterProvider.otherwise(“/tab/home”); defines the default router if no router is found.

The above part contains the controller & Services Required for the navigation

Html Code

Here is html part of the above example –

 
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
             
    <ion-nav-view></ion-nav-view>


    

    
    
    
    
     

If you Run the above example it will produce output like this-

ion-nav-view

|<ion-nav-view> And </ion-nav-view>| is used to define the ion-nav-view. Ionic nav view contains the ion-view. In the above example we have added ion-nav-view which is necessary for navigation.

<ion-nav-view> </ion-nav-view>

ion-view

This is child of the ion-nav-view and container for view content and navigational and header bar. Here is an example of ion-view –

<ion-nav-view>
  <ion-view view-title="My Page">
    <ion-content>
      Hello World!
    </ion-content>
  </ion-view>
</ion-nav-view>

ion-nav-bar

ion-nav-bar which is used to create topbar which is updated when the application states are changed.You can add ion-nav-back-button to create the back button. Here is an example of ion-nav-bar –

<!--- this is updted when the application  state is changes-->
<ion-nav-bar class="bar-positive">
</ion-nav-bar>