ionic Navigation

ion-nav-view

When users navigate within your app, ionic can detect the browsing history. By detecting the browsing history, the view can be correctly transitioned when swiping left or right.

Using APIs like the AngularUI Router module, applications can be divided into different $states (states). The core of Angular provides routing services, where URLs can control views.

AngularUI Router offers more powerful state management, where states can be named, nested, and have multiple views merged, allowing more than one template to be displayed on the same page.

Additionally, each state does not need to be bound to a URL, and data can be more flexibly pushed to each state.

In the following example, we will create a navigation view in an application that contains different states.

In our markup, we select ionNavView as the top-level directive. To display a header bar, we use the ionNavBar directive to update the navigation.

Next, we need to set up the states that will be rendered.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

When the application opens, $stateProvider will query the URL to see if it matches the index state, and then load home.html into <ion-nav-view>.

This is also a way to include Home.html in our app:

<script id="home" type="text/ng-template">
  <!-- The ion-view title will be displayed in the navbar -->
  &lt;ion-view view-title="Home">
    &lt;ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

Try it »

This is a good method because the template loads quickly and is cached, avoiding the need to load it from the network again.

Caching

When we jump to a view that has been cached, the view is activated, its scope is reconnected, and its elements are preserved in the DOM. This also allows maintaining the previous view's scroll position.

Caching can be enabled or disabled in many ways. By default, Ionic caches a maximum of 10 pages, and this is not the only customization available; applications can explicitly set whether a view should be cached.

Note that because we are caching these views, we are not destroying the scopes. Instead, their scopes are also removed from $watch.

Since the subsequent watch scopes are not destroyed and recreated, the controllers are not loaded again. If the app/controller needs to know when entering or leaving a view, view events from the ionView scope, such as $ionicView.enter, might be useful.

Globally Disable Caching

$ionicConfigProvider can be used to set the maximum number of views allowed to be cached, and setting it to 0 disables all caching.

$ionicConfigProvider.views.maxCache(0);

Disable Caching in STATE PROVIDER

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

Disable Caching via Attribute

&lt;ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI Router

Visit AngularUI Router's docs for more information.

API

Property	Type	Details
name (optional)	String	A name for the view. This name should be unique among other views in the same state. You can have views with the same name in different states. For more details, see the ui-router ui-view documentation.

ion-view

This is a container for displaying view or navigation bar information.

Below is an example of a navigation bar loading page with the title "My Page".

<ion-nav-bar></ion-nav-bar>
&lt;ion-nav-view class="slide-left-right">
  &lt;ion-view title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attribute	Type	Details
title (optional)	string	The title to display on the parent ionNavBar.
hide-back-button (optional)	boolean	Whether to hide the back button by default on the parent ionNavBar.
hide-nav-bar (optional)	boolean	Whether to hide the parent ionNavBar by default.

ion-nav-bar

Creates a top toolbar that updates as the application state changes.

Usage

<body ng-app="starter">
  <!-- The navigation bar will update as we navigate. -->
  &lt;ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- The view template is rendered in the ion-nav-view -->
  <ion-nav-view></ion-nav-view>
</body>

API

Attribute	Type	Details
delegate-handle (optional)	string	The handle used to identify this nav bar with $ionicNavBarDelegate.
align-title (optional)	string	Where to align the title of the navigation bar. Available: 'left', 'right', 'center'. Defaults to 'center'.

ion-nav-buttons

Belongs to ionNavView

Use nav buttons to set buttons on the navbar for an ionView.

Any buttons you set will be placed on the navbar at the specified side, and will be removed when the user leaves the parent view.

Usage

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    &lt;ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left side of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Here is some content!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attribute	Type	Details
side	string	The side of the parent ionNavBar to place the button. Available: 'left' or 'right'.

ion-nav-back-button

Creates a back button inside an ionNavBar.

A back button will be shown when the current view has a back view in its navigation stack.

Usage

Default button action:

<ion-nav-bar>
  &lt;ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

Custom click action, using $ionicNavBarDelegate:

&lt;ion-nav-bar ng-controller="MyCtrl">
  &lt;ion-nav-back-button class="button-clear"
    ng-click="canGoBack && goBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

To show the previous title on the back button, also use $ionicNavBarDelegate.

&lt;ion-nav-bar ng-controller="MyCtrl">
  &lt;ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

nav-clear

nav-clear is an attribute directive used on elements in a view, such as an <a href> or a <button ui-sref>.

When clicked, nav-clear will prevent the next view transition animation. This directive is useful, for example, for links inside a side menu.

Usage

Here is a link inside a side menu with the nav-clear directive. Clicking this link will disable any animation between views.

&lt;a nav-clear menu-close href="#/home" class="item">Home</a>

ion-nav-title

ion-nav-title is used to set the title in an ion-view template.

Usage

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

nav-transition

Sets the type of transition to use, which can be: ios, android, and none.

Usage

<a nav-transition="none" href="#/home">Home</a>

nav-direction

Sets the direction of the transition animation in the nav view, which can be forward, back, enter, exit, swap.

Usage

<a nav-direction="forward" href="#/home">Home</a>

$ionicNavBarDelegate

Delegate for controlling the ion-nav-bar directive.

Usage

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

Methods

align([direction])

Go back in the history stack.

Parameter	Type	Details
event (optional)	DOMEvent	The event object (such as from a click event)

align([direction])

Align the title with the buttons in the specified direction.

Parameter	Type	Details
direction (optional)	string	The direction to align the title text. Available: 'left', 'right', 'center'. Default: 'center'.

Returns: boolean, whether the back button is shown.

showBar(show)

Set or get whether the ion-nav-bar is shown.

Parameter	Type	Details
show	boolean	Whether to show the navigation bar.

Returns: boolean, whether the navigation bar is shown.

showBackButton([show])

Set or get whether the ion-nav-back-button is shown.

| Parameter | Type | Details | | --- | --- | --- |

title(title)


Sets the title for the ion-nav-bar.

| Parameter | Type | Details |
| --- | --- | --- |
| title | String | Displays the new title. |

---

## $ionicHistory

$ionicHistory is used to track the browsing history of the user within the app.

### Methods

viewHistory()


Used to view the history.

currentView()


The current view of the app.

currentHistoryId()

currentTitle([val])


Gets or sets the title of the current view.

backView()


Returns the previously viewed view.

backTitle()


Gets the title of the previously viewed view.

forwardView()


Returns the previous view in the history stack from the current view.

currentStateName()


Returns the current state name.

goBack([backCount]) ```

Navigates back in the app's views if a back view exists.

❮ Ionic Ion Modal Ionic Ionicloading ❯