slides-ionic-recap

Nuevo proyecto

Instalación

• Después de comprobar que tenemos instalado Node.js, instalamos Ionic y Cordova:

npm install -g ionic cordova

Nuevo proyecto

Iniciar

• Para crear un nuevo proyecto:

ionic start PROJECT_NAME [blank | tabs | sidemenu]

Nuevo proyecto

Estructura del proyecto

PROJECT_NAME
├── bower.json
├── config.xml
├── gulpfile.js
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── plugins
│   ├── cordova-plugin-console
│   ├── cordova-plugin-device
│   ├── cordova-plugin-splashscreen
│   ├── cordova-plugin-statusbar
│   ├── cordova-plugin-whitelist
│   ├── fetch.json
│   └── ionic-plugin-keyboard
├── scss
│   └── ionic.app.scss
└── www
    ├── css
    ├── img
    ├── index.html
    ├── js
    └── lib

Nuevo proyecto

Primeros pasos

• Bajamos a la carpeta del proyecto recien creado:

cd PROJECT_NAME

• He instalamos las tareas de Sass:

ionic setup sass

Nuevo proyecto

App y core/config

• Antes de empezar a añadir funcionalidades, dividimos el archivo app.js en app.js y core/config.

  • app.js: Declararemos el módulo general e inyectaremos las dependencias generales.

  • core/config.js: Moveremos la función run e iremos añadiendo las configuraciones de los providers aquí.

Nuevo proyecto

Lanzar la aplicación

• Para ejecutar el proyecto en el navegador hay que lanzar el siguiente comando.

ionic serve [--lab]

• La variable --lab nos permite lanzar dos instancias de la aplicación, para ver las diferencias entre plataformas.

Crear módulos

Crear módulos

Carpetas y archivos

• Seguiremos la técnica de folder by feature.

• Para añadir una nueva funcionalidad:

  • Creamos la carpeta con el nombre de la funcionalidad.
  • Creamos los siguientes archivos:
    • funcionalidad.module.js: declaración del módulo.
    • funcionalidad.js: lógica de la funcionalidad.
    • funcionalidad.html: vista de la funcionalidad, si la tiene.

Crear módulos

Incluir los archivos en el index.html

• Para que la aplicación cargue los archivos, hay que especificarlos en el index.html.

<!-- funcionalidad -->
<script src="js/settings/settings.module.js"></ script>
<script src="js/settings/settings.js"></ script>

Crear módulos

Inyectar la dependencia

• Para que la aplicación pueda usar dicho módulo, hay que inyectarlo en el módulo general:

angular.module('starter', ['ionic', 'starter.settings']);

Crear módulos

Añadir la lógica

• Añadimos la lógica de dicha funcionalidad y lo utilizamos en nuestra aplicación.

angular
    .module('starter.settings')
    .controller('SettingsController', SettingsController);

    function SettingsController(...) {
        ...
    }

Módulos de Bower

Módulos de Bower

Instalación

• Para poder instalar paquetes de Bower, necesitamos instalar Bower:

npm install -g bower

• Para instalar un paquete de Bower:

bower install angular-local-storage [--save | --save-dev]

Módulos de Bower

Incluir los archivos en el index.html

• Para que la aplicación cargue los archivos, hay que especificarlos en el index.html.

<!-- bower -->
<script src="www/lib/angular-local-storage/dist/angular-local-storage.min.js"></ script>

Módulos de Bower

Inyectar la dependencia

• Para que la aplicación pueda usar dicho módulo, hay que inyectarlo en el módulo general:

angular.module('starter', ['ionic', 'LocalStorageModule']);

Módulos de Bower

Configurar el paquete

• Si el paquete viene con un provider para su configuración, lo configuramos en el core/config.js.

• Para ello, añadiremos una función declarada en el .config() del módulo general.

angular.module('starter')
    .config(configLocalStorage)

function configLocalStorage(localStorageServiceProvider) {
  localStorageServiceProvider.setPrefix('starter');
}

Crear módulos

Utilizar el módulo

• Inyectamos la dependencia en los controladores/factorías que harán uso de dicho paquete.

• Hacemos uso de las variables o funciones que nos aporta el módulo.

    function SettingsController(localStorageService) {
        var language = localStorageService.get('language');
    }

Pestañas

Pestañas

Pestañas

Directivas utilizadas

• <ion-nav-bar>: Es la barra de navegación donde se mostrará el título de nuestra vista. Sustituirá el header.

• <ion-nav-view>: Es la directiva encargada de renderizar los templates del estado actual.

• <ion-tabs>: Es la directiva que se encargará de agrupar las pestañas.

• <ion-tab>: Si dicha pestaña está activa, creará un content según su contenido y gestionará su propio histórico.

• <ion-nav-view name="nombre">: Al haber más de una directiva al mismo nivel y cada uno existe en su propia pestaña, hay que darles un nombre para evitar conflictos en el router.

Pestañas

Elementos del HTML

• Sustituiremos el header por una barra de navegación.

<ion-nav-bar class="bar-positive" title="My App"></ion-nav-bar>

• El content, pasará a ser una nav-view.

<ion-nav-view></ion-nav-view>

• Añadiremos las pestaña.

<ion-tabs class="tabs-positive">
    <ion-tab href="list" title="Lista">
        <ion-nav-view name="list"></ion-nav-view>
    </ion-tab>

    <ion-tab href="settings" title="Configuración">
        <ion-nav-view name="settings"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Pestañas

Gestionar los estados

.config(routesConfig)

function routesConfig($stateProvider, $urlRouterProvider) {

    $stateProvider.state('list', {
        url: '/list',
        views: {
            'list': {
                templateUrl: '/js/list/list.html',
                controller: 'ListController as vm'
            }
        }
    })

    $stateProvider.state('settings', {
        url: '/settings',
        views: {
            'settings': {
                templateUrl: '/js/settings/settings.html',
                controller: 'SettingsController as vm'
            }
        }
    });
}