ionic (3): rutas

Sistema de rutas con ion-nav-view

Henri Rousseau

archivado en: JavaScript / 6 agosto, 2015 / taller:

Seguimos con nuestra aplicación estelar. Lo que sigue se podría hacer de forma mucho más sencilla, todo en una misma vista, pero vamos a sacrificar elegancia por didáctica : ).

En la entrada anterior preparamos el header y el footer comunes de la aplicación, en esta vamos con lo que hay en medio y para eso vamos a utilizar el sistema tuneado de ui-router que usa ionic, que es igual que el original pero con transiciones más chulas.

La idea es que al pulsar los botones de abajo, se vayan cambiando las plantillas de la parte central, las cuales se irán inyectando en el tag <icon-nav-view>. Sin embargo, por un bug de ionic, tenemos que wrapear este último tag en un div o similar al que aplicarle un margen superior (o cepillarnos la cabecera predefinida de ionic, que no aporta nada realmente útil). Como de momento no vamos a enredarnos con sass, pues lo importante es comprender el js, pongo los estilos a capón:

index.html

<div class="bar bar-header bar-positive">

<h1 class="title">Star War's Search</h1>

</div>

<div style="margin-top:60px;">

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

</div>

<div class="bar bar-footer bar-positive">

... resto del footer

Para terminar con esta vista, solo nos falta añadir un enlaces del tipo ui-sref en los botones, que son enlaces internos que luego interceptaremos en el config.

<div class="bar bar-footer bar-positive">

<div class="buttons">

<button class="button button-calm ion-ios-ionic-outline" ui-sref="planets"> planets</button>

<button class="button button-calm ion-person" ui-sref="people"> people</button

<button class="button button-calm ion-social-octocat" ui-sref="species"> species</button>

<button class="button button-calm ion-android-bicycle" ui-sref="starships"> starships</button>

</div>

</div>

Hecho esto, vamos a preparar las plantillas de cada buscador y de la página principal, que guardaremos en templates. Las podemos llamar de igual manera que los estados:

  • main.html
  • planets.html
  • people.html
  • species.html
  • starships.html

Cada una de estas plantillas tendrá un tag contenedor principal llamado ion-content, que es una directiva de ionic que permite definir el scroll, el padding y otros detalles que veremos más adelante.

Algo así en cada plantilla:

<ion-content>

todo: plantilla main

</ion-content>

Ya que estamos preparando el esqueleto de la aplicación -que, insisto, no es el más apropiado, pero sí el más didáctico-, vamos a dejar listos los controladores de cada plantilla. Algo así en el archivo controllers.js:

angular.module('starWars.controllers', [])

.controller('main', function($scope) {

})

.controller('planets', function($scope) {

})

.controller('people', function($scope) {

// todo

})

.controller('species', function($scope) {

})

.controller('starships', function($scope) {

// todo

});

Bueno, pues ya casi tenemos preparado el ruteado de la aplicación, tan solo nos falta definirlo en el config asociando pares de plantilla + controlador.

app.js

.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/')

$stateProvider

.state('main', {

url: '/',

templateUrl: "templates/main.html",

controller: 'main'

})

.state('planets', {

url: "/planets",

templateUrl: "templates/planets.html",

controller: 'planets'

})

.state('people', {

url: "/people",

templateUrl: "templates/people.html",

controller: 'people'

})

.state('species', {

url: "/species",

templateUrl: "templates/species.html",

controller: 'species'

})

.state('starships', {

url: "/starships",

templateUrl: "templates/starships.html",

controller: 'starships'

});

});

Ale op, si levantamos ahora un server con ionic serve, en localhost podemos comprobar cómo funciona este primer esqueleto de la aplicación. Sigo otro día....

|| Tags: ,

valoración de los lectores sobre ionic (3): rutas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 2.3 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.