ионная навигация

ионно-нав-просмотр

Когда пользователи просматривают к вашему приложению, когда ионному в состоянии обнаружить историю просмотра. Обнаруживая историю просмотра, проведите пальцем влево или вправо, чтобы достичь при правильном конвертированы взглядов.

Использование интерфейсов модуля AngularUI маршрутизатора и другие приложения могут быть разделены на различные $ государства (государства). Угловое ядро для маршрутизации служб, URL-адреса могут быть использованы для управления представлением.

AngularUI маршрут обеспечивает более мощное государственное управление, что состояние можно назвать, вложенные, и слияние зрения, чтобы позволить более одного шаблона представлены на той же странице.

Кроме того, каждое состояние не нужно быть связаны с URL, а данные могут быть более гибкими, чтобы подтолкнуть каждого состояния.

В следующем примере мы создадим вид навигации приложение содержит различные состояния.

Наш выбор ionNavView тег в качестве верхней команды. Вывести заголовок столбца мы ionNavBar инструкции по обновлению навигации.

Далее, нам нужно установить наш оказать государственное значение.

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

Затем откройте приложение, $ stateProvider запросов URL, чтобы увидеть, соответствует ли состояние значение индекса, а затем загрузить index.html к <ион-СЧА вид>.

При загрузке страницы через URL-адреса настроены. Создать шаблон самым простым способом является непосредственно Угловое поместить его в файл шаблона HTML и использовать <сценарий типа = "текст / нг-шаблон"> содержит.

Так что это способ home.html добавлен в наш 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>

Попробуйте »

Это хороший способ, потому что быстро загружается шаблон и кэш отличается пройти через сетевой нагрузки.

Кэширование

При нормальных обстоятельствах, вид кэшируются может улучшить производительность. Когда из поля зрения, его элемент удерживается в Dom, и сфера его применения также удаляется от $ часов.

Когда мы прыгаем был кэшируются вид, вид будет активирован, его объем повторного подключения, Дом также сохранен его элемент. Это также позволяет сохранить предыдущую позицию вид прокрутки.

Кэширование также может быть много способов для включения и выключения. Ионные умолчанию максимальное количество кэш страниц составляет 10, и это не единственный настраиваемый, приложение может явно установить состояние представления не следует сохранять в кэше.

Обратите внимание, что поскольку мы кэшируем эти взгляды, мы не разрушают рамки. Вместо этого, он также удаляется из объема $ часов.

Потому что следующий сфера обзора не был разрушен и восстановлен, контроллер не загружен снова. Если приложение / контроллер нужно знать при входе или выходе из него вид, а затем просматривать события от вопроса действия ionView, такие как $ ionicView.enter, это может быть полезно.

Глобальное отключение кэширования

Кэш $ IonicConfigProvider может использоваться, чтобы установить максимально допустимое число просмотров, установив 0, чтобы отключить все кэши.

$ionicConfigProvider.views.maxCache(0);

Отключить кэширование в штате PROVIDER

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

Отключение кэша через свойство

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

маршрут AngularUI

Посетите Docs AngularUI маршрутизатора больше.

API

свойство	тип	деталь
имя (Необязательно)	`字符串`	Имя вида. Это имя должно быть только другие виды в том же состоянии. Вы можете иметь вид одного и того же имени в другом государстве. Для получения дополнительной информации, просмотра Ui-маршрутизатор UI-просмотра документа .

ионно-просмотр

Дочернее ionNavView. Содержимое контейнера для вида дисплея или навигационной информации.

Вот панель навигации с "Моя страница" заголовок, чтобы загрузить образец страницы.

<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

свойство	тип	деталь
название (Необязательно)	`字符串`	Он отображается в родительской `ionNavBar` названии.
скрыть-обратно-кнопка (Необязательно)	`布尔值`	По умолчанию, если родительский `ionNavBar` скрыть кнопку назад.
скрыть-нав-бар (Необязательно)	`布尔值`	По умолчанию, если вы скрываете родителя `ionNavBar` .

ионно-нав-бар

Создание панели инструментов в верхней части, когда программа обновляет изменения состояния.

использование

<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

свойство тип деталь

свойство	тип	деталь
Делегат-ручка (Необязательно)	`字符串`	Ручка с `$ionicNavBarDelegate` идентифицирует панель навигации.
выравнивать-заголовок (Необязательно)	`字符串`	Панель навигации Название выравнивается положение. Доступно: "левый", "правый", "центр". По умолчанию это 'центр'.

