Ионный - навигация по Javascript

Навигация - один из основных компонентов каждого приложения. Ionic используетAngularJS UI Router для управления навигацией.

Использование навигации

Навигацию можно настроить в app.jsфайл. Если вы используете один из шаблонов Ionic, вы заметите$stateProvider сервис, внедренный в приложение config. Самый простой способ создания состояний для приложения показан в следующем примере.

В $stateProvider сервис просканирует URL, найдет соответствующее состояние и загрузит файл, который мы определили в app.config.

app.js Код

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

Состояние будет загружено в ion-nav-view элемент, который можно разместить в index.html тело.

index.html Код

<ion-nav-view></ion-nav-view>

Когда мы создавали состояния в вышеупомянутом примере, мы использовали templateUrl, поэтому, когда состояние загружено, оно будет искать соответствующий файл шаблона. Теперь мы откроемtemplates папку и создайте новый файл state1.html, который будет загружен при изменении URL-адреса приложения на /state1.

state1.html Code

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

Создание меню навигации

Вы можете добавить панель навигации к своему приложению в index.html тело, добавив “ion-nav-bar”элемент. Внутри панели навигации мы добавимion-nav-back-buttonсо значком. Это будет использоваться для возврата в предыдущее состояние. Кнопка появится автоматически при изменении состояния. Мы назначимgoBack() функция, которая будет использовать $ionicHistoryсервис для обработки этой функции. Следовательно, когда пользователь выходит из домашнего состояния и переходит вstate1появится кнопка возврата, которую можно нажать, если пользователь захочет вернуться в исходное состояние.

index.html Код

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

Код контроллера

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}

Добавление элементов навигации

Кнопки можно добавить на панель навигации с помощью ion-nav-buttons. Этот элемент следует разместить внутриion-nav-bar или ion-view. Мы можем назначитьsideатрибут с четырьмя значениями параметров. Вprimary и secondaryvalues ​​разместят кнопки в соответствии с используемой платформой. Иногда вам нужны кнопки на одной стороне, независимо от того, IOS это или Android. Если это так, вы можете использоватьleft или right атрибуты вместо этого.

Мы также можем добавить ion-nav-titleна панель навигации. Весь код будет помещен вindex.html body, поэтому его можно использовать везде.

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
	
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

Это создаст следующий экран -

Другие атрибуты навигации

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

Атрибуты навигации

Атрибут	Параметры	Деталь
навигационный переход	нет, iOS, Android	Используется для установки анимации, которая должна применяться при переходе.
навигационное направление	вперед, назад, войти, выйти, поменять местами	Используется для установки направления анимации при переходе.
hardwareBackButtonClose	Булево	Это позволит закрыть модальное окно при нажатии аппаратной кнопки возврата. Значение по умолчанию - истина.

Кеширование

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

$ionicCinfigProvider.views.forwardCache(true);

Мы также можем установить, сколько состояний следует кэшировать. Если мы хотим кэшировать три представления, мы можем использовать следующий код.

$ionicConfigProvider.views.maxCache(3);

Кеширование можно отключить внутри $stateProvider или установив атрибут на ion-view. Оба примера приведены ниже.

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

Управление панелью навигации

Мы можем управлять поведением панели навигации, используя $ionicNavBarDelegateслужба. Эту службу необходимо внедрить в наш контроллер.

HTML код

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

Код контроллера

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

В $ionicNavBarDelegateУ сервиса есть и другие полезные методы. Некоторые из этих методов перечислены в следующей таблице.

Методы для $ ionicNavBarDelegate

Метод	Параметр	Тип	Деталь
выровнять (параметр)	центр, слева, справа	строка	Используется для выравнивания заголовка.
showBackButton (параметр)	Показать	Булево	Используется для отображения или скрытия кнопки возврата.
заголовок (параметр)	заглавие	строка	Используется для отображения нового названия.

История отслеживания

Вы можете отслеживать историю предыдущего, текущего и прямого просмотра, используя $ionicHistoryслужба. В следующей таблице показаны все методы этой службы.

Методы для $ ionicHistory

Метод	Параметр	Тип	Деталь
Посмотреть историю	/	объект	Возвращает данные истории просмотра приложения.
Текущий вид()	/	объект	Возвращает текущий вид.
заголовок (параметр)	заглавие	строка	Возвращает идентификатор представления, которое является родительским для текущего представления.
currentTitle (параметр)	вал	строка	Возвращает заголовок текущего представления. Его можно обновить, установив новыйval значение.
вид сзади()	/	строка	Возвращает последний вид сзади.
backTitle ()	/	строка	Возвращает заголовок последнего вида сзади.
forwardView ()	/	объект	Возвращает последний вид вперед.
currentStateName ()	/	строка	Возвращает имя текущего состояния.
Вернись()	backCount	количество	Используется для установки количества просмотров для возврата. Число должно быть отрицательным. Если он положительный или нулевой, это не повлияет.
чистая история()	/	/	Используется для очистки всей истории просмотров.
очистить кэш()	/	обещание	Используется для очистки всех кешированных представлений.
nextViewOptions ()	/	объект	Устанавливает параметры следующего вида. Вы можете посмотреть следующий пример для получения дополнительной информации.

В nextViewOptions() Доступны следующие три варианта.

• disableAnimate используется для отключения анимации следующего изменения вида.

• disableBack установит вид сзади на ноль.

• historyRoot установит следующее представление в качестве корневого.

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});