Nuestro primer proyecto

En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un proyecto:

1. Usar el cli de Ionic para crear el proyecto.

2. Añadir la plataforma para la que vamos a compilar.

3. Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real.

En las siguientes secciones se detallan cada uno de estos pasos.

Crear un nuevo proyecto

Ionic facilita la creación de proyectos usando su intérprete de línea de comandos (cli), mediante el cual podremos generar proyectos en "blanco" (con una única pantalla vacía) para empezar a programar su contenido desde cero. Para crear un proyecto tenemos que escribir el siguiente comando en un terminal:

$ ionic start myApp blank

Al ejecutar este comando se creará una carpeta llamada "myApp" con el contenido del nuevo proyecto de Ionic. Además el código de la aplicación incluirá una primera pantalla vacía, en la cual podremos empezar a escribir nuestro código.

El cli de Ionic también permite generar proyectos con algo de contenido para no partir desde cero, como por ejemplo:

$ ionic start myApp tabs
$ ionic start myApp sidemenu

Los cuales generarían respectivamente un proyecto de Ionic con la navegación mediante pestañas o con un menú lateral. En la imagen inferior se puede ver un ejemplo de estos tres tipos:

Además, si ejecutamos este comando sin indicar ningún tipo de plantilla, nos aparecerá un menú como el de la siguiente figura para que seleccionemos el tipo de aplicación a crear.

? What starter would you like to use: (Use arrow keys)
❯ tabs ............... ionic-angular A starting project with a simple tabbed interface 
  blank .............. ionic-angular A blank starter project 
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area 
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best pra
ctices for Ionic development. 
  conference ......... ionic-angular A project that demonstrates a realworld application 
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation 
  aws ................ ionic-angular AWS Mobile Hub Starter

Como se puede ver, además de las plantillas ya indicadas nos sugiere algunas más, estas son:

• tabs: Aplicación simple con navegación tipo pestañas.

• sidemenu: Aplicación con menú lateral desplegable.

• blank: Aplicación con una única página vacía.

• super: Aplicación de ejemplo un poco más completa, con varios diseños de página.

• tutorial: Un proyecto de inicio tipo tutorial guiado.

• aws: Aplicación con un ejemplo de uso de AWS.