ionic navigation

ionic navigation

---

ion-nav-view

Ionic detects browsing history when users browse through your app. By detecting browsing history, you can correctly convert views when you swipe left or right.

Application interfaces such as the Angelui router module can be divided into different $state (states). At the heart of Angular is routing services, which URLs can use to control views.

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

In addition, each state does not need to be bound to a URL, and data can be pushed to each state with more flexibility.

In the following example, we'll create a navigation view of an application that contains different states.

Our tag selects ionNavView as the top-level instruction. Show a header bar and we update it with the ionNavBar instruction through navigation.

Next, we need to set the state values that we will render.

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 app, $stateProvider will query the url to see if the index status value is matched, and then load index.html to the slt;ion-nav-view.gt;.

Page loads are configured with URLs. T he easiest way to create a template in Angular is to put him directly into the html template file and include it with the "text/ng-template" type.

So it's also a way .html home to our APP:

<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 out . . .

This is a good approach because templates load quickly and are cached differently over the network.

---

Cache

Typically, views are cached to improve performance. When the view is jumped out, his element is retained in the Dom, and its scope is removed from $watch the view.

When we jump to a cached view, the view is activated, its scope is reconnected, and Dom also saves his elements. This also allows you to keep the previous view scrolling position.

Caches can also be turned on and off in many ways. The default Ionic will have a maximum cache of 10 pages, and this is not the only one that can be customized, and applications can explicitly state to set the view should not be cached.

Note that because we are caching these views, we are not breaking scopes. I nstead, its scope is also removed from $watch of the database.

Because the next viewing scope was not destroyed and rebuilt, the controller was not loaded again. If the app/controller needs to know when to enter or leave a view, it may be useful to have a re-view event issued from within the ionView role, such as $ionicView.enter.

Cache is disabled globally

$ionicConfigProvider can be used to set the maximum number of views allowed to cache, and to disable all caches by setting 0.

$ionicConfigProvider.views.maxCache(0);

Disable caching in STATE PROVIDER

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

The cache is disabled by properties

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

AngularUI routing

Visit AngularUI Router's docs for more information.

Api

Property	Type	Details
name (Optional)	字符串	The name of a view. T he name should be unique in other views in the same state. Y ou can have views with the same name in different states. For more information, check out the ui-view documentation for ui-router.

---

ion-view

Belongs to ionNavView. A container of content that displays view or navigation bar information.

Here's an example of a navigation bar loaded with the Title of 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

Property	Type	Details
title (Optional)	字符串	The title that ionNavBar
hide-back-button (Optional)	布尔值	By default, the back button ionNavBar
hide-nav-bar (Optional)	布尔值	By default, whether to hide ionNavBar

---

ion-nav-bar

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

Property	Type	Details
delegate-handle (Optional)	字符串	The handle $ionicNavBarDelegate with a button.
align-title (Optional)	字符串	The position where the navigation bar title is aligned. A vailable: 'left', 'right', 'center'. The default is 'center'.

---

ion-nav-buttons

Belongs to ionNavView

Set the button with ionNavButtons on the ionNavBar in ionView.

Any buttons you set will be placed in the appropriate position in the navigation bar and 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

Property	Type	Details
side	字符串	Where the ionNavBar Available: 'left' or 'right'.

---

ion-nav-back-button

Create a button in one ionNavBar.

When the user is able to go back in the current navigation, the back button is 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 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();
  };
}

Show the last title on the back button, 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 A property instruction that is used when clicking on an element on a view, such as a slt;a href> or a slt;button ui-sref>.

When clicked, nav-clear will result in a given element that prevents the conversion of the next view. This instruction is useful, for example, for links within a sidebar menu.

Usage

Below is a link to the nav-clear instruction added to a sidebar menu. Clicking on the link disables 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 types 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

Authorize control of the ion-nav-bar instruction.

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 the history of browsing.

Parameters	Type	Details
event (Optional)	DOMEvent	Event objects (e.g. from click events)

align([direction])

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

Parameters	Type	Details
direction (Optional)	字符串	The direction in which the title text is aligned. A vailable: 'left', 'right', 'center'. Default: 'center'.

Return value: Boolean value, whether the back button is displayed.

showBar(show)

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

Parameters	Type	Details
show	布尔值	Whether the navigation bar is displayed.

Return value: Boolean value, whether the navigation bar is displayed.

showBackButton([show])

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

Parameters	Type	Details
show (Optional)	布尔值	Whether to display the back button

title(title)

Set the title for ion-nav-bar.

Parameters	Type	Details
title	字符串	Show the new title.

---

$ionicHistory

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

Method

viewHistory()

Used to view history.

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()

Returns the view you last viewed.

backTitle()

Gets the title of the view you last viewed.

forwardView()

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

currentStateName()

Returns the current status name.

goBack([backCount])

The app rolls back the view if the fallback view exists.