navegação iônica

ion-nav-view

Quando os usuários navegar para o seu aplicativo quando, Jónico capaz de detectar o histórico de navegação. Ao detectar histórico de navegação, deslize para a esquerda ou para a direita para alcançar quando convertido adequadamente vistas.

Usando roteador AngularUI interfaces do módulo e outras aplicações podem ser divididas em diferentes $ state (estado). núcleo angular para os serviços de encaminhamento, URLs podem ser usadas para controlar o ponto de vista.

AngularUI rota fornece um mais poderoso gerenciamento de estado, esse estado pode ser nomeado, aninhado, ea fusão de vista, para permitir que mais de um modelo apresentado na mesma página.

Além disso, cada estado não precisa ser vinculado a um URL, e os dados podem ser mais flexível para empurrar cada estado.

O exemplo a seguir, vamos criar um aplicativo de visualização de navegação contém diferentes estados.

Nossa ionNavView tag selecção do comando top. Exibir um cabeçalho de coluna que ionNavBar instruções através da atualização de navegação.

Em seguida, precisamos definir nossa processar valor do estado.

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

Em seguida, abra o aplicativo, $ stateProvider consulta url, para ver se o estado corresponde ao valor do índice, em seguida, carregar o index.html para <ion-nav-view>.

A página é carregada através de URLs configurado. Criar um modelo da forma mais simples é diretamente Angular colocá-lo no arquivo de modelo html e use <script type = "text / ng-template"> contém.

Portanto, esta é uma maneira de home.html adicionado ao nosso APP no passado:

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

tente »

Este é um bom caminho, porque o modelo vai rapidamente carregado e o cache é diferente de passar por a carga da rede.

caching

Em circunstâncias normais, as visões são armazenadas em cache pode melhorar o desempenho. Quando fora de vista, seu elemento é mantido no Dom, e seu escopo também é removido do $ relógio.

Quando saltar tem sido vista em cache, a exibição será ativada, o seu âmbito é reconectado, Dom também salvou seu elemento. Isso também permite que para manter a posição de exibição de rolagem anterior.

Caching também pode ser muitas maneiras de ligar e desligar. número máximo padrão Ionic da cache de páginas é 10, e este não é o único personalizável, o aplicativo pode definir explicitamente o estado de exibição não deve ser armazenado em cache.

Observe que, como estamos fazendo cache esses pontos de vista, nós não destruir escopo. Em vez disso, ele também é removido do âmbito do relógio $.

Porque a próxima alcance de visualização não tenha sido destruída e reconstruída, o controlador não está carregado novamente. Se o app / controller precisa saber quando entrar ou sair de um ponto de vista, e depois ver o evento de problema acção ionView, como $ ionicView.enter, pode ser útil.

caching desativar global

cache de $ IonicConfigProvider pode ser usado para definir o número máximo permitido de pontos de vista, definindo como 0 para desativar todos os caches.

$ionicConfigProvider.views.maxCache(0);

caching Desativar PROVEDOR DE ESTADO

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

Desativar o cache através da propriedade

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

rota AngularUI

Visite docs de AngularUI Router para mais.

API

propriedade	tipo	detalhe
nome (Opcional)	`字符串`	Um nome da exibição. Esse nome deve ser os únicos outros pontos de vista no mesmo estado. Você pode ter uma visão de mesmo nome em um estado diferente. Para mais informações, ver o ui-router documento ui-view .

ion-view

Affiliated ionNavView. O conteúdo de um contêiner para exibição exibição ou informações de navegação.

Aqui está uma barra de navegação com um "A Minha Página" título para carregar a página de exemplo.

<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

propriedade	tipo	detalhe
título (Opcional)	`字符串`	É apresentado no pai `ionNavBar` título.
hide-back-button (Opcional)	`布尔值`	Por padrão, se o pai `ionNavBar` ocultar o botão de volta.
hide-nav-bar (Opcional)	`布尔值`	Por padrão, se você ocultar o pai `ionNavBar` .

ion-nav-bar

Criar uma barra de ferramentas na parte superior, quando o programa atualiza a mudança de status.

uso

<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

propriedade tipo detalhe

propriedade	tipo	detalhe
delegado-handle (Opcional)	`字符串`	O punho com `$ionicNavBarDelegate` identifica a barra de navegação.
alinhar-título (Opcional)	`字符串`	título barra de navegação posição alinhada. Disponível: 'centro' 'esquerda', 'direito',. O padrão é "centro".

