ionic navigation

ion-nav-view

When users browse in your app, ionic can detect the browsing history. By detecting browsing history, you can correctly switch views when swiping left or right.

Using application programming interfaces such as the AngularUI router module can be divided into different $states. The core of Angular is the routing service, and URLs can be used to control views.

AngularUI routing provides a more powerful state management, that is, states can be named, nested, and merged views, allowing more than one template to be rendered on the same page.

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

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

Select ionNavView as the top-level directive in our markup. To display a header bar we use the ionNavBar directive to update via navigation.

Next, we need to set our state values 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'
  });
});

Open the application again, $stateProvider will query the url to see if it matches the index state value, and then load index.html to <ion-nav-view>.

Page loading is configured through URLs. The easiest way to create a template in Angular is to put it directly into the html template file and include it with <script type="text/ng-template"w>.

So this is also a way to add Home.html to our APP:

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the 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>

This is a very Good approach, because the template will load quickly and be cached instead of loading it over the network.

Caching

Normally, views are cached to improve performance. When going out of view, its element is retained in the DOM and its scope is removed from $watch.

When we jump to a view that has been cached, the view will be activated, its role will be reconnected, and its elements will be saved in the Dom. This also allows the previous view scroll position to be maintained.

Cache can also be turned on and off in many ways. By default Ionic will cache a maximum of 10 pages, and this is not the only thing that can be customized. Applications can set explicit state to set whether a view should be cached or not.

Note that because we are caching these views, we are not destroying the view. Instead, its view is also removed from $watch.

Because the subsequent viewing scope is not destroyed and rebuilt, the controller is not loaded again. If the app/controller needs to know when to enter or leave a view, it may be useful to emit view events from within the ionView scope, such as $ionicView.enter.

Disable caching globally

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

$ionicConfigProvider.views.maxCache(0);

Disable caching in STATE PROVIDER

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

Disable caching through properties

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

AngularUI Routing

Please visit AngularUI Router's docs to learn more.

API

##name

Properties	Type	Details
(optional)	String	The name of a 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 details, check out the ui-view documentation for ui-router.

ion-view

Belongs to ionNavView. A container for content used to display view or navigation bar information.

The following is an example of a navigation bar loading page with the title "My 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

##Properties##title(optional). (optional) by default. (optional) is hidden by default. ion-nav-bar

Type	Details
String	Displayed in parent# The title of ##ionNavBar	hide-back-button
Boolean value	`Whether to hide the back button in the parent` ionNavBar	hide-nav-bar
Boolean value	`Whether the parent` ionNavBar

Create a top toolbar that updates when the program state changes.

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

PropertiesTypedelegate-handle(optional). (optional)##ion-nav-buttonsAffiliated to ionNavView

Details

Details
String	`The handle identifies this navigation bar with` $ionicNavBarDelegate	align-title
String	`The position where the navigation bar title is aligned. Available: 'left', 'right', 'center'. Defaults to 'center'.`

String

The handle identifies this navigation bar with $ionicNavBarDelegate

align-title

String

The position where the navigation bar title is aligned. Available: 'left', 'right', 'center'. Defaults to 'center'.

Set the buttons with ionNavButtons on the ionNavBar inside the ionView.

Any buttons you set will be placed in the corresponding position of the navigation bar and will be destroyed when the user leaves the parent view.

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

Properties

TypeDetailssideString

The button is placed in the parent ionNavBar Location. Available: 'left' or 'right'.

ion-nav-back-button

Create a button in an ionNavBar.

When the user can go back in the current navigation, 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>

Customize the click action, use $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();
  };
}

Display the previous title on the back button, also Use $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 is an attribute directive used when clicking an element on the view, such as a <a href> or a <button ui- sref>.

When clicked, nav-clear will cause the given element to disable the next view transition. This command is useful, for example, for links within sidebar menus.

Usage

The following is a link with the nav-clear command added to the sidebar menu. Clicking this link will disable any animation between views.

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

ion-nav-title

ion-nav-title is used to set the title in the 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

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

Usage

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

nav-direction

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

Usage

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

$ionicNavBarDelegate

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

Method

align([direction])

Go back in browsing history.

##Event object (such as from a click event)

align([direction])

The title with the button is aligned to the specified direction.

Parameters	Type	Details
event (Optional)	##DOMEvent

ParametersdirectionStringThe direction in which the title text is aligned. Available: 'left', 'right', 'center'. Default: 'center'.

Type	Details
(optional)

Return value:

Boolean value, whether the back button is displayed.

showBar(show)

Set or get whether ion-nav-bar is displayed.

ParametersshowBoolean valueWhether the navigation bar is displayed.

Type	Details

Return value:

Boolean value, whether the navigation bar is displayed.

showBackButton([show])

Set or get whether ion-nav-back-button is displayed.

ParametersshowBoolean valueWhether to display the back button

title(title)

Set the title for ion-nav-bar.

Type	Details
(Optional)

Parameters	Type	Details
title	`String`	Display new title.

$ionicHistory

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

Method

viewHistory()

is used to view history records.

currentView()

The current view of the app.

currentHistoryId()

The ID of the history stack 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 the title of the last viewed view.

forwardView()

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

currentStateName()

Return the current state name.

goBack([backCount])

app Rollback view, if the fallback view exists.

← ionic model

ionic platform →

submit

ionic navigation

ion-nav-view

Caching

Disable caching globally

Disable caching in STATE PROVIDER

Disable caching through properties

AngularUI Routing

API

Usage

Properties

ion-nav-back-button

Usage

nav-clear

Usage

ion-nav-title

Usage

nav-transition

Usage

nav-direction

Usage

$ionicNavBarDelegate

Usage

Method

$ionicHistory

Method

php.cn