Installation Ionic

Les exemples de ce site utilisent ionic v1.3.2, et l'adresse de la bibliothèque CDN utilisée est :

<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>

Adresse de téléchargement de la dernière version d'ionic :http://ionicframework.com/docs/overview/#download。

Après avoir téléchargé et décompressé l'archive, elle contient les répertoires suivants :

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

Vous pouvez également télécharger les fichiers de ressources suivants sur Github :https://github.com/driftyco/ionic(dans le répertoire release).

Ensuite, il nous suffit d'inclure les fichiers css/ionic.min.css et js/ionic.bundle.min.js des répertoires ci-dessus dans le projet pour créer une application Ionic.

Exemples

<ion-header-bar class="bar-positive"> <h1 class="title">Bonjour le monde !</h1> </ion-header-bar> <ion-content> <p>Ma première application Ionic.</p> </ion-content>

Essayez-le »

Cliquez sur le bouton "Try it" pour voir l'exemple en ligne.

Ce tutoriel porte sur l'application du framework Ionic. La plupart des exemples s'exécutent dans un navigateur. L'exécution sur les appareils mobiles peut être apprise en détail dans le tutoriel d'installation en ligne de commande suivant.

Remarque :Dans les applications mobiles telles que PhoneGap, nous devons simplement ajouter les fichiers js et css correspondants à la bibliothèque de ressources.

Installation en ligne de commande

Vous devez d'abord installerNode.js, nous aurons besoin de son outil NPM dans l'installation suivante. Pour en savoir plus sur NPM, vous pouvez consulter notreIntroduction à l'utilisation de NPM。

Ensuite, via l'outil en ligne de commandeinstallez la dernière version de cordova et ionic. En vous référant à laAndroidetiOSdocumentation officielle à installer.

Sous Windows et Linux, ouvrez l'outil en ligne de commande et exécutez les commandes suivantes :

$ npm install -g cordova ionic

Sur les systèmes Mac, utilisez les commandes suivantes :

sudo npm install -g cordova ionic

Astuce : iOS doit être installé et utilisé sous Mac OS X et dans l'environnement Xcode.

Si vous avez déjà installé l'environnement ci-dessus, vous pouvez exécuter les commandes suivantes pour mettre à jour la version :

npm update -g cordova ionic

ou

sudo npm update -g cordova ionic

Créer une application

Utilisez les modèles d'application prêts à l'emploi fournis officiellement par Ionic, ou un projet vide pour créer une application Ionic :

$ ionic start myApp tabs

Exécuter le projet Ionic que nous venons de créer

Utilisez l'outil ionic pour créer, tester et exécuter vos applications (ou créez directement via Cordova).

Créer une application Android

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

Si tout se passe bien, l'émulateur s'ouvrira, l'interface est la suivante :

Créer une application iOS

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

Si l'erreur "ios-sim was not found." se produit, vous pouvez exécuter les commandes suivantes :

npm install -g ios-sim

Si tout se passe bien, l'émulateur s'ouvrira, l'interface est la suivante :

Ionic Lab

Ionic Lab a cessé d'être mis à jour.

Ionic Lab est un environnement de développement de bureau. Si vous n'aimez pas utiliser la ligne de commande, Ionic Lab répondra à vos besoins.

Ionic Lab offre aux développeurs un moyen plus simple de démarrer, compiler, exécuter et émuler des applications Ionic.

Ionic Lab prend en charge les plateformes : Windows, Mac OS X, Linux. Adresse de téléchargement :http://lab.ionic.io/, après le téléchargement, installez-le directement. L'interface d'opération complète est la suivante :

Grâce à l'interface ci-dessus, vous pouvez effectuer les opérations suivantes :

  • Créer une application
  • Aperçu de l'application
  • Compiler l'application
  • Exécuter l'application
  • Téléverser l'application
  • Afficher les journaux d'exécution
    • ……

Il est recommandé d'utiliser Sublime Text comme éditeur pour les projets Ionic. Nous pouvons ouvrir directement le projet dans Sublime Text via Ionic Lab, comme montré ci-dessous :

Démonstration de l'opération en GIF

Autres extensions