Archivo de la etiqueta: hola mundo ionic 2

Tutorial de Ionic – Hola Mundo en Ionic

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de Ionic.

Hola a todos:

En el capitulo anterior vimos como instalar ionic y las herramientas de desarrollo que necesitamos para crear aplicaciones multiplataforma con ionic 2.

Ahora vamos a crear nuestra primera aplicaci贸n con Ionic 2, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programaci贸n o framework.

Para crear聽nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

Tras un rato descargando los paquetes necesarios para crear nuestra aplicaci贸n ya estar谩 listo nuestro proyecto.

El comando start de ionic cli (commandline interface) 聽se utiliza 聽para crear (iniciar) un nuevo proyecto, el siguiente par谩metro es el nombre del proyecto, en este caso hola-mundo, el siguiente par谩metro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vac铆a.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vac铆a.
  • sidemenu: Crea una plantilla con men煤 lateral.
  • tabs: Crea una plantilla con Tabs (Pesta帽as).聽

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

Con el par谩metro -l nos muestra como queda nuestra app en las tres plataformas soportadas, es decir, IOS, Android 聽y Windows.

captura-de-pantalla-2016-12-13-a-las-19-21-19
Vista de como quedar铆a nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrar谩 solo una plataforma.

Para ver las posibilidades de ionic podemos crear un proyecto de prueba con plantilla tabs 聽y otro con sidemenu:

ionic start appTabs tabs
Aplicaci贸n con plantilla tabs
Aplicaci贸n con plantilla tabs
ionic start appSide sidemenu
Aplicaci贸n con plantilla sidemenu
Aplicaci贸n con plantilla sidemenu

Como podemos ver sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para a帽adir lo que necesitemos.

En el pr贸ximo capitulo profundizaremos en la estructura de carpetas de una aplicaci贸n con ionic 2 y modificaremos nuestro hola mundo.