El archivo
app.ts contiene la clase
Main de nuestra aplicación, si observamos el archivo existe la definición de clase
MyApp cuando ejecutamos la aplicación esta clase es la primera que se ejecuta y desde ésta se define cual es la pagina raíz de nuestra aplicación en nuestro caso se establece la clase
HomePage la cual es la pagina creada bajo el directorio
page/home.
Todas las paginas que crean en
Ionic deben tener una estructura como en el caso de la pagina
home, se usa el mismo nombre del directorio de la pagina para los archivos
home.html home.scss y
home.ts.
[ver archivo app/app.ts]
Ejecutar Aplicación
Para ejecutar la aplicación tenemos varias opciones, en mi anterior entrada
[Proyecto Inicial en Ionic2 y Angular2 usando una Plantilla en Blanco] mostré como probar la aplicación desde un
navegador web, ahora voy a mostrar como probar nuestra aplicación en dispositivo físico
Android y en un emulador
Android.
- Dispositivo Android: Se ejecuta la aplicación usando la siguiente instrucción desde linea de comandos.
$ ionic run android --livereload
Para que la instrucción tenga efecto en dispositivo físico Android se asume que exista un dispositivo Android conectado al equipo mediante USB y que tenga activa las opciones de depuración para programadores, Ionic automáticamente reconoce el dispositivo conectado, compila, instala y ejecuta la aplicación.
Con el atributo --livereload se indica que podemos tener una vista en vivo de los cambios que realicemos a nuestro código fuente de aplicación, de esta forma no tenemos que ejecutar constante mente el comando cada vez que realicemos un cambio que queremos ver.
- Emulador Android: Se ejecuta la aplicación usando la siguiente instrucción desde linea de comandos.
$ ionic emulate android --livereload
Para que la instrucción anterior tenga efecto se asume que exista un emulador creado de Android en el equipo.
 |
| Demo1 Ionic2 |
Realizar algunos Cambios
Vamos a modificar el archivo home.html cambiando el contenido, agregando un Botón y un Footer a la aplicación:
[ver archivo app/pages/home/home.html]
La estructura de una página para aplicación tiene un área de Header o encabezado, un área de Contenido y un área de Footer o pie de página.
El
header tiene una barra de navegación con titulo, a la cual podemos agregar otros elementos como botones o iconos. El elemento
ion-navbar sólo puede ser agregado dentro del elemento
header, si queremos agregar una barra similar pero al
footer o pie de pagina debemos usar el elemento
ion-toolbar al cual podemos agregar otros elementos como botones o iconos.
La
plantilla en
blanco no agrega tiene un estilo poco llamativo, podemos agregar un color o cambiar el estilo del botón.
Para agregar un color al
header y al
footer podemos usar la tabla de colores que se genera por defecto con el proyecto
Ionic o también podemos usar nuestros propios colores modificando el archivo
app.variables.scss:
[ver archivo app/theme/app.variables.scss]
Si queremos modificar un elemento con un color específico, podemos por ejemplo agregar el color correspondiente a
primary los elementos
ion-navbar y
ion-toolbar.
Si deseamos que nuestro botón tenga el ancho de todo el contenido en nuestra aplicación usamos el atributo
block al elemento
button.
 |
| Estilo Ionic2 |
Crear Páginas
Para crear páginas nuevas podemos usar la instrucción desde linea de comandos que nos provee
Ionic la cual construye los archivos necesarios para una página, Ionic usa una convención de nombres usando
kebob-casing para los archivos
.html .scss .ts incluyendo el nombre del
directorio, es recomendable usar esta convención de nombres ya que facilita la depuración de errores a los desarrolladores.
$ ionic g page Pagina1
El comando recibe como argumentos dos atributos, el atributo
page indica a
Ionic que se va a generar una página y el atributo
Pagina1 indica a
Ionic el nombre de la clase generada para la página.
Ionic automáticamente genera los nombres de los archivos y el directorio usando la convención
kebob-casing.
Cuando se crea la nueva página se genera la siguiente estructura de directorios en el directorio
app del proyecto:
app/
├──
app.ts
├── pages
│ ├──
home
│ │ ├──
home.html
│ │ ├──
home.scss
│ │ └──
home.ts
│ └──
pagina-1
│ ├──
pagina-1.html
│ ├──
pagina-1.scss
│ └──
pagina-1.ts
└── theme
├── app.core.scss
├── app.ios.scss
├── app.md.scss
├──
app.variables.scss
└── app.wp.scss
4 directories, 12 files
Para continuar vamos a crear otra pagina que tenga el nombre Pagina2, a continuación vamos a ver como crear una navegación básica entre las páginas generadas para el proyecto Ionic2.
Cuando ejecutamos el comando para generar páginas, nos muestra un mensaje similar al siguiente:
Don't forget to add an import for pagina-2.scss in app/themes/app.core.scss:
@import "../pages/pagina-2/pagina-2.scss";
Nos sugiere agregar el import para el estilo propio de la pagina-2.scss esto nos sirve para personalizar el estilo de cada pagina que nosotros creamos y no usar el estilo global definido para la aplicación en el archivo app.variables.scss.
Navegación entre Páginas
Para el caso concreto de realizar la navegación entre la página HomePage y la página Pagina1Page debemos tener en cuenta lo siguiente, primero debemos agregar al template de la pagina HomePage un botón con un evento de click que llame a una función de la clase HomePage en este caso la función tiene el nombre irPagina1().
Desde la función
irPagina1() definida en la clase
HomePage se hace el llamado al objeto
NavController el cual tiene métodos que nos permite hacer llamados a otras páginas, las páginas son acumuladas en una estructura tipo
LIFO (
Ultimo en Entrar, Primero en Salir).
Para poder hacer el llamado llamado al objeto de clase Pagina1Page debemos hacer un import de la referencia a la clase, de esta forma podemos hacer el llamado de la función push para navegar a la Pagina1Page así this.navCtrl.push(Pagina1Page).
[ver archivo app/pages/home/home.html]
[ver archivo app/pages/home/home.ts]
 |
| Navegación Pagina1 |
De forma similar hacemos lo mismo con Pagina1Page desde la cual hacemos el llamado para navegar a Pagina2Page.
[ver archivo app/pages/pagina-1/pagina-1.html]
[ver archivo app/pages/pagina-1/pagina-1.ts]
 |
| Navegación Pagina2 |
Anteriormente mencionamos que la navegación entre páginas se maneja en una estructura tipo
LIFO por sus siglas en ingles (
Last In, First Out) tenemos a disposición el método
pop() de la clase
NavController el cual nos permite regresar al la página anterior.
[ver archivo app/pages/pagina-2/pagina-2.html]
[ver archivo app/pages/pagina-2/pagina-2.ts]
Listo eso es todo lo que he podido aprender hasta ahora, algo es algo, para complementar la información que he compartido voy a dejar unos enlaces a las referencias que estoy siguiendo en mi intento de aprender Ionic2.
Referencias
