ionic2 Tutoriel
Démarrer avec ionic2

Remarques

Installation ou configuration

Comme Ionic 2 s'améliore de jour en jour, consultez toujours la documentation officielle pour vous tenir au courant des dernières modifications et améliorations.

Prérequis: Vous aurez besoin de NodeJS pour construire des projets Ionic 2. Vous pouvez télécharger et installer le nœud ici et en savoir plus sur npm et les packages utilisés par Ionic 2 ici .

1. Installer Ionic 2

Comme Ionic 1, vous pouvez utiliser l'interface Ionic CLI ou l'interface graphique pour créer et tester rapidement des applications directement dans le navigateur. Il a même toutes les fonctionnalités pour travailler avec vos applications Ionic 1, vous n'aurez donc pas besoin de changer quoi que ce soit!

Pour utiliser Ionic 2, installez simplement ionic from npm:

$ npm install -g ionic

Si vous obtenez une erreur EACCES, suivez les instructions ci- dessous pour donner à node les autorisations nécessaires.

2. Créer votre première application

Une fois la CLI installée, exécutez la commande suivante pour démarrer votre première application:

$ ionic start MyIonic2Project

Le modèle d'onglet est utilisé par défaut, mais vous pouvez choisir un autre modèle en transmettant un indicateur. Par exemple:

$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install

Cela utilisera le modèle de tutoriel .

Pour exécuter votre application, ionic serve -lc répertoire de vos projets et exécutez ionic serve -lc :

$ ionic serve -lc

Le -l active le rechargement en direct de la page, le -c affiche les journaux de la console. Si vous rencontrez des problèmes lors de la création de votre application, assurez-vous que votre package.json correspond à celui de la base ionic2-app.

Vous pouvez jouer avec votre nouvelle application directement dans le navigateur!

3. Construire vers un périphérique

Vous pouvez également créer votre nouvelle application sur un périphérique physique ou un émulateur de périphérique. Vous aurez besoin de Cordova pour continuer.

Pour installer Cordova, exécutez:

$ npm install -g cordova

Consultez les documents du simulateur iOS pour créer des applications iOS (REMARQUE: vous ne pouvez pas construire sur des appareils iOS ou des émulateurs sur un autre système d'exploitation que OSX), ni sur les documents Genymotion pour créer une application Android.

En cours d'exécution sur un appareil iOS:

Pour construire une application iOS, il est nécessaire de travailler sur un ordinateur OSX, car vous aurez besoin du framework cacao pour pouvoir créer pour ios. Si c'est le cas, vous devez d'abord ajouter la plateforme à Cordova en exécutant le programme. commande suivante:

$ ionic cordova platform add ios

Vous aurez besoin de Xcode pour compiler sur un appareil iOS.

Enfin, exécutez votre application avec la commande suivante:

$ ionic cordova run ios

En cours d'exécution sur un appareil Android:

Les étapes pour Android sont presque identiques. Tout d'abord, ajoutez la plate-forme:

$ ionic cordova platform add android

Installez ensuite le SDK Android qui vous permet de compiler sur un appareil Android. Bien que le SDK Android soit livré avec un émulateur, il est vraiment lent. Genymotion est beaucoup plus rapide. Une fois installé, exécutez simplement la commande suivante:

$ ionic cordova run android

Et c'est tout! Félicitations pour la construction de votre première application Ionic 2!

Ionic a aussi rechargé en direct. Donc, si vous souhaitez développer votre application et voir les modifications se produire en direct sur l’émulateur / périphérique, vous pouvez le faire en lançant les commandes suivantes:

Pour iOS:

$ ionic cordova emulate ios -lcs

Attention, sur iOS 9.2.2, le livereload ne fonctionne pas. Si vous souhaitez travailler avec livereload, modifiez le fichier config.xml en ajoutant les éléments suivants:

<allow-navigation href="*"/>

Puis dans le <platform name="ios"> :

<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
</config-file>

Pour Android:

$ ionic cordova run android -lcs

Le l signifie live-reload, c pour les journaux de la console et s pour les journaux du serveur. Cela vous permettra de voir s'il y a des erreurs / avertissements pendant l'exécution.

Construire pour Windows

Si vous souhaitez créer votre projet pour Windows, vous devez travailler sur un ordinateur Windows. Pour commencer, installez la plate-forme Windows sur votre projet ionic2 en exécutant la commande suivante:

$ionic cordova platform add windows

Ensuite, lancez simplement la commande suivante:

$ionic cordova run windows

Pour exécuter dans le navigateur

$ionic serve

pour le navigateur chrome inspecter le périphérique. (tapez la barre d'adresse du navigateur chrome)

chrome://inspect/#devices