Awesome Open Source
Awesome Open Source

ionic-tutorial1

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

contributions welcome Travis license

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.

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (246,626
Angular (54,859
Vscode (10,011