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

Home:

Home

Pressing settings button you get:

Settings

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-pane>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
          <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view animation="slide-left-right">
      <!-- Center content -->
      </ion-nav-view>
    </ion-pane>
  </body>

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

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

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>
  </ion-nav-buttons>
  <ion-content>
    Content Home
  </ion-content>
</ion-view>

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>
    </a>
  </ion-nav-buttons>
</ion-view>

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

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

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>
  </ion-nav-buttons>
  <ion-content>
    Content Home
  </ion-content>
</ion-view>

The end

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: