Ionic: HowTo do Simple navigation

Last updated: 2016-08-07

This is a demo of simple navigation in Ionic.

The app consist of two pages: Home and Settings



Pressing settings button you get:


Pressing Back, you return.

index.html is here the layout page containing the ion-nav-bar and a back button.

  <body ng-app="starter">
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
          <i class="ion-arrow-left-c"></i> Back
      <ion-nav-view animation="slide-left-right">
      <!-- Center content -->

js/app.js contains the routing. By default a routing to home.html is done at startup.

.config(function ($stateProvider, $urlRouterProvider) {
			url: '/home',
			templateUrl: 'views/home/home.html'
			url: '/settings',
			templateUrl: 'views/settings/settings.html'

views/home/home.html contains the settings button.

<ion-view view-title="Lapr">
  <ion-nav-buttons side="right">
    <button class="button button-icon ion-gear-a" ui-sref="settings"></button>
    Content Home

The button could also have been made with an a-tag:

<ion-view view-title="Lapr">
  <ion-nav-buttons side="right">
    <a class="button button-clear" ui-sref="settings" nav-clear>
      <i class="icon ion-gear-a"></i>

views/settings/settings.html has only title and content placeholder.

<ion-view view-title="Settings">
    Content Settings

If you would like the buttons in a different color in the nav-bar then you might want to use class icon opposed to button-icon:

Home with button

views/home/home.html with a button instead of a-tag.

<ion-view view-title="Lapr">
  <ion-nav-buttons side="right">
    <button class="button icon ion-gear-a" ui-sref="settings"></button>
    Content Home

The end

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: