January 16, 2016

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

Ionic Navigation Example

.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 –

Ionic Navigation Bar Example – Html

<body ng-app="todo" ng-controller="MainCtrl">
 
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
             
    <ion-nav-view></ion-nav-view>


    <script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-ios-information" href="#/profile">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-ios-world" href="#/contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/profile">Profile</a>
          </p>
        </ion-content>
      </ion-view>
    </script>
    <script id="templates/profile.html" type="text/ng-template">
      <ion-view view-title="Profile">
        <ion-content class="padding">
		<h2 class="title">Jhon Doe</h2>
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/contact">Contact</a>
          </p>
        </ion-content>
      </ion-view>
    </script>
    <script id="templates/contact.html" type="text/ng-template">
      <ion-view view-title="Profile">
        <ion-content class="padding">
		<h2 class="title">Address </h2>
		<p>- Abc, 389 Local Street NY</p>
		<p>Phone : 111111111</p>
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/">Home</a>
          </p>
        </ion-content>
      </ion-view>
    </script>
    
     
</body>

Try it »

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

Ionic Navigation Example

Navigation Components

Let us Understand the components of navigation system.

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-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>

Ionic Navigation