#Patrones de navegación

##1. navegación

Relación padre-hijo
Uso: mediante botones o enlaces

<ons-navigator title="Navigator" var="myNavigator"> <ons-page> <ons-toolbar> <div class="center">Simple Navigation</div> </ons-toolbar> <div style="text-align: center"> <br> <ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )"> Push Page </ons-button> </div> </ons-page> </ons-navigator>

ons-navigator: És un administrador de una pila de páginas y animador de transiciones. Las páginas que puede almacenar son del tipo ons-page, este no es visible en nuestra app
ons-toolbar: nos permite navegar por diferentes páginas, este debe incluirse dentro de ons-page

###Uso desde javascript

var options = { animation: 'slide', // Tipo de animación ( slide, lift, fade, none ) onTransitionEnd: function() {} // LLamada cuando termina la animación de transición }; // traer pagina al frente myNavigator.pushPage("page2.html", options); // volver a la pagina en la pila myNavigator.popPage();

###Uso de la pila de páginas ####navigator.getCurrentPage()

myNavigator.pushPage("page2.html", { param1: "value1", param2: "value2" }); var page = myNavigator.getCurrentPage(); console.log(page.options.param1); // Will return "value1" // page.destroy() -> quita la pagina de la pila

####navigator.getPages()

// Remove the 2nd topmost page from the page stack var pages = navigator.getPages(); pages[1].destroy(); // Now a popPage() will display the 3rd page

####navigator.insertPage(index, page, options)

index = 0 -> al fondo de la pila
index = -1 -> debajo de la página actual

<ons-navigator var="myNavigator"> <ons-page> <ons-toolbar> <div class="left"><ons-back-button ng-show="myNavigator.pages.length > 1">Back</ons-back-button></div> <div class="center">Navigator</div> </ons-toolbar> <div style="text-align: center"> <br> <ons-button modifier="light" onclick="myNavigator.insertPage(-1, 'page1.html', {param: 'value'})"> Insert Page Below </ons-button> </div> </ons-page> </ons-navigator> 

####navigator.resetToPage(page, options) Limpia la pila y añade la página a una nueva pila

##2. menú desplazable Se usa cuando necesitamos muchas páginas en el mismo nivel Uso: mediante desplazamiento o botón en barra superior

<ons-sliding-menu>

##3. Tab bar Se usa para proporcionar de varias características a la aplicación Uso: botonera en barra inferior

 <ons-tabbar>

##4. vista dividida Se usa generalmente en tablets o dispositivos con pantallas grandes Uso: menú lateral

 <ons-split-view>