Downloads/ionic 2/manual Ionic2

Manual de Ionic 2
http://desarrolloweb.com/manuales/manual-ionic2.html Pgina 1 de 39
Manual de Ionic 2
Introduccin: Manual de Ionic 2
Este es el manual de Ionic 2 en el que explicaremos cmo crear apps hbridas para mviles.
Con Javascript y una misma base de cdigo podremos producir aplicaciones instalables por
medio de las correspondientes tiendas de aplicaciones, para iOS, Android y Windows Phone.
A lo largo de diversos artculos iremos recorriendo paso a paso todos los conocimientos y
prcticas para poder crear tus propias apps, aprendiendo a trabajar con los componentes que
Ionic 2 te proporciona, la estructura de las aplicaciones, el acceso a las partes nativas de los
mviles o tablets o la compilacin de proyectos.
Para seguir este manual es recomendable que conozcas de entrada Angular, ya que Ionic 2 est
basado en Angular 2 en adelante. Esa parte la dejamos para el Manual de Angular 2 que
tenemos en DesarrolloWeb.com, aunque procuraremos explicar al menos de manera resumida
conceptos tanto del propio Ionic como de TypeScript y del framework Javascript Angular.
Este manual est en proceso de escritura, por lo que de momento puedes encontrar pocos
artculos. Iremos publicando nuevas entregas en las prximas semanas.
Encuentras este manual online en:

http://desarrolloweb.com/manuales/manual-ionic2.html
Manual de Ionic 2
Autores del manual
Las siguientes personas han participado como autores escribiendo artculos de este manual.
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y la plataforma de

formacin online EscuelaIT. Comenz en el mundo del desarrollo web
en el ao 1997, transformando su hobby en su trabajo.
Nicols Molina Monroy
Manual de Ionic 2
Qu es Ionic 2
Descripcin general de Ionic 2, la ms reciente versin del framework para el

desarrollo de aplicaciones hbridas con Javascript, basado en Angular 2.
Ionic 2 es un framework para el desarrollo de aplicaciones hbridas, inicialmente pensado para

mviles y tablets, aunque ahora tambin capaz de implementar aplicaciones web e incluso
dentro de poco aplicaciones de escritorio multiplataforma. Su caracterstica fundamental es
que usa por debajo Angular 2 y una cantidad de componentes enorme, que facilita mucho el
desarrollo de las aplicaciones.
Se trata de una estupenda herramienta para la creacin de aplicaciones sorprendentes,

pensada para obtener resultados de una manera rpida y con una menor inversin econmica,
ya que permite crear aplicaciones para distintas plataformas mviles con una misma base de
cdigo.
Este es el primero de una serie de artculos para explicar Ionic 2 con el que iremos
componiendo el Manual de Ionic 2 de DesarrolloWeb.com. Lo estamos desarrollando ya con la
versin final de Ionic 2, la versin ms nueva del framework ya estable y preparada para
produccin. Aunque seguro que ests deseando empezar por instalar Ionic y comenzar tu
primer proyecto, en este momento comenzaremos por aclarar algunos conceptos.
Qu es una aplicacin hbrida

Una aplicacin hbrida es aquella que permite desarrollar apps para mviles en base a las
tecnologas web: HTML + CSS + Javascript. Son como cualquier otra aplicacin de las que
puedes instalar a travs de las tiendas de aplicaciones para cada sistema, por lo que en
principio usuarios finales no percibirn la diferencia con respecto a otros tipos de
aproximaciones diferentes, como las aplicaciones nativas.
Al ejecutarse con tecnologas web, los desarrolladores que ya tienen experiencia en el

desarrollo en este medio pueden aprovechar sus conocimientos para lanzarse de una manera
Manual de Ionic 2
ms rpida en el desarrollo de apps para mviles. Para hacer esto posible, las aplicaciones
hbridas se ejecutan en lo que se denomina un web view, que no es ms que una especie de
navegador integrado en el mvil y en el que solamente se ejecuta la app hbrida.
Las aplicaciones hbridas son interesantes por diversos motivos:
1. Con una misma base de cdigo sern capaces de compilar apps para funcionar
correctamente en una gran cantidad de sistemas operativos de mviles o tablets.
Generalmente nos ser suficiente que nuestra app funcione en iOS y Android, pero
Ionic es capaz de compilar a otros sistemas como Windows Phone.
2. El coste del desarrollo es sensiblemente menor, ya que no es necesario contar con varios
equipos de desarrollo para cada lenguaje concreto de cada plataforma.
3. El tiempo de desarrollo tambin es menor, ya que solo es necesario construir la
aplicacin una vez e inmediatamente la tendremos en todas las plataformas a las que
nos dirigimos.
4. Es de ms fcil adaptacin para los desarrolladores que vienen de la web.
Pero todo no son ventajas, tambin podemos enumerar algunas desventajas en relacin a las
aplicaciones nativas (aquellas construidas con los lenguajes propios de cada sistema, Java para
Android y Swift / Objective-C para iOS):
1. El rendimiento de una aplicacin nativa suele ser mejor que el de una hbrida, aunque
las hbridas han mejorado mucho en este sentido.
2. Al ejecutarse en un web view dependemos de las tecnologas disponibles para el
desarrollo web, que pueden ser menos ricas y potentes que las disponibles en nativo.
3. En las aplicaciones nativas trabajamos directamente con el hardware del telfono,
mientras que en las hbridas dependemos de plugins para su acceso. Esto puede derivar
en problemas, pero afortunadamente cada vez son menores.
Integracin con Angular 2

Ionic 2 est desarrollado sobre el framework Javascript Angular 2. Esto quiere decir que para
el desarrollo con Ionic 2 podemos apoyarnos en todas las ventajas de desarrollo con Angular,
lo que nos permitir contar con una excelente estructura de proyecto, el trabajo con buenas
prcticas, uso de patrones de diseo de software variados y una buena gama de componentes y
directivas.
Nota: Angular 2 ha dejado de llamarse as y ahora se llama "Angular" a secas. A lo largo de

este manual podemos ocasionalmente usar "Angular 2" para remarcar que nos referimos a
Angular excluyendo la versin 1, pero debe quedar claro que a partir de ahora trataremos
de usar simplemente Angular sin el nmero de versin, haciendo referencia siempre a
versiones del framework por encima de la 2.
Nuestro cdigo por tanto tendr ms calidad usando Angular y podremos usar muchas de sus
utilidades pensadas para un desarrollo ms rpido. Gracias a usar Angular 2 en adelante,
tenemos adems la certeza de disponer de un cdigo ms optimizado y de mayor rendimiento,
Manual de Ionic 2
adaptado para el momento actual y el futuro.
En este manual no pretendemos explicar Angular, aunque a menudo podamos comentar

aspectos que no son de Ionic y s del desarrollo con el framework Javascript. Sera interesante
que el lector conociese Angular de antemano, para lo que aconsejamos la lectura del Manual de
Angular 2.
Desarrollo basado en componentes

En Ionic 2, heredado del desarrollo con Angular, trabajamos en base a componentes. Esto
quiere decir que nuestras aplicaciones sern compuestas por un rbol de componentes que se
utilizan los unos a los otros para la conclusin de los objetivos globales de la aplicacin.
Todos los frameworks modernos usan esta arquitectura, que se ha demostrado que es la que
ofrece un mejor cdigo, ms fcilmente escalable y mantenible.
Los componentes estn pensados para, de manera modular y encapsulada, resolver pequeos
problemas. Por ejemplo puede haber componentes para implementar un sencillo botn,
componentes para hacer un sistema de navegacin por tabs, para selectores de fechas, etc.
Integrando componentes somos capaces de construir aplicaciones grandes y complejas. Ionic 2
nos ofrece ya de base una cantidad muy grandes de componentes que son capaces de trabajar
perfectamente en dispositivos mviles con pantallas tctiles pero obviamente para el
desarrollo de nuestras aplicaciones necesitaremos construir nuestros propios componentes
que implementen los comportamientos ms especficos de nuestro modelo de negocio.
TypeScript
Otra cosa que viene dada por el desarrollo de Angular es el uso del lenguaje TypeScript, que no
es ms que un "superset" de Javascript. Dicho de otra forma, TypeScript es Javascript pero con
aadidos pensados para mejorar el trabajo por parte de los desarrolladores, hacindonos ms
productivos.
La mayor aportacin de TypeScript al lenguaje Javascript es la posibilidad de definicin de

