Ionic 3 - Generación de nuevas páginas con Ionic CLI

Una tarea común cuando se trabaja en una aplicación móvil es agregar nuevas páginas o vistas a su aplicación. En Ionic Framework 1 , esto incluía agregar un archivo de plantilla HTML, un archivo JavaScript para el controlador Angular y algún código CSS o SASS en un nuevo archivo SASS o en el archivo CSS de aplicaciones.

En Ionic 2 el equipo Ionic ha añadido una nueva característica muy agradable a la CLI Ionic. El comando de generación iónica . Te permite subir nuevos archivos y directorios en tu aplicación desde la línea de comandos. Así que para agregar una nueva página, solo corre

$ ionic generan página MyNewPage

Se agregan estos archivos al proyecto:


app\pages\my-new-page\my-new-page.html
app\pages\my-new-page\my-new-page.js
app\pages\my-new-page\my-new-page.scss



The scaffolded files have the following content:


my-new-page.html

<ion-navbar *navbar>
 <ion-title>my-new-page</ion-title>
</ion-navbar>
<ion-content padding class=”my-new-page”>
 
</ion-content>


my-new-page.js

import {Page, NavController} from ‘ionic/ionic’;

@Page({
 templateUrl: ‘build/pages/my-new-page/my-new-page.html’,
})
export class MyNewPage {
 constructor(nav: NavController) {
 this.nav = nav;
 }
}


my-new-page.scss

.my-new-page {

}






Por lo tanto, desde aquí se puede ir a al uso de la nueva página en su aplicación. Por ejemplo, puede comenzar navegando con el enrutador Ionic 3.
import {Page, NavController} from 'ionic/ionic';
import {MyNewPage} from '../my-new-page/my-new-page';
...
export class AnotherPage {
 constructor(nav: NavController) {
  this.nav = nav;
 }
 navigate() {
  this.nav.push(MyNewPage);
 }
}

ademas puedes usar generate y agregar estos tipos:

component
directive
pipe
provider
tabs



leer 

https://www.ion-book.com/blog/tips/ionic-generator/
http://www.9lessons.info/2017/06/ionic3-angular4-create-welcome-page.html

Ionic CLI v3, lo que debes saber

Ionic es una gran plataforma para desarrollar web apps móviles, ¡pero evoluciona tan rápido que a veces te sacan de quicio! Hace unos días publicaron una actualización de su herramienta de linea de comandos (CLI) y han cambiado algunas cosas. Esta es una breve guía para adaptarte a Ionic CLI v3.

Requerimientos

Antes de nada comentar que para usar la nueva CLI de Ionic necesitas tener unas versiones bastante modernas de node y npm:

• Node 6+
• Npm 3+

Proceso de instalación

La CLI se instala con el paquete principal de ionic, así que es tan simple como hacer:

npm install -g ionic    Cuando no lo tienes instalado o 

$ npm install -g ionic@latest 

Si ahora ejecutas ionic info, te debería salir por consola un resultado similar al siguiente:

global packages:

    @ionic/cli-utils : 1.1.2
    Ionic CLI        : 3.1.2

System:
    #...your node version and system details...

Como ves, mi CLI de Ionic está en una versión 3+.

Nuevo proyecto

El comando para crear un nuevo proyecto se ha modificado ligeramente para convertir a Ionic 2+ (Ionic v2 y Ionic v3) en la tipología principal de proyecto.

Ahora ya no debes indicar la versión --v2. Para crear un nuevo proyecto en la última versión de Ionic, debes hacer:

ionic start <name> [tmpl]

Si quieres iniciar un proyecto con la versión 1 de Ionic, siempre puedes indicarlo con --type ionic1.

Listar proyectos starter

Para saber que templates puedes usar al crear un nuevo proyecto (ese [tmpl] de comando anterior), lo puedes hacer igual que en versiones anteriores, con:

ionic start --list

Lanzar el servidor de desarrollo

Este comando tampoco ha cambiado. Si quieres lanzar el servidor de desarrollo, solo tienes que hacer:

ionic serve

Cambios sustanciales respecto a la CLI v2

Más rápido

El paquete que instala la CLI ha reducido su tamaño drásticamente y eso lo notarás en el tiempo de instalación. Ahora es mucho más rápido. Además, también se ha mejorado la velocidad del comando start.

Nomenclatura de comandos por plataformas

Uno de los cambios que más notarás es la nueva nomenclatura de comandos. Ahora han sido namespaced, es decir, se han delimitado por nombres. Siempre es engorroso esto de que te cambien algunos comandos…

¿Por qué lo hacen?

¿Qué sentido tiene?

Después del enfado inicial, si te fijas un poco, verás que tiene sentido lo que han hecho.

Ionic empezó orientado únicamente a plataformas móviles (y web mobile) y ahora se están abriendo a otras plataformas como por ejemplo Electron, para llegar a escritorio. Y claro, ahí la CLI antigua no estaba preparada.

Los comandos principales que usabas en desarrollo ahora pasan a tener el nombre de la plataforma delante, es decir, para móvil tienes los siguientes cambios:

• ionic build ======> ionic cordova build
• ionic emulate ====> ionic cordova emulate
• ionic run ======== > ionic cordova run
• ionic platform ===> ionic cordova platform
• ionic plugins ====> ionic cordova plugins

Comandos guiados

Ahora muchos de los comandos te facilitan un guiado en caso de que te falte alguna dependencia o lo hayas introducido incompleto.

Por ejemplo, si creas un proyecto nuevo y lo intentas compilar para iOS o Android, la CLI te indica que te falta el plugin @ionic/cli-plugin-cordova. Además, se ofrece a instalarlo por ti.

Lo mismo pasa con el comando start, así como con el comando generate que te permite crear nuevos archivos. Si no especificas el tipo de archivo que quieres crear, la CLI te lo pregunta.

Comandos eliminados

Los siguientes comandos (la mayoría de servicios en el cloud de Ionic), han sido eliminados: setup, share, lib, io, security, push, config, service, add, remove, list, hooks, state.

En el caso de este último (state), se ha eliminado por que ahora cordova ya implementa un mecanismo interno para guardar y restaurar los plugins que usas.

Nuevos comandos

La CLI v3 de Ionic ha añadido el comando signup, que está también relacionado con sus servicios en el cloud.

Commands

Here is a full list of Ionic commands. You can also see the list on the command line with ionic --help.

Command	Description
build	Build web assets and prepare your app for any platform targets
docs	Open the Ionic documentation website
generate	Generate pipes, components, pages, directives, providers, and tabs (ionic-angular >= 3.0.0)
info	Print system/environment info
link	Connect your local app to Ionic
login	Login with your Ionic ID
serve	Start a local dev server for app dev/testing
signup	Create an Ionic account
start	Create a new project
telemetry	Opt in and out of telemetry
upload	Upload a new snapshot of your app
config get	Print config values
config set	Set config values
cordova build	Build (prepare + compile) an Ionic project for a given platform
cordova compile	Compile native platform code
cordova emulate	Emulate an Ionic project on a simulator or emulator
cordova platform	Manage Cordova platform targets
cordova plugin	Manage Cordova plugins
cordova prepare	Copies assets to Cordova platforms, preparing them for native builds
cordova resources	Automatically create icon and splash screen resources
cordova run	Run an Ionic project on a connected device
package build	Start a package build
package download	Download your packaged app
package info	Get info about a build
package list	List your cloud builds