See the Pen Tabs And Navigation: Nightly by Ionic (@ionic) on CodePen.
Пользователь использует навигацию для переходов по приложению, а Ionic способен отслеживать историю его перемещений. Зная историю, переходы между видами представлений корректно происходят во всех направлениях с использованием стиля переходов, характерным для платформы. Дополнительное преимущество навигационной системы Ionic состоит в его способности управлять несколькими историями. Например, каждая вкладка может иметь свою историю перемещений.
Ionic использует модуль AngularUI Router, поэтому интерфейсы приложений могут быть организованы в различные "состояния". Как и базовый $route-сервис у Angular, управлять видами представлений так же могут и URL. Однако AngularUI Router является более мощным менеджером состояний, состояния привязаны к видам - с именем, вложенным и параллельным, позволяя более, чем одному шаблону быть представленным на одной и той же странице. К тому же каждое состояние не обязательно должно быть привязано к URL, и данные могут доставляться к каждому из состояний, которые позволяют большую гибкость.
Директива ionNavView используется для рендеринга шаблонов в ваше приложение. Каждый шаблон является частью состояния. К состояниям обычно привязан адрес URL, и они определяются программным образом с помощью angular-ui-router (см. документы,
и помните, что в примерах нужно заменить ui-view на ion-nav-view).
Применение
В этом примере мы создадим видовое представление навигации, которое содержит разные состояния для конкретного приложения.
Чтобы это сделать, в нашей разметке мы используем директиву верхнего уровня. Для отображения строки заголовка мы используем директиву 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, определяя, подходит ли он состоянию индекса, и затем попытается загрузить home.html в <
ion
-
nav
-
view
>
.
Страницы загружаются согласно заданным адресам URL. Один простой способ создания шаблонов в Angular предполагает записывать их напрямую в ваш HTML-файл и использовать синтакс <script type="text/ng-template">
.
Вот один из способов записи home.html в наше приложение:
<script id="home" type="text/ng-template">
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<a href="#/music">Go to music page!</a>
</ion-content>
</ion-view>
</script>
Это хороший способ, потому что шаблон будет помещаться в кэш и, следовательно, будет очень быстро загружаться, а не браться из сети.
Кеширование
По умолчанию виды представлений кэшируются, это улучшает производительность. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отключается от цикла $watch
. Когда перемещение в вид уже помещено в кэш, область видимости снова подключается, и существующий элемент, который был оставлен в DOM, становится активным видом представления. Это также позволяет поддерживать
положение полосы прокрутки предыдущих видов.
Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов, но не только этот параметр можно настраивать, приложения тоже могут прямо указывать, какие виды следует и не следует кэшировать.
Имейте в виду, что от того, что мы помещаем эти виды в кэш, мы не разрушаем области видимости. Вместо этого области видимости отключаются от цикла наблюдения. Так как области видимости не разрушаются и воссоздаются заново, контроллеры не загружаются опять при последующем просмотре. Если приложению/контроллеру требуется знать, когда вид вошел или вышел, то могут быть полезны события вида, которые генерируются из области видимости ionView
, такие как $ionicView.enter
.
По умолчанию, когда происходит перемещение назад в истории, "последующие" виды убираются из кэша.
Если вы перемещаетесь вперед, снова в тот же самый вид, то будет создан новый DOM-элемент и экземпляр контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Это можно конфигурировать, используя
$ionicConfigProvider
:
$ionicConfigProvider.views.forwardCache(true);
Глобальное отключение кэширования
Можно использовать $ionicConfigProvider
для того чтобы установить максимально разрешенное число видов, которое может быть помещено в кэш. Но эту функцию можно также использовать и для общего отключения кэширования, если числовое значение записать как 0.
$ionicConfigProvider.views.maxCache(0);
Отключение кэширования в рамках состояния провайдера
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Отключение кэширования с помощью значений атрибутов
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
AngularUI Router
Дополнительную информацию можно найти в AngularUI Router’s docs
Ниже вы найдете видеоролик, созданный командой, занимающейся разработкой AngularUI Router. Видео поможет объяснить, как это все работает.
API
Атрибут | Тип | Описание |
---|---|---|
name
(optional)
|
string |
Имя представления (вида). Имя должно быть уникальным среди других видов представлений в одном и том же состоянии. У вас могут быть виды с одинаковыми именами, но они будут существовать в других состояниях. Более подробную информацию смотрите в документации ui-view в разделе ui-router |