tipos para las variables, pero en general aporta mucho ms y adems nos permite usar todas
las mejoras de ES6 y algunas de ES7 en las aplicaciones.
No debemos pensar en TypeScript como un problema por ser algo que debemos aprender de
nuevo. TypeScript es en realidad Javascript, por lo que no significa aprender un nuevo
lenguaje, sino agregar algunas cosas al que ya conoces, cosas que en definitiva te van a ayudar
durante la etapa de desarrollo y a la hora de mantener las aplicaciones en el futuro. Puedes
aprender ms sobre TypeScript en este artculo y tambin sobre las nuevas versiones de
Javascript en el Manual de ES6.
TypeScript requiere una transpilacin del cdigo, de modo que aquel cdigo que escribes en
TypeScript se convierta en cdigo Javascript capaz de ejecutarse en cualquier navegador. Esa
transpilacin la realiza Ionic 2 por debajo, por lo que no representa un problema para el
desarrollador.
Look & feel adaptado al dispositivo

Manual de Ionic 2
Los componentes de Ionic 2 ya vienen adaptados al dispositivo de manera esttica. Quiere

decir que, cuando se compila una aplicacin para iOS el componente se visualizar de manera
diferente que cuando se compila para Android. En Android usar Material Design mientras
que en iOS usar las guas de diseo definidas por Apple.
Esto es una ventaja en s, porque las personas disfrutarn de aplicaciones con una experiencia
de usuario cercana a la que estn acostumbrados en su telfono y nos evita a los
desarrolladores la necesidad de trabajar ms para conseguir este efecto. Sin embargo, como
autores de las apps con Ionic 2 tambin somos capaces de alterar el diseo de las aplicaciones,
proporcionando una experiencia de usuario especfica y original para nuestra propia
aplicacin.
Desarrollo y compilado de aplicaciones

Con Ionic 2 desarrollamos aplicaciones con las tecnologas web. Durante toda la etapa de
desarrollo usaremos el navegador para visualizar las aplicaciones, lo que permite un flujo de
trabajo muy productivo, ya que no se tiene que compilar. Aunque lo cierto es que, por la
necesidad de transpilar el cdigo de TypeScript a Javascript compatible con el navegador, no
ser tan rpido de visualizar los cambios como simplemente refrescar la pgina del navegador.
Una vez que la app est construida se tiene que realizar el proceso de compilacin, en el que se
producen los ejecutables especficos para cada dispositivo. Ese proceso s es un poco ms
pesado para el procesador, pero se hace solo cuando tenemos que lanzar una nueva versin
que se subir a las tiendas de aplicaciones.
Apache Cordova y Phonegap

Ionic 2 se basa tambin en Apache Cordova para la implementacin de las aplicaciones. Hay
partes, como el acceso a los componentes nativos del dispositivo, en las que se usan plugins
que nos proporciona Apache Cordova principalmente y Phonegap en algunos casos.
Actualmente tambin Ionic es proveedor de algunos plugins para trabajo con la parte nativa
del telfono.
Aqu como nativo nos referimos a elementos como la cmara, acelermetro, teclado virtual,
etc. Todos esos elementos se pueden usar desde las aplicaciones de Ionic, con los
correspondientes plugins nativos, que forman una especie de puente entre el desarrollo con
Javascript y el telfono.
Apache Cordova tambin es el software que nos permite compilar el desarrollo realizado con
Ionic con tecnologas web en aplicaciones para mviles instalables va tiendas de aplicaciones.
Conclusin
Ionic 2 es una excelente alternativa para el desarrollo de apps. Hemos repasado diversos
conceptos que usaremos a lo largo de este manual y sobre los que sin duda volveremos muchas
veces y ampliaremos la informacin llegado el momento en el que sea necesario.
Si ests aprendiendo Ionic 2 encontrars en DesarrolloWeb.com en breve nuevos artculos

detallados sobre cada una de las etapas de desarrollo con las que podrs aprender paso por
Manual de Ionic 2
paso. De todos modos, si deseas aprender de una manera sencilla y rpida, ya mismo, tambin
te recomendamos el Curso de Ionic de EscuelaIT, en el que aprenders de manera tutorizada y
mucho ms detallada, rpida, rigurosa y sobre todo de principio a fin.
Para acabar te dejamos a continuacin el vdeo de la clase previa al Curso de Ionic, en el que
podrs de una manera prctica aprender acerca de los primeros pasos en el desarrollo de apps
para mviles.
Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/articulos/que-es-ionic2.html
Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 02/03/2017
Disponible online en http://desarrolloweb.com/articulos/que-es-ionic2.html
Manual de Ionic 2
Instalar Ionic 2
Cmo instalar Ionic 2, para comenzar a desarrollar con el framework de

aplicaciones hbridas en local.
Despus de haber explicado en lneas generales qu es Ionic y haber conocido varios de los
conceptos con los que vamos a trabajar en este manual, en el presente artculo vamos a
comenzar a preparar nuestro entorno de desarrollo para comenzar a trabajar. Nos ocuparemos
de la instalacin del framework, un proceso bastante sencillo de realizar.
Pero antes de comenzar tenemos que aclarar que, para poder realizar todo el flujo de
desarrollo de una app con Ionic 2, se requieren dos pasos diferentes. El primero es la
instalacin de todo el SDK de Ionic 2 y las herramientas de trabajo con la lnea de comandos.
El segundo es la instalacin del entorno que nos permitir compilar una aplicacin
desarrollada con Ionic en un archivo que podamos subir a la tienda de aplicaciones.
Por el momento vamos a limitarnos a instalar Ionic 2 para poder trabajar en local, es decir,
realizar el desarrollo de nuestra aplicacin, pero no su compilacin para subir a las stores de
aplicaciones. Para compilar el proceso es un poco ms largo y complejo, que depende
directamente de Apache Cordova (que es quien realmente realiza el empaquetado de la app en
un archivo nativo) y requiere los SDK de Android o iOS y veremos ms adelante.
Para todo este proceso necesitaremos tener NodeJS instalado en nuestro sistema, al menos en
su versin 6 en adelante. No vamos a entretenernos explicando cmo instalar Node, ya que es
un tema que se trata en el Manual de NodeJS.
Instalar Ionic CLI y Cordova

