Premier tutoriel ionic 3 : outils de développement et premier projet
1. INSTALLER NODEJS
Première chose d'abord, avant que nous puissions installer Ionic et Cordova nous avons besoin d'avoir Node.js.
Assurez-vous de sélectionner une version appropriée en fonction de votre plate-forme Windows (32 bits ou 64 bits). Pendant l'installation, rappelez-vous l'emplacement final.
Pour vérifier que tout est était bien installer taper dans l’invite de commande :
node –v
Puis
npm –v
Vous obtiendrez les versions installés sur votre machine.
2. INSTALLER Ionic & CORDOVA
Maintenant que Node.js est installé, vous allez installer Ionic en lançant la commande d'installation de package via NPM.
npm install -g ionic cordova
Maintenant que vous avez les premiers éléments de votre environnement de développement, vous allez créer votre tout premier projet pour avoir un aperçu rapide des possibilités offertes par Ionic.
3. INSTALLER Visual Studio code (c'est un éditeur de code et non pas Microsoft Visual studio)
4. Créer un projet
Pour créer un projet utilisez l'invite de commande en tapant :
ionic start nomProjet --v2
mise à jour :
Si vous utilisez la commande précédente vous obtiendrez :
Si vous utilisez la commande précédente vous obtiendrez :
[ERROR] Sorry! The --v1 and --v2 flags have been removed.
Use the --type option. (ionic start --help)
For Ionic Angular projects, try ionic start ionreddit --type=ionic-angular
La commande pour Ionic cli v3.x est:
ionic start nomProjet blank --type ionic-angular
Si vous voulez ionic 1:
ionic start nomProjet blank --type ionic1
et après sa création placez vous dans le dossier du projet (dans notre cas le projet s'appelle nomProjet et finalement tapez la commande code . (code puis espace puis point) pour que le projet s'ouvre avec Visual studio code.
Si le modèle par défaut n'est pas quelque chose que vous voulez utiliser, Ionic a quelques modèles disponibles:
• tabs : a simple 3 tab layout
• sidemenu: a layout with a swipable menu on the side
• blank: a bare starter with a single page
• super: starter project with over 14 ready to use page designs
• tutorial: a guided starter project
Si vous ne spécifiez pas de modèle en exécutant "ionic start nomProjet --v2", le modèle tabs sera utilisé.
Si par exemple vous tapez "ionic start nomProjet tutorial --v2" le modèle tutorial sera le modèle du projet:
·
- start indiquera à la CLI de créer une nouvelle application.
- · MyIonic2Project sera le nom du répertoire et le nom de l'application de votre projet.
- · Tutoriel sera le modèle de démarrage pour votre projet.
- · --v2 indique à la CLI que vous voulez un projet 3.0.
Pour obtenir un aperçu rapide de votre application dans le navigateur, utilisez la commande serve.
cd monProjet/
ionic serve
ou
ionic serve --lab
La première commande va ouvrir l'application dans votre navigateur web défini par défaut pour votre OS, la seconde va ouvrir l'application dans votre navigateur mais avec l'affichage tel qu'il sera sur iOS et sur Android.
après avoir terminer ce tuto passez à l"tape suivante : http://houssem-lahiani.
Hello, 'la commande "code ." n'est pas reconnu comme commande interne ou externe, un programme exécutable ou un fichier de commandes.'
RépondreSupprimervoici le message d'erreur que j'ai
je suis pourtant bien dans mon projet "c\users\moi\nouveauProjet>code ."
Une solution ?
Il faut s'assurer que visual studio code est bien installé sue pc.... la commande "code ." sert à ouvrir le projet par visual studio code.
SupprimerYes, merci j'avais fini par trouvé, et effectivement je pensais que j'avais déjà installé mais non
RépondreSupprimer