ionic [WIKI SIO : DEPUIS 2017]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Développement d'application Ionic ======

===== Présentation =====

Ionic est un framework front-end qui va vous permettre de créer des applications mobiles hybrides rapidement et aisément, Ionic se base sur d’autres frameworks et technologies web tels que :

AngularJs, pour la partie application web

Cordova pour la partie application mobile

Grace à celui-ci vous pourrez donc déployer votre application sur plusieurs environnements tel que iOS & Android.

===== Prérequis =====

 installer **Node JS**

===== Créer une application =====

Tout d’abord il vous faut installer Ionic de manière globale avec l’outil avec le gestionnaire de package NPM, il suffit d’exécuter cette commande en ligne de commande :

 ''npm install -g ionic cordova''

Ensuite on va pouvoir créer notre premier projet avec une barre de menu sur le côté :

 ''ionic start nomProjet typeProjet''

où typeProjet peut être blank | tabs | sidemenu , et d'autres possibilités sont disponibles.


On peut maintenant tester notre application sur le navigateur web avec la commande

 ''ionic serve''

Cette commande va lancer un serveur http qui va être à l'écoute des modifications dans le projet et va recompiler le langage typescript.
Le serveur écoute alors en local sur le port 8100.

http://localhost:8100

Pour visualiser le résultat dans le navigateur et simuler téléphone mobile , sous Firefox , menu :  développement web | vue adaptative
(F12 sous Chrome)

===== Création d'une nouvelle page =====

''ionic generate page''

Résultat  →  création dossier dans pages avec 4 fichiers

**Ajouter la page dans app.modules.ts**

Bloc Import + ngModule

''import { **ExemplePage** } from '../pages/**exemple**/**exemple**';''

''@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
**ExemplePage**
],''

''entryComponents: [
MyApp,
HomePage,
ListPage,
**ExemplePage**
],''


**Ajouter le lien dans le menu**

Ajout/modifications des lignes ci-dessous dans app.component.ts

''import { **ExemplePage** } from '../pages/**exemple**/**exemple**';''

''this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage },
{ title: '**Exemple**', component: **ExemplePage**}
];''


**Générer le provider**

Avec l'invite de commande :
  
''ionic generate provider''

Nom du provider : **exemples** (par convention, mettre les noms des providers au pluriel)

Résultat → création d'un dossier providers, un sous dossier et un fichier au nom du provider créé.

Modification automatique du fichier app.modules.ts pour intégrer le provider dans l'application ( vérifier ).