Instalación de Ionic

Los ejemplos de este sitio utilizan la versión Ionic v1.3.2. La dirección de la biblioteca CDN utilizada es:

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>

Dirección de descarga de la última versión de Ionic:http://ionicframework.com/docs/overview/#download。

Después de descargar, descomprima el archivo comprimido, que contiene los siguientes directorios:

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

También puede descargar los siguientes archivos de recursos en GitHub:https://github.com/driftyco/ionic(En el directorio release).

A continuación, solo necesitamos introducir en el proyecto los archivos css/ionic.min.css y js/ionic.bundle.min.js de los directorios anteriores para crear una aplicación Ionic.

Ejemplo

<ion-header-bar class="bar-positive"> <h1 class="title">Hello World!</h1> </ion-header-bar> <ion-content> <p>Mi primera aplicación de Ionic.</p> </ion-content>

Pruébalo »

Haz clic en el botón 'Pruébalo' para ver el ejemplo en línea.

Este tutorial se centra en la aplicación del framework Ionic. La mayoría de los ejemplos se ejecutan en el navegador; el funcionamiento en dispositivos móviles se puede conocer en detalle en el tutorial de instalación por línea de comandos que sigue.

Nota:En aplicaciones móviles como PhoneGap, solo necesitamos agregar los archivos js y css correspondientes a la biblioteca de recursos.

Instalación por línea de comandos

Primero necesita instalarNode.jsEn la instalación posterior necesitaremos usar su herramienta NPM. Para obtener más información sobre NPM, puede consultar nuestroIntroducción al uso de NPM。

Luego, a través de laherramienta de línea de comandosinstale las últimas versiones de Cordova e Ionic. Consulte laAndroidyiOSdocumentación oficial para instalarlos.

En Windows y Linux, abra la herramienta de línea de comandos y ejecute el siguiente comando:

$ npm install -g cordova ionic

En el sistema Mac, use el siguiente comando:

sudo npm install -g cordova ionic

Consejo: iOS debe instalarse y usarse en Mac OS X con el entorno Xcode.

Si ya ha instalado los entornos anteriores, puede ejecutar el siguiente comando para actualizar la versión:

npm update -g cordova ionic

o

sudo npm update -g cordova ionic

Crear una aplicación

Cree una aplicación de Ionic utilizando una plantilla de aplicación lista para usar proporcionada oficialmente por Ionic, o un proyecto en blanco:

$ ionic start myApp tabs

Ejecutar el proyecto de Ionic que acabamos de crear

Use ionic tool para crear, probar y ejecutar sus apps (o créelas directamente mediante Cordova).

Crear una aplicación de Android

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android

Si todo va bien, se abrirá el emulador, y la interfaz será como se muestra a continuación:

Crear una aplicación de iOS

$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios

Si aparece el error 'ios-sim was not found.', puede ejecutar el siguiente comando:

npm install -g ios-sim

Si todo va bien, se abrirá el emulador, y la interfaz será como se muestra a continuación:

Ionic Lab

Ionic Lab ya no se actualiza.

Ionic Lab es un entorno de desarrollo de escritorio. Si no le gusta usar la línea de comandos, Ionic Lab satisfará sus necesidades.

Ionic Lab ofrece a los desarrolladores una forma más sencilla de iniciar, compilar, ejecutar y simular aplicaciones de Ionic.

Las plataformas compatibles con Ionic Lab son: Windows, Mac OS X y Linux. La dirección de descarga es:http://lab.ionic.io/Después de descargarlo, simplemente instálelo. La interfaz de operación completa es la siguiente:

A través de la interfaz anterior puede realizar las siguientes operaciones:

  • Crear una aplicación
  • Previsualizar la aplicación
  • Compilar la aplicación
  • Ejecutar la aplicación
  • Subir la aplicación
  • Ver el registro de ejecución
    • ……

Se recomienda usar Sublime Text como editor para proyectos de Ionic. Podemos abrir directamente el proyecto en Sublime Text a través de Ionic Lab, como se muestra a continuación:

Demostración de operación en Gif

Otras extensiones