Comenzamos instalando los paquetes de Ionic CLI (intrprete por lnea de comandos de Ionic)
y Apache Cordova. Lo hacemos va npm con el siguiente comando:
npm install -g ionic cordova
Manual de Ionic 2
Nota: En algunos casos podras necesitar la instalacin de ese comando usando "sudo",
para usarlo como superusuario. Obviamente no aplica a Windows.
En el caso de Windows puede que te sea necesario instalar iniciando la consola de lnea de
comandos en modo administrador (clic derecho en el icono de tu terminal preferido y "abrir
como administrador". Adems en algunos casos te podra solicitar instalar el Visual Studio
(versin community que es gratuito).
El gestor de dependencias npm se encargar de traerse todas las libreras necesarias para hacer
funcionar Ionic CLI y Cordova, de manera automtica para nosotros
Una vez instalado puedes usar el intrprete de lnea de comandos de Ionic para realizar
diversas tareas necesarias durante la etapa de desarrollo.
Crear nuestro primer proyecto Ionic 2

Podemos crear nuestro primer proyecto de Ionic usando el Ionic CLI con el comando "ionic
start", indicando despus el nombre de tu app. El nico detalle es que Ionic sigue dando
soporte al desarrollo de aplicaciones con Ionic 1, por lo que estamos obligados a indicarle que
nuestro proyecto debe usar la versin 2.
ionic start mi-primera-app-ionic --v2
Nota: En este momento te pueden salir unos warnings, indicando que necesitas otras
dependencias. Podemos simplemente dejar pasar esos avisos (no son errores, simplemente
warnings), ya que no vamos a ocuparnos todava de la compilacin de los proyectos.
Al acabar el proceso te preguntar si quieres crear una cuenta en Ionic (Create a free Ionic
account). Este paso no es necesario por el momento, pero tampoco resultara de ms crearnos
esa cuenta.
Ahora podemos entrar en la carpeta de nuestra aplicacin. En mi caso la llam "mi-primera-

app-ionic", por lo que la carpeta tendr su mismo nombre:
cd mi-primera-app-ionic
Manual de Ionic 2
Una vez dentro de la carpeta de nuestro proyecto, podemos servir la aplicacin en el navegador
con el comando "ionic serve".
ionic serve
Despus de unos instantes en los que el sistema est produciendo los archivos de nuestro
proyecto para que se puedan ver bien en el navegador, se nos abre directamente el navegador,
mostrando la aplicacin que acabamos de iniciar. Como vers, ya tiene algunos componentes
sencillos, con algo de texto y unas tabs para navegacin por diversas pantallas.
Nota: Ionic 2 tiene algunos templates para implementar en las apps recin creadas. El
predeterminado incluye el sistema de navegacin por pestaas, pero en el siguiente artculo
aprenderemos a crear un proyecto vaco para marearnos con menos cdigo para comenzar.
La aplicacin se abre en toda la pantalla del navegador y se ver muy muy grande. Una
alternativa para verla de otra manera es usar el "ionic lab".
Puedes salir del proceso que est sirviendo la aplicacin con CRTL + C, en la consola, y luego
correr el comando:
ionic serve --lab
En este caso vers que la aplicacin se ve en un lienzo ms estrecho, con lo que podremos
apreciar mejor las condiciones de visualizacin que tendra al mostrarse en la pantalla de un
mvil.
Manual de Ionic 2
Adems arriba a la derecha podemos seleccionar otras plataformas, para ver cmo se
mostrara nuestra aplicacin en un Android / iOS y Windows Phone.
En la siguiente imagen podemos ver cmo nuestra aplicacin tiene ligeras diferencias al
visualizarse en las distintas plataformas, algo que sin duda es una de las caractersticas ms
asombrosas de Ionic, el proveer de experiencias de usuario adaptadas a cada sistema operativo
Manual de Ionic 2
donde estemos produciendo nuestra app.
Conclusin
Hemos conseguido instalar Ionic en local e iniciar un primer proyecto. Hemos ocupado pocos
minutos y ya tenemos algo funcionando que podemos tocar, lo que resulta bastante
asombroso.
En el siguiente artculo pondremos manos en el cdigo y crearemos nuestro "hola mundo" en

Ionic 2.
Recuerda que lo que has hecho de momento solo te permite trabajar con Ionic en tu ordenador
y no producir archivos para ejecutar apps en el mvil. Para conseguir eso requiere instalar otra
serie de programas y SDK de los que hablaremos ms adelante en este manual, pero siempre
puedes estudiar la documentacin (o hacerte el curso de Ionic 2 que tenemos en EscuelaIT,
claro).

Disponible online en http://desarrolloweb.com/articulos/instalar-ionic2.html
Manual de Ionic 2
Hola Mundo en Ionic 2
Primera aplicacin, creada desde cero, en Ionic 2. Paso por paso exploramos
algunas de las caractersticas ms bsicas para el desarrollo de una app.
Despus de haber instalado Ionic en local, podemos comenzar a desarrollar nuestra primera
app. Como vers, dar los primeros pasos en Ionic es sencillo, todava ms si tienes algunos
conocimientos de Angular, como los que hemos abordado en el Manual de Angular 2.
En este artculo vers cmo puedes crear tu primera app con Ionic 2 y algunos componentes
sencillos con los que podamos comenzar de una manera fcil, llegando un poco ms all que
presentar un simple texto por pantalla.
Realmente no vamos a explicar demasiadas cosas de Ionic todava y lo que necesitamos para
poder hacer esta pequea prctica depende realmente ms de Angular que del propio Ionic.
Tambin dejaremos para ms adelante entrar en detalle sobre cada elemento de la aplicacin y
la estructura de un proyecto con Ionic 2, aunque s nos servir para ir familiarizndonos con la
arquitectura de las apps hbridas.
Crear una app desde cero con el template en blanco

Vamos a comenzar creando una nueva app con el template en blanco. Recordamos que esta
operacin la haces cmodamente usando el CLI de Ionic, con un comando como el que sigue:
ionic start hola-mundo blank --v2
Nota: El paso de la instalacin de Ionic 2 la tienes que haber realizado previamente. Para
saber cmo hacerlo puedes acceder al artculo de instalar Ionic. Puedes hacer "ionic -v"
desde tu terminal para saber si Ionic est instalado. Obviamente, para poder iniciar un
proyecto con Ionic 2 necesitas una versin 2.0 o superior. En el momento de escribir este
artculo estamos ejecutando la 2.2.1.
Manual de Ionic 2
Ese comando lo ejecutars desde la pgina donde tienes tus proyectos y crear una carpeta
llamada "hola-mundo" donde colocar el proyeco de Ionic recin generado. Ahora nos
movemos a esa carpeta y podemos comenzar a trabajar con nuestro editor de cdigo preferido.
Localizando el cdigo de la pgina de inicio de la app

A la hora de desarrollar un proyecto de app con Ionic 2 la gran mayora del trabajo lo vamos a
realizar dentro de la carpeta "src" del proyecto. All encontramos un subdirectorio llamado
"pages" que contiene las pginas de nuestro proyecto. De momento solo hay una, llamada
"home".
Si abres la carpeta "src/pages/home" encontrars tres archivos distintos:
1. Un HTML que contiene la vista de la pantalla de inicio de nuestra app.

2. Un CSS (archivo scss porque realmente Ionic usa Sass como preprocesador CSS) que
contiene las hojas de estilo para esta pgina.
3. Un archivo .ts (de TypeScript) con lo que sera la declaracin del componente de esta
pgina.
Lo ms sencillo para comenzar es abrir el HTML y editar alguna cosa. El archivo se llama
home.html y vers que ya tiene un poco de cdigo.
Puedes alterar home.html. Al final es solo un poco de HTML, por lo que no te costar nada de
trabajo. Puedes dejar algo como lo que sigue:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Hola Mundo</h1>
<p>Estamos en Ionic 2 y este es el componente de la pgina Home.</p>
</ion-content>
Lanzar la app en el navegador

Esto tambin lo vimos en el ejemplo del artculo anterior. Se trata de arrancar el servidor web
con el que podemos ejecutar esta pgina y ver cmo nos ha quedado despus de la edicin.
Vamos a usar el "Ionic Lab" para ver la pgina de una forma similar a como se vera en un
mvil. Lo lanzamos con este comando:
ionic serve --lab
Manual de Ionic 2
Este es el aspecto que tendra la app, para la plataforma Android, una vez puesta en marcha
con el Ionic Lab.
Manual de Ionic 2
Manual de Ionic 2
Modificar el archivo TypeScript con cdigo del componente

Ahora prestemos atencin a nuestro archivo TypeScript que tiene el cdigo para registrar el
componente de la home. Est en la carpeta "src/pages/home" y se llama "home.ts".
Como puedes comprobar si abres el archivo, Ionic 2 usa el formato de trabajo que viene dado
en EcmaScript 2015 (ES6), con imports y clases de programacin orientada a objetos. Pero
adems encontramos un @Component que quizs no habas visto nunca, si es que no conoces
de antemano Angular. Eso ese @Component se llama "decorator" y es algo que aporta
TypeScript.
Nota: Puedes aprender algo ms de sobre esta sintaxis de uso de Javascript en el Manual
de ES6.
No te preocupes si todo te parece muy diferente a como ests acostumbrado en tu experiencia

del trabajo con Javascript, lo iremos viendo poco a poco, de modo que irs despejando tus
dudas. Pero de momento vamos simplemente a ponerle un poco de cdigo para hacer una
simple prueba.
En la declaracin de la clase, vamos a agregar una propiedad. Las propiedades como en

Programacin Orientada a Objetos se pueden declarar como variables despus de la lnea
donde comienza la vista privada (export class HomePage...).
test:string = "Bienvenido a Ionic 2";
Aqu hemos colocado algo que es caracterstico de TypeScript, que es la definicin de tipos.
Seguramente te llamar la atencin "test:string". Ese ":string" es lo que indica a TypeScript que
el tipo de la variable "test" es una cadena de caracteres. La definicin de tipos nos ayuda a la
hora de compilar un programa, pues si accidentalmente asignamos un tipo diferente a la
variable "test", el compilador de TypeScript nos avisar. Adems, si usas VSCode (Visual
Studio Code), que ya tiene una integracin con TypeScript, cualquier error de tipos ser
advertido en tiempo real, en el momento de escribir tu cdigo.
Para no dar lugar a dudas, el cdigo de la clase nos quedar as ahora:
export class HomePage {
constructor(public navCtrl: NavController) {
Manual de Ionic 2
La gracia consiste ahora en mostrar ese texto de la propiedad "test" en la pgina. Es tan
sencillo como editar el HTML (archivo "home.html") y colocarle en cualquier lugar:
<p>{{test}}</p>
Nota: Las dobles llaves sirven para volcar el contenido de una variable (propiedad de la
clase) definida en el cdigo del componente.
Si una vez realizadas estas modificaciones vas a tu navegador, deberas ver los cambios ya
refrescados. Esto es debido a que el propio servidor de Ionic 2 tiene un "watch" que refresca la
pgina (live reload) automticamente. Claro est, necesitas asegurarte de:
Tener el servidor ejecutndose en el terminal.

No haber errores en el cdigo (si hubiese el propio terminal te los mostrar).
Esperar un poco, ya que el proceso de live reload requiere traspilar los archivos de
cdigo TypeScript y eso requiere de unos segundos. Ms o menos tiempo dependiendo
de la capacidad de procesamiento de tu ordenador.
Obviamente, requiere tambin que no hayas cerrado la pestaa del proyecto en el
navegador. Si hubieses cerrado puedes acceder de nuevo a la URL (el puerto puede
haber cambiado tambin entre ejecuciones del servidor), o bien parar el servidor y
volverlo a poner en marcha, en cuyo caso te abrir una nueva pestaa con el proyecto en
marcha.
Agregar un nuevo componente de Ionic

Vamos a acabar este "hola mundo" colocando un componente nuevo de Ionic 2 en el template
HTML, para observar cmo se visualizan los datos. En la documentacin de Ionic 2
encontrars decenas de componentes listos para su uso, unos ms sencillos que otros y con
integracin ms fcil y difcil. Vamos a escoger algo de aplicacin inmediata, como "ion-icon",
que sirve para colocar un icono.
Los componentes Ionic ya los reconoce automticamente el sistema al usarlos en la vista de la

pgina. Puedes agregar el siguiente HTML en tu archivo "home.html".
<p>
<ion-icon name="logo-angular"></ion-icon>
Me gusta Angular
</p>
Al guardar el fichero se refrescar la pgina y podrs ver el nuevo prrafo con el icono de
Angular.
Manual de Ionic 2
Nota: Hablando de componentes de Ionic 2, habrs observado tambin que nuestra pgina
ya inclua un componente, o varios, previamente en el cdigo. Arriba del todo, cuando usa
"ion-header" y varios componentes anidados para producir la barra de ttulo de tu app.
Conclusin
Hemos podido empezar a meterle mano en el cdigo de la app. De momento hemos hecho
modificaciones muy muy simples, pero todo es comenzar. A partir de aqu podremos ir
incrementando la dificultad para hacer cosas ms asombrosas.
Lo que has podido comprobar es que el flujo de trabajo con Ionic 2 es bastante gil, pudiendo
desarrollar y visualizar los cambios en pocos instantes en el navegador. Si te has entretenido en
echar un vistazo a la documentacin, en la seccin "components", habrs visto que hay muchas
cosas de las que podrs sacar partido para hacer diversos comportamientos comunes de las
aplicaciones realmente rpido.
Este artculo es obra de Nicols Molina Monroy

Disponible online en http://desarrolloweb.com/articulos/hola-mundo-ionic2.html
Manual de Ionic 2
Ionic CLI
El intrprete de lnea de comandos de Ionic, un compaero indispensable en el

desarrollo con Ionic 2.
Ionic CLI es el intrprete por lnea de comandos de Ionic, que contiene una serie de
herramientas tiles para realizar, de una forma sencilla, muchas tareas habituales en el
desarrollo y produccin de aplicaciones con Ionic 2.
En este artculo del Manual de Ionic 2 vamos a darle un primer repaso a las opciones con las
que contamos, centrndonos en las que son ms bsicas para comenzar, como la creacin de
proyectos con distintos templates. Mencionaremos otras opciones fundamentales, aunque se
dejarn para ms adelante los detalles y las prcticas, pues corresponden a fases adelantadas
del desarrollo, como la parte del build.
Instalar Ionic CLI

Para poder contar con Ionic CLI en tu sistema necesitas instalarlo previamente. Bsicamente,
para poder comenzar a trabajar con Ionic 2 en artculos anteriores, hemos tenido que instalar
estas herramientas previamente, as que nos vamos a referir directamente al artculo de
instalacin de ionic 2.
Puedes comprobar si tienes Ionic CLI instalado lanzando el comando:
ionic -v
Otro comando til para saber tu entorno de desarrollo completo para Ionic, que te indica no
solo la versin del CLI sino tambin el sistema operativo, NodeJS, etc. es lanzar el comando:
ionic info
Manual de Ionic 2
Iniciar aplicaciones Ionic 2

El CLI dispone de un comando "start" que nos permite iniciar aplicaciones Ionic e Ionic 2, de
modo que, si estamos construyendo aplicaciones para Ionic 2, hay que fijarse de indicar el flag
"--v2".
ionic start --v2 nombre-proyecto
Lo que conseguimos con este comando es crear una carpeta llamada "nombre-proyecto" que
iniciar una aplicacin Ionic 2 con el template de "tabs". Esto incluye una cantidad de
subcarpetas con una estructura de proyecto definida para las apps de Ionic 2. Ms adelante
iremos conociendo esa estructura con detalle.
Templates disponibles en Ionic start

Lo interesante, que no habamos visto todava de "ionic start", es la lista de templates que
tenemos disponibles para crear aplicaciones, con distinto cdigo base. Nuestras aplicaciones,
lejos de comenzar con una pgina en blanco, pueden crearse en base a distintos tipos de
templates, con estructuras de pginas diferentes.
Si ejecutamos el siguiente comando tendremos una lista de los templates disponibles en

nuestro sistema:
ionic start --list
Eso nos dar una salida parecida a esta:
Encontrars varias opciones para comenzar tus aplicaciones, desde una app en blanco, una con
tabs, con un completo men lateral, etc. Sin embargo, estos no son todos los que podras usar,
tambin existen diversos starters que se encuentran disponibles en Ionic Market, tanto
gratuitos como de pago.
Adems, puedes encontrar repositorios en Github donde tambin se encuentran aplicaciones

creadas con Ionic 2, que te pueden dar un buen punto de partida para aprender examinando el
cdigo del proyecto. Uno interesante que vimos en la clase prctica de presentacin de Ionic 2
fue el ionic-conference-app, de los mismos creadores de Ionic.
Manual de Ionic 2
Correr un proyecto de Ionic en el navegador

Por ser aplicaciones hbridas, realizadas con Javascript, Ionic 2 tiene una ventaja fundamental
a la hora de desarrollar apps: permitir desarrollar usando el navegador como entorno de
ejecucin. Esto es muy interesante, ya que nos permite un flujo de desarrollo muy rpido entre
la escritura de cdigo y la visualizacin de los cambios. Adems nos evita tener que instalar
muchos programas para comenzar, emuladores, entornos de desarrollo, programas para llevar
a produccin, etc.
Para mostrar nuestra aplicacin en el navegador simplemente tenemos que iniciar un servidor
web integrado en Ionic CLI, con el comando "serve".
ionic serve
Este comando lanza todo el proceso de transpilacin y abre la app en el navegador. Adems
contiene un sistema de "LiveReload", que permite refrescar el navegador cuando haya cambios
en el cdigo de la app.
Hay opciones interesantes que podemos usar para personalizar el servidor:
--lab: Nos permite abrir el "ionic lab" con el que podemos ver cmo se presentara la
app en cada tipo de plataforma mvil.
--port: si queremos cambiar el puerto donde escucha el servidor.
--address: Si indicas esta opcin, asignando tu IP local, el servidor se iniciar sobre esa
IP en lugar de localhost. Esto puede ser til si quieres visualizar el contenido desde
otros sistemas, en caso que no lo consiguas ver desde ordenadores o dispositivos
externos con "ionic serve" a secas. Por ejemplo usas: ionic serve --
address=192.168.1.103
--platform: Esto te permite iniciar viendo la app tal como se mostrara en una
plataforma en concreto (iOS / Android).
Otros comandos de Ionic CLI

Con los comandos que hemos visto hasta ahora tienes los suficientes para comenzar a trabajar
con Ionic 2, aunque detrs del intrprete de lnea de comandos tienes muchas otras utilidades
que facilitarn tu da a da en diversos momentos del desarrollo de una app.
Puedes ver una completa ayuda con la opcin -h
ionic -h
Ahora te resumimos otros comandos del CLI muy interesantes, que veremos en su momento
en este manual, a medida que vayamos llegando a cada una de las partes involucradas con cada
herramienta:
ionic run: Permite ejecutar la aplicacin Ionic que estamos desarrollando en un
Manual de Ionic 2
dispositivo conectado al ordenador con el que estamos trabajando.

ionic platform: Sirve para aadir una nueva plataforma para realizar el build de una
aplicacin.
ionic build: Genera la app para una plataforma especificada (ej: ionic build android),
esta parte se realiza gracias a Cordova.
ionic emulate: lanza el emulador para visualizar en l nuestra aplicacin Ionic. Es
simular a un ionic serve, solo que usa el emulador disponible en lugar del navegador.
ionic generate: este es un comando muy extenso, que a su vez tiene una serie de
subcomandos para generar distintos tipos de componentes en un proyecto Ionic, como
pueden ser pginas, providers, pipes, etc.
Recuerda que no son los nicos comandos del CLI y que podrs encontrar otras opciones con
"ionic --help".

Disponible online en http://desarrolloweb.com/articulos/ionic-cli.html
Manual de Ionic 2
Conocimientos de base ES6 y TypeScript

para comenzar con Ionic 2
Qu debes saber sobre Javascript en su versin EcmaScript 2015 (ES6) y

TypeScript para comenzar a trabajar con Ionic 2.
En este artculo vamos a resumir algunas de las cosas que vers de inicio en Ionic 2 y que
seguro sern novedad para los lectores que no tienen demasiada experiencia en ES6 y
TypeScript.
Lejos de querer ser una descripcin exhaustiva de lo que viene con ES6 y TypeScript, pretende
ayudar a las personas a que no se pierdan y comiencen a entender las nuevas reglas de sintaxis
que usaremos en estos lenguajes.
Aunque sean cosas distintas, ES6 y TypeScript, las agrupamos en este mismo artculo porque
el propio TypeScript es el que nos aporta la posibilidad de trabajar con ES6, gracias a su
transpilador.
Transpilador de TypeScript
Aunque en el desarrollo con Ionic 2 no vamos a tener que trabajar directamente con el
transpilador, s conviene saber qu es y por qu se usa en Ionic.
Ionic 2 usa Angular y ste a su vez se escribe preferentemente con TypeScript. TypeScript es un
Javascript pero con diversos aadidos para facilitar diversas tareas de los programadores, pero
no es compatible con los navegadores actuales.
El transpilador hace las tareas de convertir el cdigo TypeScript en cdigo Javascript

entendible por todos los navegadores (ES5). Por tanto, lo que ejecutar realmente el navegador
es el cdigo traducido. Transpilador es una conjuncin de las palabras compilador y traductor
y viene al caso porque realmente ese paso desde TypeScript hacia Javascript ES5 est a medio
camino entre una compilacin y una traduccin.
Manual de Ionic 2
TypeScript usa todo lo que viene ya como beneficio en la programacin con ES6 y alguna cosa
de ES7, por lo que realmente el cdigo es prcticamente Javascript, pero en sus versiones ms
evolucionadas. En esa traduccin el cdigo ES6 tambin es convertido a cdigo ES5,
compatible con todos los browsers.
Lo que agrega principalmente TypeScript es el tipado de datos. Es decir, TypeScript permite

crear variables donde indiquemos los tipos, de modo que no se le pueda cambiar el tipo a una
variable accidentalmente durante la vida de esa variable. Esto nos permite que el editor de
cdigo nos alerte sobre fallos en la programacin, en el mismo instante que estamos
programando, as como nos ayude con el autocompletado de cdigo.
Imports ES6
En TypeScript podemos acceder a ficheros de mdulos externos gracias a los imports. Por
cerrar el punto anterior, aunque como muchas otras cosas, los imports vienen de ES6, los
podemos usar gracias al transpilador de TypeScript.
Usar los imports es sencillo. Simplemente tenemos que indicar qu cosa o cosas quieres traerte
y del archivo donde estn definidas.
En el cdigo de un componente Ionic vers cosas como:
import { Component } from '@angular/core';
Eso quiere decir que estamos accediendo a un mdulo llamado "@angular/core" y de ah

estamos trayendo la clase "Component".
O por ejemplo encuentras:
import { NavController } from 'ionic-angular';
Que indica que te ests trayendo la clase NavController del mdulo 'ionic-angular'.
A la hora de hacer un import en esos dos ejemplos traamos clases, pero en Javascript
podemos importar cualquier cosa (funciones, variables, constantes, etc.) que haya sido
exportada en un mdulo.
Ya en el cdigo del mdulo que estamos importando, para definir lo que ser visible (e
importable) desde fuera se utiliza la palabra "export".
Nota: Cuando decimos mdulo nos referimos a cualquier archivo externo con cdigo
Javascript / TypeScript.
Manual de Ionic 2
//
As pues, desde un mdulo exportas algo y, desde cualquier otro mdulo donde quieras usarlo,
tienes que realizar el correspondiente import.
Decoradores de TypeScript
Otra cosa que seguramente te llamar la atencin son los decoradores, que fornan parte
tambin del propio TypeScript. Los decoradores dan informacin sobre cmo se debe de
comportar una clase.
Existen diversos tipos de decoradores y adems pueden indicar diversos juegos de atributos.
Por ejemplo, este sera el decorador usado para la class "HomePage" que habamos estado
definiendo en el artculo del "Hola Mundo".
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
Depende de lo que sea que estamos creando, un tipe, un componente, una directiva, etc. debes
asignar cosas distintas en l. En este caso estamos usando el decorador de componente
"@Componet", porque realmente la pgina "home" se declara en base a un componente (como
cualquier pgina de Ionic 2).
En el decorador estamos informando que el componente se va a llamar page-home" y que su

archivo para la vista est en la ruta templateURL.
Clases de ES6 Hasta hace poco en Javascript no se poda usar clases, de

objetos. Existan diversos mecanismos para suplir esta carencia, aunque
ahora ya forman parte de Javascript, desde ES6.
Las clases tienen una sintaxis similar a otros lenguajes de programacin. Por buenas prcticas,
las clases se deberan crear en mdulos independientes y su exportacin debera realizarse
para poder usarla en mdulos ajenos al archivo donde se defini.
// cdigo de la clase
Una clase tiene sus miembros, como mtodos y funciones y la manera de crearlos no dista
mucho de la de otros lenguajes.
Manual de Ionic 2
propiedad = 3;
metodo() {
//cdigo del mtodo
Tipos de datos en TypeScript

TypeScript permite asignar tipos a las variables que se estn creando, tal como adelantamos
anteriormente. Los tipos de las variables se le asignan con ":" y luego el tipo que se va a
utilizar. Por ejemplo:
Se ha declarado una variable "test" con tipo de datos "string", en la que se asigna adems una
cadena de texto directamente. La novedad hasta ahora es la posibilidad de definir los tipos de
manera esttica, en el cdigo, y no dinmica, deducida en el momento de la ejecucin segn se
asignan valores a las variables.
Los tipos de datos posibles en TypeScript son los que ya existen en Javascript, y alguno
adicional:
Boolean
Number
String
Array (vectores, arreglos matrices. Varios valores unidos en una variable y accesibles
por un ndice. Adems, en los arrays podemos marcar que todas sus casillas sean de un
mismo tipo)
Tuplas y enumerados (que no vamos a ver todava)
Any (es un tipo de datos que acepta cualquier tipo, realmente este tipo de datos es el de
las variables de Javascript, de tipado dinmico. En TypeScript si no indico tipos, se
deduce que es un tipo "any")
Void (vaco, nada. Usado para funciones que no devuelven valores)
Null y Undefined (nulo o indefinido)
Es interesante ver cmo se declara un array en TypeScript.
var arrayDeNumeros: number[];
Puedo por supuesto colocarle ya valores al array.
var arrayDeCadenas: string[] = ["hola", "desde", "typescript"];
Manual de Ionic 2
Y tambin podra declarar un array sin indicar qu tipos de datos debe tener cada una de sus
casillas de manera rgida.
var arrayDeCualquierCosa: any[] = [1, true, "yeah!"];
Adems de todos estos tipos bsicos, cuando creamos una clase de objetos con TypeScript
estamos creando un tipo y por tanto podremos declarar variables que sern objetos de esa
clase. TypeScript ser capaz de comprobar que siempre que se asigne algo a esas variables sea
del tipo dado, y el editor nos podr ayudar con el intelisense.
Variables con let y constantes ES6

Otra de las cosas que tenemos disponibles y que merece la pena usar son las palabras clave
"let" y "const", que agregan nuevas variantes y utilidades a la hora de definir el mbito de las
variables y la posibilidad de que muten a lo largo del tiempo.
Puedes obtener ms informacin sobre stas en el artculo Conociendo las variables en

ECMAScript 2015.
Gracias a este punto, cabe decir que cualquiera de los arrays definidos en el paso anterior sera
mejor declararlos con let, en el caso que se pueda por el mbito que se le aplicara.
let arrayDeNumeros: number[];
Conclusin
Hay muchas otras novedades que deberamos comentar, pero con estas podremos dar los
primeros pasos con Ionic 2 sin mayores problemas, incluso si ests acostumbrado a usar
Javascript del antiguo (ES5).
En el siguiente artculo veremos una lista de conocimientos necesarios para las personas que
no conocen antemano Angular en su versin 2 o superior.

Disponible online en http://desarrolloweb.com/articulos/conocimientos-base-es6-
typescript.html
Manual de Ionic 2
Bases de Angular para el desarrollo con

Ionic 2
Qu debes saber de Angular (Angular 2 o superior) para no perderte al comenzar

a desarrollar apps hbridas con Ionic 2.
Ionic 2 est creado encima de Angular, as que nuestras posibilidades de desarrollo estn muy
entrelazadas con las de este framework Javascript. Debe quedar claro que realmente no
necesitamos hacer nada para poder empezar a usar Angular, ya que viene perfectamente
integrado y funcionando en el proyecto bsico de Ionic 2.
Habamos dicho que nuestro Manual de Ionic 2 no pretenda ser una gua para el desarrollo
con Angular, ya que el framework Javascript es suficientemente complejo como para verlo de
manera independiente en el Manual de Angular. No obstante s queremos detenernos a ver
rpidamente algunas cosas que en este framework de desarrollo hbrido debemos conocer,
heredadas directamente de Angular. Las veremos rpidamente, pero si ya conoces Angular 2
posiblemente poco nuevo aportaremos para ti, con lo que podras perfectamente saltar este
artculo y continuar por el siguiente.
Obviamente, no trataremos de una gua completa de Angular y vamos a centrarnos

principalmente en las cosas que se pueden hacer desde las vistas, el cdigo HTML de nuestros
componentes.
Nota: Repetimos una vez ms que al referirnos a "Angular" estamos incluyendo las
versiones 2 en adelante. Como ya apuntamos "Angular 2" cambi de nombre y se llama
simplemente Angular. Las versiones que vayan apareciendo en lo sucesivo sern siempre
bajo la misma arquitectura de Angular 2.
Componentes en Angular
Manual de Ionic 2
Solo remarcar que la arquitectura de las aplicaciones de Angular es basada en componentes.

Esto ya lo vimos en el artculo Qu es Ionic 2 y adems explicamos que un componente
contiene diversos cdigos en archivos separados (El registro del componente en TypeScript, la
vista en HTML y los estilos CSS) en el artculo Hola Mundo en Ionic 2.
Nota: De momento en este artculo no vamos a crear componentes nuevos. Nos vamos a
limitar a editar el cdigo que tenemos en el componente bsico que se crea en el template
"blank" que se us en el artculo Hola Mundo en Ionic 2. En aquella ocasin se mencion
que el componente de la pgina de inicio para nuestra aplicacin est en la ruta:
"src/pages/home".
Desde las vistas de Ionic 2, en archivo .html, podemos acceder a propiedades y mtodos del
componente definidas en el archivo de TypeScript, para volcar informacin de propiedades,
recorrer items de un array con directivas como ngFor, crear condicionales con ngIF, definir
eventos que se ejecuten por medio de mtodos de la clase del componente, etc.
Volcar el valor de una propiedad en la vista

Si en un componente, en la clase de su definicin, tenemos un dato, podemos mostrarlo en la
vista del componente, para que aparezca su valor al visualizar el componente en la pgina.
Nuestro componente tendr esta definicin en el TypeScript:
nombre_propiedad:string = 'Esto es un test';
Ahora, despus de crear la propiedad en el componente, podemos mostrar su valor en la vista.

Esto se hace desde la vista con la sintaxis de las dobles llaves.
{{nombre_propiedad}}
Esto es bsicamente lo que hicimos en el pasado artculo del Hola Mundo en Ionic 2, as que
no necesita mucha ms explicacin.
Asignar un valor del componente a un atributo

Ahora tenemos una propiedad definida de esta manera:
autor:string = 'Nicols Molina';
Nota: Ya no muestro el cdigo completo de la clase, que es bsicamente algo que se repite
Manual de Ionic 2
siempre "export class".
Si queremos mostrar ese valor como un atributo de un componente, usamos la sintaxis de los
corchetes. Solo que ahora colocamos los corchetes en el nombre del atributo cuyo valor
tenemos que traer de una propiedad.
<input type="text" [value]="autor">
Nota: En este ejemplo solamente estamos asignando el valor, lo que haya en la propiedad
"autor" se mostrar como value del input. Sin embargo, si modificamos el texto del input
nosotros mismos, el nuevo valor no estar viajando al componente. Dicho de manera
tcnica, el binding es de una nica direccin. Angular es capaz ahora de desplegar un
sistema de binding mucho ms optimizado y para ello los enlaces pueden ser de una o dos
vas, a criterio del desarrollador. Luego veremos cmo conseguir esa doble va.
Definir un evento sobre un elemento

La manera de definir un evento sobre un elemento de la vista, o simplemente invocar una
funcin (mtodo de la clase del componente) cuando ocurra cualquier cosa, es mediante la
sintaxis de los parntesis.
Entre parntesis colocaremos el tipo de evento y luego como valor el nombre de la funcin a
ejecutar.
<button ion-button (click)="cambiarAutor()">Cambiar Autor</button>
As tenemos un botn (con la directiva ion-button indicamos que se visualice con las reglas de
estilo determinadas para cada plataforma) y su evento "click", asignado a la funcin
cambiarAutor(). Esa funcin se define como un mtodo en el cdigo TypeScript del
componente.
cambiarAutor() {
this.autor = 'Colaborador DesarrolloWeb.com';
Al hacer clic se invocar el mtodo cambiarAutor(), que modificar la propiedad "autor". Eso
provocar un cambio en la pgina, all donde se est usando esa propiedad, actualizando el
valor en la vista.
Manual de Ionic 2
Realizar un doble binding sobre una propiedad editable

Nos quedaba por ver cmo conseguir un binding a dos vas (el popular two way binding por el
que Angular triunfo entre los desarrolladores). Esto se hace ahora por medio de un mecanismo
explcito, en el que usamos la directiva ngModel y la sintaxis "banana in a box" (parntesis
metidos dentro de corchetes).
Ahora con 2 way binding:
<input type="text" [(ngModel)]="autor">
Puedes fijarte que realmente estamos usando en una nica vez dos caractersticas de las
comentadas antes en este artculo. Los corchetes sirven para asignar un valor en un atributo y
los parntesis para ejecutar una funcin. Lo que se est asignando y ejecutando es ngModel, la
directiva que nos permite hacer esta operacin.
Recorrer un array de datos con ngFor

Una de las directivas ms tiles y recurrentes en Angular es ngFor, que permite recorrer una
estructura de Array.
En nuestro componente creamos un array, o accedemos a l meditante un origen de datos y

luego lo tendremos disponible en el template para recorrer.
Este podra ser el cdigo de nuestra clase, definido un array llamado "arraySitios" por medio
de un literal:
arraySitios:any[] = [
nombre: 'DesarrolloWeb.com',
url: 'https://desarrolloweb.com'
},
nombre: 'EscuelaIT',
url: 'https://escuela.it'
},
Ahora en la vista podremos recorrer este array de la siguiente forma:
Manual de Ionic 2
<ion-list>
<ion-item *ngFor="let sitio of arraySitios">
<a href="{{sitio.url}}">{{sitio.nombre}}</a>
</ion-item>
</ion-list>
Usamos el componente "ion-list" que nos permite hacer una lista de items. Luego los items se
definen con ion-item. En el cdigo solo aparece 1, pero gracias al *ngFor se duplicar el cdigo
del tem para cada uno de los elementos del array.
En este caso indicamos *ngFor="let sitio of arraySitios", que bsicamente quiere decir que se
cree una variable "sitio" cuyo valor ser cada uno de los tem del array, en cada iteracin.
Dentro del componente de la repeticin (ion-item) podemos acceder al tem actual con la
variable "sitio", que como es un objeto tendr sus propiedades "nombre" y "url".
Conclusin
Como hemos dicho, Angular es gigante y cualquier intento de resumirlo en un artculo sera un
completo despropsito. Pero estamos seguros que con lo que hemos visto seremos capaces de
sobrevivir en lo sucesivo con Ionic 2, entendiendo varias de las sintaxis que nos son entregadas
por esta trabajando directamente con Angular.
Para que no haya lugar a dudas, dejo a continuacin el listado de los dos archivos que hemos
tocado durante este artculo, dentro del componente "home" del template blank de Ionic 2.
home.ts, el cdigo TypeScript del componente
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
arraySitios:any[] = [
nombre: 'DesarrolloWeb.com',
url: 'https://desarrolloweb.com'
},
nombre: 'EscuelaIT',
url: 'https://escuela.it'
},
Manual de Ionic 2
cambiarAutor() {
this.autor = 'Colaborador DesarrolloWeb.com';
home.html, la vista del componente
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Hola Mundo</h1>
<p>Estamos en Ionic 2 y este es el componente de la pgina Home.</p>
<p>{{test}}</p>
<p>
<ion-icon name="logo-angular"></ion-icon>
Me gusta Angular
</p>
One Way binding: <input type="text" [value]="autor">
<p>El autor es: {{autor}}</p>
Con 2 way binding: <input type="text" [(ngModel)]="autor">
<ion-list>
<ion-item *ngFor="let sitio of arraySitios">
<a [href]="sitio.url">{{sitio.nombre}}</a>
</ion-item>
</ion-list>
<button ion-button (click)="cambiarAutor()">Cambiar Autor</button>
</ion-content>

Disponible online en http://desarrolloweb.com/articulos/bases-angular-desarrollo-
ionic2.html
Manual de Ionic 2
Estructura del proyecto Ionic 2
Cmo es la estructura de un proyecto creado con el CLI de Ionic 2, estudiando las

distintas carpetas, archivos y su arquitectura en general.
Al crear un proyecto con Ionic CLI obtenemos una lista de carpetas y archivos que forman
parte de nuestra aplicacin. Obviamente, cada parte tiene su funcin, aunque hasta el
momento no hayamos llegado a explorarla.
En este artculo veremos cul es la anatoma de un proyecto en Ionic, comentando las distintas
carpetas que nos encontramos, su funcin y contenido. Nuestro objetivo es tener una visin
general del proyecto, por lo que en otros artculos del Manual de Ionic 2 entraremos en
mayores detalles.
Vamos a verlos por importancia, no por el orden con el que los puedas encontrar en tu listado
de directorio.
Carpeta src
En esta carpeta es donde realizamos la mayor parte del trabajo con Ionic, son archivos fuente
con el cdigo original que escribirs al desarrollar tu aplicacin, o con cdigo que viene dado al
iniciar el proyecto con "ionic start". "src" contiene cdigo que se tendr que transformar para
poder ejecutarse o producir los archivos finales que se irn a las stores.
El 98% de tu proyecto lo vas a pasar dentro de esta carpeta. En ella de entrada ya encontramos
bastantes archivos clasificados en otras tantas carpetas. Tenemos por ejemplo el directorio
"pages", donde se irn colocando las pginas (pantallas) de tu aplicacin, as como los assets
(archivos de imgenes y otro tipo de materiales externos que vas a usar en las pginas), o el
componente app, que es la raz de nuestra aplicacin.
Encontrars una serie de archivos sueltos, como el index.html, que es el punto de arranque de
la aplicacin web. Encontrars tambin el archivo service-worker.js, que es el service worker
(de las Progressive Web Apps) que usars si deseas publicar tu proyecto de Ionic 2 como una
Manual de Ionic 2
app para la web. O el manifest.json, tambin para definir una Progressive Web App.
Carpeta www
En la carpeta "www" estn los archivos que se producen cuando realiza toda la parte de la
transpilacin del TypeScript, el compilado de los archivos Sass, el linting del cdigo, etc. En ese
proceso, todos los archivos de "src", se transforman y se vuelcan en la carpeta "www". Esos
archivos producidos en "www" son los archivos de una aplicacin web, con Angular, que se
podrn visualizar correctamente en el navegador.
Durante la mayor parte del proceso de desarrollo vamos trabajando con el proyecto de Ionic y
vamos visualizando los resultados en el navegador. En resumen, en www estn los archivos
que se estn visualizando desde el navegador al hacer el ionic serve, o los archivos que se
tomarn cuando vayas a producir tu app para cada plataforma.
En esta carpeta no deberas editar nada, puesto que los cambios se machacarn la prxima vez
que se sirva el proyecto para visualizarse a travs del navegador, o al hacer el build. Realmente
tienes que editar lo que desees en la carpeta "src". En este sentido un error tpico es editar
cualquier archivo, como el index.html, de la carpeta www y cuando vas a visualizar los cambios
encuentras que no se ha modificado nada. Es debido a que el ndex.html de la carpeta "src" es
el que se toma como punto de partida para producir el index.html de www y en la operacin de
build (o al hacer "ionic serve") tus cambios se habrn machacado.
Podrs observar que en la carpeta www no hay ningn archivo TypeScript (extensin ts), ya
que se ha transpirado para producir los archivos Javascript (.js), que realmente entiende el
navegador. De manera parecida, los CSS ya no tendrn cdigo Sass.
Nota: La carpeta "www" tambin tiene cdigo minimizado y como se ha dicho, es la que se
utiliza para construir los archivos finales que se llevarn al store. Lo que es interesante,
porque si alguien a travs del apk de Android quiere obtener los archivos fuente, lo nico
que encontrar ser el cdigo minimizado y ofuscado, y no el cdigo que nosotros hemos
usado a la hora de desarrollar. En versiones previas de Ionic 2 (beta) no exista esa dualidad
de carpetas (src / www) y tampoco en Ionic 1, por lo que s era posible obtener el cdigo que
habamos usado como fuente para desarrollar.
Las siguientes carpetas tambin son importantes, aunque ya no sern usadas en tu trabajo
diario de desarrollo.
Carpeta plugins
En esta carpeta se sitan todos los plugins nativos con los que vamos a trabajar en la
aplicacin, ya sean de Cordova o del propio Ionic, o de terceros. De momento en un proyecto
recin iniciado podrs observar que ya se encuentran varios plugins bsicos. Otros se irn
instalando a medida que vayamos necesitando.
Trabajaremos ms adelante sobre esta carpeta cuando lleguemos a la parte del desarrollo
nativo.
Manual de Ionic 2
Carpeta platforms
En este directorio encontramos los archivos de cada plataforma a la que vamos a dar soporte
en nuestra app. Por ejemplo, si damos soporte a Android tendremos el subdirectorio "android"
y si damos soporte a iOS encontraremos la carpeta "ios".
Nota: El soporte inicial a plataformas en un proyecto nuevo de Ionic 2 depende mucho del
sistema operativo con el que trabajas. Por ejemplo, si tu proyecto lo has iniciado en un Mac,
tendrs de entrada la carpeta ios.
Ms adelante tambin explicaremos cmo dar soporte a diversas plataformas, aunque eso es
una tarea ms para realizar cuando hayamos terminado de construir nuestra app en local y
queramos subirla a las stores.
Directorio resources
La carpeta "resources" es importante a la hora de configurar iconos de la aplicacin, o el icono
de la pantalla splash (que es la imagen que aparece mientras tu app se est cargando).
En esa carpeta tenemos que colocar iconos que deben cumplir unos requisitos, dado que se van
a producir tambin internamente en diversos tamaos de manera automtica por Ionic, para
generar todas las variantes de iconos que necesita cada sistema operativo de destino. Soporta
archivos en png o incluso psd. En otro momento tambin daremos ms detalles sobre todo este
proceso de produccin de los iconos.
Directorio hooks
Esta carpeta contiene una especie de disparadores que se ejecutarn ante determinadas
situaciones. Generalmente vienen de Cordova y los puedes usar para la ms variada gama de
operaciones. Son como scripts que puedes crear y que se ejecutarn automticamente al pasar
cosas, por ejemplo, antes de compilar un proyecto, despus, etc.
Ionic 2 usa alguno de estos hooks, por ejemplo al momento de compilar quita todo el cdigo
CSS que pertenece a otras de las plataformas. Esto lo hace para aligerar el proyecto, ya que a la
hora de desarrollar Ionic produce el CSS de Android, iOS y Windows, pero no necesitas todo
ese CSS si lo que ests produciendo es el apk para Android, por ejemplo.
Carpeta node_modules
Esta carpeta realmente la debes de conocer de otros proyectos para otros sistemas web o
NodeJS. Son las dependencias de npm que vienen definidas en el package.json e instaladas en
local dentro de tu proyecto. Si no lo tienes claro, es mejor que consultes el Manual de NodeJS
para saber ms acerca de las dependencias npm.
Conclusin
Manual de Ionic 2
De momento hasta aqu tienes bastante informacin sobre la arquitectura de carpetas de una
app desarrollada con Ionic 2. Con esto hemos obtenido una vista de pjaro de todo lo que hay
en un proyecto, que iremos complementando con ms explicaciones en breve.

Disponible online en http://desarrolloweb.com/articulos/estructura-proyecto-
ionic2.html

Downloads/ionic 2/manual Ionic2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Downloads/ionic 2/manual Ionic2

Cargado por

Copyright:

Formatos disponibles

Manual de Ionic 2

Introduccin: Manual de Ionic 2

Encuentras este manual online en:

Autores del manual

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de

Nicols Molina Monroy

Descripcin general de Ionic 2, la ms reciente versin del framework para el

Ionic 2 es un framework para el desarrollo de aplicaciones hbridas, inicialmente pensado para

Se trata de una estupenda herramienta para la creacin de aplicaciones sorprendentes,

Qu es una aplicacin hbrida

Al ejecutarse con tecnologas web, los desarrolladores que ya tienen experiencia en el

Las aplicaciones hbridas son interesantes por diversos motivos:

Integracin con Angular 2

Nota: Angular 2 ha dejado de llamarse as y ahora se llama "Angular" a secas. A lo largo de

adaptado para el momento actual y el futuro.

En este manual no pretendemos explicar Angular, aunque a menudo podamos comentar

Desarrollo basado en componentes

La mayor aportacin de TypeScript al lenguaje Javascript es la posibilidad de definicin de

Look & feel adaptado al dispositivo

Los componentes de Ionic 2 ya vienen adaptados al dispositivo de manera esttica. Quiere

Desarrollo y compilado de aplicaciones

Apache Cordova y Phonegap

Si ests aprendiendo Ionic 2 encontrars en DesarrolloWeb.com en breve nuevos artculos

Para ver este vdeo es necesario visitar el artculo original en:

Este artculo es obra de Miguel Angel Alvarez

Cmo instalar Ionic 2, para comenzar a desarrollar con el framework de

Instalar Ionic CLI y Cordova

npm install -g ionic cordova

Crear nuestro primer proyecto Ionic 2

ionic start mi-primera-app-ionic --v2

Ahora podemos entrar en la carpeta de nuestra aplicacin. En mi caso la llam "mi-primera-

ionic serve --lab

donde estemos produciendo nuestra app.

En el siguiente artculo pondremos manos en el cdigo y crearemos nuestro "hola mundo" en

Este artculo es obra de Miguel Angel Alvarez

Hola Mundo en Ionic 2

Crear una app desde cero con el template en blanco

ionic start hola-mundo blank --v2

Localizando el cdigo de la pgina de inicio de la app

Si abres la carpeta "src/pages/home" encontrars tres archivos distintos:

1. Un HTML que contiene la vista de la pantalla de inicio de nuestra app.

<p>Estamos en Ionic 2 y este es el componente de la pgina Home.</p>

Lanzar la app en el navegador

ionic serve --lab

Modificar el archivo TypeScript con cdigo del componente

No te preocupes si todo te parece muy diferente a como ests acostumbrado en tu experiencia

En la declaracin de la clase, vamos a agregar una propiedad. Las propiedades como en

test:string = "Bienvenido a Ionic 2";

Para no dar lugar a dudas, el cdigo de la clase nos quedar as ahora:

export class HomePage {

test:string = "Bienvenido a Ionic 2";

constructor(public navCtrl: NavController) {

Tener el servidor ejecutndose en el terminal.

Agregar un nuevo componente de Ionic

Los componentes Ionic ya los reconoce automticamente el sistema al usarlos en la vista de la

Este artculo es obra de Nicols Molina Monroy

El intrprete de lnea de comandos de Ionic, un compaero indispensable en el

Instalar Ionic CLI

Puedes comprobar si tienes Ionic CLI instalado lanzando el comando:

Iniciar aplicaciones Ionic 2

ionic start --v2 nombre-proyecto

Templates disponibles en Ionic start