delegado-handle

(Opcional)

字符串

O punho com $ionicNavBarDelegate identifica a barra de navegação.

alinhar-título

(Opcional)

字符串

título barra de navegação posição alinhada. Disponível: 'centro' 'esquerda', 'direito',. O padrão é "centro".

íon-nav-buttons

Affiliated ionNavView

Em ionNavBar ionView dentro com o botão ionNavButtons Configurações.

Qualquer botão definido será colocado na posição apropriada da barra de navegação, quando o usuário deixa a vista principal será destruído.

uso

<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

propriedade	tipo	detalhe
lado	`字符串`	O pai `ionNavBar` colocação botão de posição. Disponível: "esquerda" ou "direita".

ion-nav-back-button

Criar um botão em um ionNavBar in.

Quando o usuário pode navegar na atual recessão, o botão de volta será exibido.

uso

ação do botão padrão:

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

clique em Personalizar ação, com US $ 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();
  };
}

No botão Voltar exibe o título anterior, mas também com US $ 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();
  };
}

nav-clear

atributos nav-claras utilizado um comando quando você clica sobre o ponto de vista elemento quando tal <a href> ou um botão <ui-SREF>.

Quando clicado, nav-clara irá resultar em um determinado elemento é proibida sob o volume de negócios de uma vista. Este comando é útil, por exemplo, liga o menu lateral.

uso

Aqui está um menu lateral para adicionar um link para NAV-clara instrução. Ao clicar no link irá desativar qualquer animação entre as vistas.

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

ion-nav-título

ion-nav-título do modelo de íon-view é usado para definir o título.

uso

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

nav-transição

Defina o tipo de transição pode ser usado: iOS, Android, e nenhum.

uso

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

nav-direção

Definir Nav vista transição direção de animação, quer para a frente, para trás, entrar, sair, swap.

uso

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

$ IonicNavBarDelegate

instruções ion-nav-barra de controle direito.

uso

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

caminho

align([direction])

Voltar no histórico de navegação.

parâmetros	tipo	detalhe
evento (Opcional)	`DOMEvent`	objetos de eventos (tais como a partir de um evento de clique)

align([direction])

Título com botões alinhados com a direcção especificada.

parâmetros	tipo	detalhe
direção (Opcional)	`字符串`	A direção alinhamento do texto título. Disponível: 'centro' 'esquerda', 'direito',. Padrão: 'centro'.

Valor de retorno: botão Boolean valor de volta é exibido.

showBar(show)

Obtém ou define o ion-nav-bar é exibida.

parâmetros	tipo	detalhe
mostra	`布尔值`	barra de navegação é exibida.

valor de retorno: boolean barra de navegação é exibida.

showBackButton([show])

Obtém ou define o-nav-back-botão ion é exibida.

parâmetros	tipo	detalhe
mostra (Opcional)	`布尔值`	Se deseja exibir o botão voltar

title(title)

Definir a legenda ion-nav-bar.

parâmetros	tipo	detalhe
título	`字符串`	Exibir o novo título.

$ IonicHistory

$ IonicHistory usado para rastrear o histórico de navegação de um usuário dentro do aplicativo.

caminho

viewHistory()

Para visualizar a história.

currentView()

A visão atual do aplicativo.

currentHistoryId()

História pilha de ID, é o contêiner pai do atual exibição.

currentTitle([val])

Obtém ou define o título da exibição atual.

backView()

Voltar à última vista visualizado.

backTitle()

Obter título da vista última navegação.

forwardView()

Vista traseira em uma visão histórica da pilha atual.

currentStateName()

Retorna o nome do estado atual.

goBack([backCount])

app vista rollback, se a reversão de vista existe.

Anterior: janela modal iônica

Seguinte: Plataforma iônica

ionic curso

ionic CSS

ionic JavaScript

navegação iônica

navegação iônica

ion-nav-view

caching

caching desativar global

caching Desativar PROVEDOR DE ESTADO

Desativar o cache através da propriedade

rota AngularUI

API

ion-view

API

ion-nav-bar

uso

API

íon-nav-buttons

uso

API

ion-nav-back-button

uso

nav-clear

uso

ion-nav-título

uso

nav-transição

uso

nav-direção

uso

$ IonicNavBarDelegate

uso

caminho

$ IonicHistory

caminho