Делегат-ручка

(Необязательно)

字符串

Ручка с $ionicNavBarDelegate идентифицирует панель навигации.

выравнивать-заголовок

(Необязательно)

字符串

Панель навигации Название выравнивается положение. Доступно: "левый", "правый", "центр". По умолчанию это 'центр'.

-Nav-кнопки иона

Дочернее ionNavView

На ionNavBar ionView внутри с помощью кнопки ionNavButtons Settings.

Любая кнопка настройка будет помещен в соответствующее положение навигационной панели, когда пользователь покидает будет разрушен родительский вид.

использование

<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

свойство	тип	деталь
сторона	`字符串`	Родитель `ionNavBar` Кнопка позиционирования размещения. Доступно: "левый" или "правый".

ионно-нав-обратно-кнопка

Создание кнопки в ionNavBar в.

Когда пользователь может перемещаться в текущей рецессии, будет отображаться кнопка назад.

использование

Действие по умолчанию кнопка:

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

Пользовательские нажмите действия, с $ 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();
  };
}

На кнопке Назад отображается предыдущий заголовок, но и с $ 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();
  };
}

СЧА ясно

нав отбоя атрибуты используются команды при нажатии на представлении элемента, когда такое <a href> или кнопку <щ-sref>.

При нажатии нав чистый приведет к данному элементу запрещена по обороту в целях. Эта команда полезна, например, ссылки меню на боковой панели.

использование

Вот меню боковой панели, чтобы добавить ссылку на СЧА четкие инструкции. При щелчке по ссылке будет отключить любую анимацию между видами.

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

ионно-нав-заголовке

ионно-нав-шаблон название ионно-просмотра используется для установки заголовка.

использование

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

нав-переход

Установите тип перехода, используемый может быть: ИОС, Android, и никто.

использование

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

нав-направление

Установить Nav вид перехода направление анимации, либо вперед, назад, войти, выйти, своп.

использование

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

$ IonicNavBarDelegate

контроль Entitlement ионно-нав-бар инструкция.

использование

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

способ

align([direction])

Еще в истории просмотра.

параметры	тип	деталь
событие (Необязательно)	`DOMEvent`	Объекты событий (например, из события щелчка)

align([direction])

Название с кнопками выровненных по указанному направлению.

параметры	тип	деталь
направление (Необязательно)	`字符串`	Текст заголовка направление выравнивания. Доступно: "левый", "правый", "центр". По умолчанию: 'центр'.

Возвращаемое значение: отображается кнопка Логическое значение назад.

showBar(show)

Получает или задает отображается ионно-нав-бар.

параметры	тип	деталь
шоу	`布尔值`	отображается панель навигации.

Возвращаемое значение: отображается логическое панель навигации.

showBackButton([show])

Получает или задает отображается-нав-обратно кнопки иона.

параметры	тип	деталь
шоу (Необязательно)	`布尔值`	Независимо от того, чтобы отобразить кнопку назад

title(title)

Установите заголовок ионно-Nav-бар.

параметры	тип	деталь
название	`字符串`	Дисплей новое название.

$ IonicHistory

$ IonicHistory используется для отслеживания истории просмотра пользователя в приложении.

способ

viewHistory()

Для просмотра истории.

currentView()

Текущий вид приложения.

currentHistoryId()

История стека ID, является родительским контейнером текущего вида.

currentTitle([val])

Получает или задает заголовок текущего вида.

backView()

Возврат к последнего просмотра зрения.

backTitle()

Получить титул Посмотреть последнее просмотра.

forwardView()

Вид сзади на исторической точки зрения текущего стека.

currentStateName()

Возвращает имя текущего состояния.

goBack([backCount])

Приложение вид отката, если откат зрения существует.

Предыдущая: ионную модальное окно

Далее: ионная платформа

ionic курс

ionic CSS

ionic JavaScript

ионная навигация

ионная навигация

ионно-нав-просмотр

Кэширование

Глобальное отключение кэширования

Отключить кэширование в штате PROVIDER

Отключение кэша через свойство

маршрут AngularUI

API

ионно-просмотр

API

ионно-нав-бар

использование

API

-Nav-кнопки иона

использование

API

ионно-нав-обратно-кнопка

использование

СЧА ясно

использование

ионно-нав-заголовке

использование

нав-переход

использование

нав-направление

использование

$ IonicNavBarDelegate

использование

способ

$ IonicHistory

способ