ionic navigation

ion-nav-view

When users browse to your app when, ionic able to detect browsing history. By detecting browsing history, swipe left or right to achieve when properly converted views.

Using AngularUI router module interfaces and other applications can be divided into different $ state (state). Angular core for routing services, URLs can be used to control the view.

AngularUI route provides a more powerful state management, that state can be named, nested, and the merger of view, to allow more than one template presented on the same page.

In addition, each state do not need to be bound to a URL, and the data can be more flexible to push each state.

The following example, we will create a navigation view application contains different states.

Our selection ionNavView tag as the top command. Display a column header we ionNavBar instructions via the navigation update.

Next, we need to set our render state value.

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

Then open the application, $ stateProvider queries url, to see whether the state matches the index value, and then load the index.html to <ion-nav-view>.

The page loads through URLs configured. Create a template of the most simple way is to directly Angular put him in the html template file and use <script type = "text / ng-template"> contains.

So this is a way to Home.html added to our APP in the past:

<script id="home" type="text/ng-template">
  <!--  ion-view 标题将显示在 navbar 中 -->
  <ion-view view-title="Home">
    <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 way, because the template will quickly loaded and the cache is different to go through the network load.

Caching

Under normal circumstances, views are cached can improve performance. When out of view, his element is retained in the Dom, and its scope is also removed from the $ watch.

When we jump has been a cached view, the view will be activated, its scope is reconnected, Dom also saved his element. This also allows to maintain the previous view scroll position.

Caching can also be many ways to turn on and off. Ionic default maximum number of pages cache is 10, and this is not the only customizable, the application can explicitly set the view state should not be cached.

Note that since we are caching these views, we do not destroy scope. Instead, it is also removed from the scope of the $ watch.

Because the next viewing scope has not been destroyed and rebuilt, the controller is not loaded again. If the app / controller need to know when entering or leaving a view, and then view the event from ionView action issue, such as $ ionicView.enter, it may be useful.

Global disable caching

$ IonicConfigProvider cache can be used to set the maximum allowable number of views by setting to 0 to disable all caches.

$ionicConfigProvider.views.maxCache(0);

Disable caching in STATE PROVIDER

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

Disable the cache through the property

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

AngularUI route

Visit AngularUI Router's docs for more.

API

Attributes	Types of	Detail
name (Optional)	`字符串`	A name of the view. This name should be the only other views in the same state. You can have a view of the same name in a different state. For more information, view the ui-router ui-view document .

ion-view

Affiliated ionNavView. The contents of a container for display view or navigation information.

Here is a navigation bar with a "My Page" heading to load the sample page.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attributes	Types of	Detail
title (Optional)	`字符串`	It is displayed in the parent `ionNavBar` title.
hide-back-button (Optional)	`布尔值`	By default, if the parent `ionNavBar` hide the back button.
hide-nav-bar (Optional)	`布尔值`	By default, if you hide the parent `ionNavBar` .

ion-nav-bar

Create a toolbar at the top, when the program updates the status change.

usage

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

Attributes Types of Detail

Attributes	Types of	Detail
delegate-handle (Optional)	`字符串`	The handle with `$ionicNavBarDelegate` identifies the navigation bar.
align-title (Optional)	`字符串`	Navigation bar title aligned position. Available: 'left', 'right', 'center'. Default is 'center'.

delegate-handle

(Optional)

字符串

The handle with $ionicNavBarDelegate identifies the navigation bar.

align-title

(Optional)

字符串

Navigation bar title aligned position. Available: 'left', 'right', 'center'. Default is 'center'.

ion-nav-buttons

Affiliated ionNavView

On ionNavBar ionView inside with ionNavButtons Settings button.

Any button you set will be placed in the appropriate position of the navigation bar, when the user leaves the parent view will be destroyed.

usage

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一个在导航栏左侧的按钮！
      </button>
    </ion-nav-buttons>
    <ion-content>
      这里是一些内容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attributes	Types of	Detail
side	`字符串`	The parent `ionNavBar` position button placement. Available: 'left' or 'right'.

ion-nav-back-button

Create a button in a ionNavBar in.

When the user can navigate in the current recession, the back button will be displayed.

usage

Default button action:

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

Custom click action, with $ ionicNavBarDelegate:

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

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

On the Back button displays the previous title, but also with $ ionicNavBarDelegate.

<ion-nav-bar ng-controller="MyCtrl">
  <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 attributes used a command when you click on the element view when such a <a href> or a <button ui-sref>.

When clicked, nav-clear will result in a given element is prohibited under the turnover of a view. This command is useful, for example, links the sidebar menu.

usage

Here is a sidebar menu to add a link to nav-clear instruction. Clicking the link will disable any animation between views.

<a nav-clear menu-close href="#/home" class="item">首页</a>

ion-nav-title

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

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

Set the transition type used may be: ios, android, and none.

usage

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

nav-direction

Set Nav view transition animation direction, either forward, back, enter, exit, swap.

usage

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

$ IonicNavBarDelegate

Entitlement control ion-nav-bar instructions.

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);
  }
}

method

align([direction])

Back in the browsing history.

parameter	Types of	Detail
event (Optional)	`DOMEvent`	Event objects (such as from a click event)

align([direction])

Title with buttons aligned to the specified direction.

parameter	Types of	Detail
direction (Optional)	`字符串`	The title text alignment direction. Available: 'left', 'right', 'center'. Default: 'center'.

Return value: Boolean value back button is displayed.

showBar(show)

Gets or sets the ion-nav-bar is displayed.

parameter	Types of	Detail
show	`布尔值`	Navigation bar is displayed.

Return value: boolean navigation bar is displayed.

showBackButton([show])

Gets or sets the ion-nav-back-button is displayed.

parameter	Types of	Detail
show (Optional)	`布尔值`	Whether to display the back button

title(title)

Set the caption ion-nav-bar.

parameter	Types of	Detail
title	`字符串`	Display the new title.

$ IonicHistory

$ IonicHistory used to track a user's browsing history within the app.

method

viewHistory()

For viewing history.

currentView()

The current view of the app.

currentHistoryId()

History stack ID, is the parent container of the current view.

currentTitle([val])

Gets or sets the title of the current view.

backView()

Return to the last viewed view.

backTitle()

Get title last browsing view.

forwardView()

Back view on a historical view of the current stack.

currentStateName()

Returns the current state name.

goBack([backCount])

app rollback view, if the rollback of view exist.

Previous: ionic modal window

Next: ionic Platform

ionic Tutorial

ionic CSS

ionic JavaScript

ionic navigation

ionic navigation

ion-nav-view

Caching

Global disable caching

Disable caching in STATE PROVIDER

Disable the cache through the property

AngularUI route

API

ion-view

API

ion-nav-bar

usage

API

ion-nav-buttons

usage

API

ion-nav-back-button

usage

nav-clear

usage

ion-nav-title

usage

nav-transition

usage

nav-direction

usage

$ IonicNavBarDelegate

usage

method

$ IonicHistory

method