ionic-tutorial1

Ionic tutorial1 : "getting started" présentation de quelques fonctionnalités de base

Tester cette application en local

git clone https://github.com/nfriaa/ionic-tutorial1.git
cd ionic-tutorial1
npm install
ionic serve

Créer une nouvelle application ionic

ionic start ionic-tutorial1 sidemenu

Plusieurs autres templates sont disponibles pour créer un nouveau projet (tabs : pour une application basée sur les onglets, blank, super ou tutorial)

Démarrer l'application et tester dans un navigateur

cd ionic-tutorial1
ionic serve

Cette instruction ouvre une page http://localhost:8100/ dans le navigateur dans la quelle on peut tester le fonctionnement de notre application.

Ajouter une nouvelle page Exemple1

Pour ajouter une nouvelle page on va utiliser Ionic CLI :

ionic generate page Exemple1

Cette commande va générer les fichiers pour la page Exemple1 :

+ src/pages/exemple1/exemple1.ts
+ src/pages/exemple1/exemple1.module.ts
+ src/pages/exemple1/exemple1.scss
+ src/pages/exemple1/exemple1.html

Il faut maintenant l'ajouter au Menu principale de l'application. Voilà les changements à faire :

• Fichier src/app/app.module.ts

// ajouter l'import :
import { Exemple1Page } from './../pages/exemple1/exemple1';

// le tableau declarations :
declarations: [
    ... ,
    Exemple1Page
  ]

// le tableau entryComponents :
entryComponents: [
    ... ,
    Exemple1Page
  ]  

• Fichier src/app/app.component.ts

// ajouter l'import :
import { Exemple1Page } from './../pages/exemple1/exemple1';

// le tableau this.pages :
this.pages = [
      ... ,
      { title: 'Exemple1', component: Exemple1Page }
    ];

Et voilà !

Exemple 2 : listes

• Ajouter une nouvelle page à l'aide d'Ionic CLI :

ionic generate page Exemple1

• Puis déclarer cette nouvelle page dans les fichiers src/app/app.module.ts et src/app/app.component.ts.
• Ensuite dans le fichier src/pages/exemple2/exemple2.html ajouter :

<ion-list >
    <button ion-item *ngFor="let item of items">
      {{item.title}}
    </button>
</ion-list> 

• Il faut maintneant déclarer et initialiser le tableau items dans le fichier src/pages/exemple2/exemple2.ts :

// dans la partie 'attributs' de la classe :
items: Array<{ title: string }>;

// dans le constructeur :
this.items = [];
this.items.push({ title: "DD" });
this.items.push({ title: "EE" });
this.items.push({ title: "FF" });
this.items.push({ title: "GG" });

D'autres exemples sont présents dans cette application : afficher une alerte si on clic sur un item, ou afficher une autre page, afficher une note dans la console, tableau d'objets ...etc.