navegación iónica

ión-NAV-vista

Cuando el usuario navega a su aplicación cuando, iónico capaz de detectar el historial de navegación. Al detectar el historial de navegación, desliza el dedo hacia la izquierda o hacia la derecha para lograr cuando se convierte adecuadamente vistas.

Utilizando las interfaces de módulos de router AngularUI y otras aplicaciones se pueden dividir en diferentes estado $ (estado). núcleo angular para los servicios de enrutamiento, las direcciones URL se puede utilizar para controlar la vista.

AngularUI ruta ofrece un manejo más potente del estado, ese estado puede ser nombrado, jerarquizado, y la fusión de vista, para permitir que más de una plantilla presentada en la misma página.

Además, cada estado no tiene que estar ligado a una URL, y los datos pueden ser más flexibles para empujar cada estado.

En el siguiente ejemplo, vamos a crear una aplicación de vista de navegación contiene diferentes estados.

Nuestra selección de variables ionNavView como el alto mando. Mostrar una cabecera de la columna que ionNavBar instrucciones a través de la actualización de navegación.

A continuación, tenemos que establecer nuestra rendir valor de 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'
  });
});

A continuación, abra la aplicación, $ stateProvider consulta url, para ver si el estado coincide con el valor del índice, y luego cargar el index.html <ión-NAV-ver>.

La página se carga a través de las direcciones URL configuradas. Crear una plantilla de la forma más sencilla es directamente angular ponerlo en el archivo de plantilla HTML y utilizar <script type = "text / ng-plantilla"> contiene.

Así que esta es una manera de Home.html en nuestro APP en el pasado:

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

Trate »

Esta es una buena manera, porque la plantilla se carga rápida y la memoria caché es diferente para ir a través de la carga de la red.

El almacenamiento en caché

En circunstancias normales, las vistas se almacenan en caché puede mejorar el rendimiento. Cuando fuera de la vista, su elemento es retenido en el Dom, y su alcance también se retira del reloj $.

Cuando saltamos ha sido una vista en caché, se activará la vista, su ámbito de aplicación se vuelve a conectar, Dom también salvó su elemento. Esto también permite mantener la posición de la vista de desplazamiento anterior.

El almacenamiento en caché también puede haber muchas formas de encender y apagar. número máximo predeterminado iónica de páginas de caché es de 10, y esto no es la única personalizable, la aplicación puede establecer explícitamente el estado de vista no debe ser almacenado en caché.

Tenga en cuenta que ya que estamos almacenamiento en caché estos puntos de vista, no nos destruimos alcance. En lugar de ello, también se elimina del ámbito de aplicación del reloj $.

Debido a que el siguiente alcance de visión no ha sido destruida y reconstruida, el controlador no se carga de nuevo. Si la aplicación / controlador necesita saber al entrar o salir de un punto de vista, y luego ver el evento de problema ionView acción, tales como $ ionicView.enter, puede ser útil.

el almacenamiento en caché desactivar mundial

caché $ IonicConfigProvider se puede utilizar para establecer el número máximo permitido de puntos de vista por defecto con un 0 para desactivar todas las cachés.

$ionicConfigProvider.views.maxCache(0);

Deshabilitar en el almacenamiento en caché PROVEEDOR DE ESTADO

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

Desactivar la caché a través de la propiedad

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

ruta AngularUI

Visita docs AngularUI router para más.

API

propiedad	tipo	detalle
nombre (Opcional)	`字符串`	A nombre de la vista. Este nombre debe ser los únicos otros puntos de vista en el mismo estado. Usted puede tener una vista del mismo nombre en un estado diferente. Para obtener más información, ver la interfaz de usuario del router documento ui-view .

ión-vista

Afiliado ionNavView. El contenido de un contenedor para vista de la pantalla o la información de navegación.

Aquí está una barra de navegación con un "Mi Página" de dirigirse a cargar la página de ejemplo.

<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

propiedad	tipo	detalle
título (Opcional)	`字符串`	Se muestra en la matriz `ionNavBar` título.
ocultar-back-botón (Opcional)	`布尔值`	Por defecto, si el padre `ionNavBar` ocultar el botón de retroceso.
ocultar-NAV-bar (Opcional)	`布尔值`	Por defecto, si oculta el padre `ionNavBar` .

ión-NAV-bar

Crear una barra de herramientas en la parte superior, cuando el programa actualiza el cambio de estado.

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

propiedad tipo detalle

propiedad	tipo	detalle
delegado mango (Opcional)	`字符串`	El mango con `$ionicNavBarDelegate` identifica la barra de navegación.
alinear-título (Opcional)	`字符串`	Título de la barra de navegación posición alineada. Disponible: "izquierda", "derecha", "centro". El valor predeterminado es "centro".

