Estructura de carpetas

Al generar un nuevo proyecto de Ionic como hemos visto en el apartado anterior se nos creará una estructura predefinida de carpetas y ficheros que nos permitirán organizar el código de nuestro proyecto. A continuación vamos a ver para que vale cada una de estos elementos:

• hooks/ - Esta carpeta se utiliza para añadir scripts que se ejecutarán cuando se produzcan determinados eventos, como por ejemplo antes o después, de la compilación, etc. En la propia carpeta se incluye un fichero con instrucciones para su utilización.

• platforms/ - Contiene el código específico de las plataformas móviles para las cuales se va a compilar, como por ejemplo Android, iOS, etc. El código de esta carpeta es generado y no se ha de modificar manualmente.

• plugins/ - Contiene los plugins o módulos instalados para nuestra aplicación, los cuales se utilizan para añadir funcionalidad como el acceso a las características nativas del móvil.

• resources/ - Recursos específicos de las plataformas. En esta carpeta podremos colocar aquellos assets que sean únicos o dependientes de una plataforma en concreto.

• scss/ - Código SCSS que será compilado a la carpeta www/css/

• www/ - Contiene el código fuente principal de nuestra aplicación web: HTML, CSS, JavaScript, imágenes, etc. Esta carpeta es donde tendremos que desarrollar la aplicación web de forma centralizada y después utilizarla para la compilación para las distintas plataformas.

• bower.json - Listado de dependencias y paquetes de Bower.

• config.xml - Contiene la configuración de Cordova (o PhoneGap) con las opciones especificas para cada plataformas de compilación.

• gulpfile.js - Listado de tareas de Gulp.

• ionic.config.json - Configuración del proyecto de Ionic.

• package.json - Dependencias y paquetes de NodeJS.

Al crear un nuevo proyecto todas las carpetas se encontrarán vacías o incluirán algunos ficheros de ejemplo. Las carpetas platforms y resources no vienen por defecto sino que se crearán una vez añadamos la primera plataforma de compilación.

La carpeta www incluye a su vez una serie de subcarpetas y algo de código de ejemplo (este código dependerá de la plantilla con la que hayamos generado el proyecto: blank, tabs o sidemenu). Como hemos dicho, esta carpeta es donde tenemos que desarrollar el código principal de nuestra aplicación así que tenemos que conocer bien su estructura:

• css/ - Aquí colocaremos todas las hojas de estilo que se usen en la aplicación.

• img/ - En esta carpeta almacenaremos las imágenes de nuestro proyecto.

• js/ - Contendrá todo el código JavaScript de la aplicación.

• lib/ - Aquí guardaremos todas las librerías que se usen en nuestro código. Por defecto ya viene incluido todo el código de la librería Ionic (Javascipts, CSS, etc.) para que lo podamos cargar desde nuestro proyecto.

• templates/ - Esta carpeta viene preparada para almacenar las plantillas o vistas de la aplicación (en algunas versiones no se crea por defecto).

• index.html - Este es el fichero principal que se abrirá al cargar la aplicación. Aquí tendremos que cargar todo lo necesario y mostrar el contenido de la primera pantalla.

En las siguientes secciones analizaremos el código básico necesario que tenemos que incluir en el fichero index.html para crear una aplicación y los componentes principales que podemos utilizar.