ion-nav-view

Пользователь использует навигацию для переходов по приложению, а 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