delegado mango

(Opcional)

字符串

El mango con $ionicNavBarDelegate identifica la barra de navegación.

alinear-título

(Opcional)

字符串

Título de la barra de navegación posición alineada. Disponible: "izquierda", "derecha", "centro". El valor predeterminado es "centro".

-NAV-botones de iones

afiliado ionNavView

En ionNavBar ionView interior con botón de Configuración ionNavButtons.

Cualquier botón que estableció se coloca en la posición adecuada de la barra de navegación, cuando el usuario sale de la vista padre serán destruidos.

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

propiedad	tipo	detalle
lado	`字符串`	El padre `ionNavBar` colocación de los botones posición. Disponible: "izquierda" o "derecha".

ión-NAV-back-botón

Crear un botón en un ionNavBar en.

Cuando el usuario puede navegar en la recesión actual, se mostrará el botón de retroceso.

uso

acción del botón por defecto:

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

haga clic en Personalizado acción, con $ 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();
  };
}

En el botón de retroceso Se muestra el título anterior, sino también con $ 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-clara

atributos nav-claras utilizan un comando cuando se hace clic en la vista de los elementos cuando un <a tales href> o un <botón ui-sref>.

Al hacer clic, nav-clara dará lugar a un elemento dado está prohibida por la rotación de una vista. Este comando es útil, por ejemplo, los enlaces en el menú lateral.

uso

Aquí es un menú de la barra lateral para añadir un enlace a NAV-clara instrucción. Al hacer clic en el enlace desactivará cualquier animación entre las vistas.

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

ión-NAV-título

ión-NAV-título de la plantilla de iones vista se utiliza para definir el 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-transición

Establecer el tipo de transición usado puede ser: IOS, androide, y ninguno.

uso

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

NAV-dirección

Establecer la vista de navegación transición dirección de animación, ya sea hacia adelante, hacia atrás, entrar, salir, de intercambio.

uso

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

$ IonicNavBarDelegate

de control de derechos instrucciones ión-NAV-bar.

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

camino

align([direction])

De vuelta en el historial de navegación.

parámetros	tipo	detalle
evento (Opcional)	`DOMEvent`	Los objetos de evento (por ejemplo, a partir de un evento de clic)

align([direction])

Título con botones alineados a la dirección especificada.

parámetros	tipo	detalle
dirección (Opcional)	`字符串`	La dirección de alineación de texto de título. Disponible: "izquierda", "derecha", "centro". Por defecto: "centro".

Valor de retorno: se muestra el botón de Boole valor de nuevo.

showBar(show)

Obtiene o establece se muestra la barra de navegación por iones.

parámetros	tipo	detalle
espectáculo	`布尔值`	Se muestra la barra de navegación.

Valor de retorno: Se muestra la barra de navegación booleano.

showBackButton([show])

Obtiene o establece aparece indicado el NAV-back-botón de iones.

parámetros	tipo	detalle
espectáculo (Opcional)	`布尔值`	Si se muestra el botón de retroceso

title(title)

Establecer el ion-NAV-barra de título.

parámetros	tipo	detalle
título	`字符串`	Mostrar el nuevo título.

$ IonicHistory

$ IonicHistory utiliza para rastrear el historial de navegación de un usuario dentro de la aplicación.

camino

viewHistory()

Para ver el historial.

currentView()

La visión actual de la aplicación.

currentHistoryId()

Historia de ID de pila, es el contenedor primario de la vista actual.

currentTitle([val])

Obtiene o establece el título de la vista actual.

backView()

Volver a la última vista ver.

backTitle()

Obtener título de la vista última navegación.

forwardView()

Visión posterior en una visión histórica de la pila actual.

currentStateName()

Devuelve el nombre del estado actual.

goBack([backCount])

la aplicación Ver reversión, si la reversión de vista existe.

Anterior: ventana modal iónica

Siguiente: Plataforma iónica

ionic curso

ionic CSS

ionic JavaScript

navegación iónica

navegación iónica

ión-NAV-vista

El almacenamiento en caché

el almacenamiento en caché desactivar mundial

Deshabilitar en el almacenamiento en caché PROVEEDOR DE ESTADO

Desactivar la caché a través de la propiedad

ruta AngularUI

API

ión-vista

API

ión-NAV-bar

uso

API

-NAV-botones de iones

uso

API

ión-NAV-back-botón

uso

NAV-clara

uso

ión-NAV-título

uso

NAV-transición

uso

NAV-dirección

uso

$ IonicNavBarDelegate

uso

camino

$ IonicHistory

camino