ionic2 Tutorial
Empezando con ionic2
Buscar..
Observaciones
Ionic 2 es una tecnología de desarrollo móvil multiplataforma. Este marco está diseñado para crear aplicaciones móviles híbridas y también se puede utilizar para aplicaciones de escritorio. Es una tecnología de escribir una vez, correr en todas partes. Utiliza tecnologías web como JavaScript / Typescript, Angular 2, HTML y CSS (SCSS / LESS). Las aplicaciones Ionic2 funcionan bien en >=android 4.4 , pero quieres ejecutar en android 4.1 a android 4.3 tienes que usar cross-walk .
Instalación o configuración
Como Ionic 2 está mejorando cada día, siempre revise la documentación oficial para estar al tanto de los últimos cambios y mejoras.
Requisitos previos: Necesitará NodeJS para construir proyectos de Ionic 2. Puede descargar e instalar el nodo aquí y obtener más información sobre npm y los paquetes que usa Ionic 2 aquí .
1. Instalar Ionic 2
Al igual que Ionic 1, puede utilizar la CLI o la GUI de Ionic para crear y probar rápidamente aplicaciones en el navegador. Incluso tiene todas las funciones para trabajar con sus aplicaciones Ionic 1, por lo que no tendrá que cambiar nada.
Para usar Ionic 2, simplemente instale ionic desde npm:
$ npm install -g ionic
Si recibe un error EACCES, siga las instrucciones aquí para otorgar al nodo los permisos que necesita.
2. Creando tu primera aplicación
Una vez que se instale la CLI, ejecute el siguiente comando para iniciar su primera aplicación:
$ ionic start MyIonic2Project
La plantilla de pestañas se usa de forma predeterminada, pero puede elegir otra plantilla pasando una bandera. Por ejemplo:
$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install
Esto utilizará la plantilla tutorial .
Para ejecutar su aplicación, cambie a su directorio de proyectos y ejecute ionic serve -lc :
$ ionic serve -lc
El -l activa la recarga en vivo de la página, el -c muestra los registros de la consola. Si tiene problemas para crear su aplicación, asegúrese de que package.json coincida con el de ionic2-app-base
¡Puedes jugar con tu nueva aplicación allí mismo en el navegador!
3. Construyendo a un dispositivo
También puede crear su nueva aplicación en un dispositivo físico o en un emulador de dispositivo. Necesitarás a Cordova para proceder.
Para instalar Cordova, ejecute:
$ npm install -g cordova
Consulte los documentos del simulador de iOS para crear aplicaciones de iOS (NOTA: no puede compilar dispositivos o emuladores de iOS en ningún sistema operativo que no sea OSX), ni los documentos de Genymotion para crear una aplicación de Android.
Ejecutando en dispositivo iOS:
Para crear una aplicación iOS, es necesario que trabaje en una computadora OSX, ya que necesitará la infraestructura de cacao para poder compilar para ios, si es el caso, primero deberá agregar la plataforma a cordova ejecutando siguiente comando:
$ ionic cordova platform add ios
Necesitará Xcode para compilar en un dispositivo iOS.
Finalmente, ejecute su aplicación con el siguiente comando:
$ ionic cordova run ios
Ejecutando en un dispositivo Android:
Los pasos para Android son casi idénticos. Primero, agregue la plataforma:
$ ionic cordova platform add android
Luego instale el SDK de Android que le permite compilar en un dispositivo Android. Aunque el SDK de Android viene con un emulador, es muy lento. Genymotion es mucho más rápido. Una vez instalado, simplemente ejecute el siguiente comando:
$ ionic cordova run android
¡Y eso es! ¡Felicidades por crear tu primera aplicación Ionic 2!
Ionic tiene recarga en vivo también. Entonces, si desea desarrollar su aplicación y ver los cambios que se están produciendo en vivo en el emulador / dispositivo, puede hacerlo ejecutando los siguientes comandos:
Para iOS:
$ ionic cordova emulate ios -lcs
Ten cuidado, en iOS 9.2.2 la carga de datos no funciona. Si desea trabajar con livereload, edite el archivo config.xml agregando lo siguiente:
<allow-navigation href="*"/>
Luego en el <platform name="ios"> :
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</config-file>
Para Android:
$ ionic cordova run android -lcs
La l significa live-recargar, c para los registros de la consola y s para los registros del servidor. Esto le permitirá ver si hay errores / advertencias durante la ejecución.
Construyendo para Windows
Si desea construir su proyecto para Windows, necesita trabajar en una computadora con Windows. Para comenzar, instale la plataforma de Windows en su proyecto ionic2 ejecutando el siguiente comando:
$ionic cordova platform add windows
Luego simplemente ejecuta el siguiente comando:
$ionic cordova run windows
Para ejecutar en el navegador
$ionic serve
para el dispositivo de inspección del navegador Chrome (escriba en la barra de direcciones del navegador Chrome)
chrome://inspect/#devices