Ionic — Javascript Navigation

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

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

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

Служба $ 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 Code

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

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

код state1.html

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

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

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

index.html Code

<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 . Этот элемент должен быть размещен внутри ion-nav-bar или ion-view . Мы можем присвоить атрибут side четырьмя значениями параметров. Первичные и вторичные значения разместят кнопки в соответствии с используемой платформой. Иногда вам нужны кнопки на одной стороне, независимо от того, это IOS или Android. Если это так, вы можете использовать левый или правый атрибуты.

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

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

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

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

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

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

Кэширование

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

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

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

Методы для $ ionicHistory

Метод nextViewOptions () имеет следующие три доступные опции.

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

disableBack установит нулевой вид сзади.

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