Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nfriaa/ionic-tutorial1
Ionic tutorial1 : "getting started" présentation de quelques fonctionnalités de base
https://github.com/nfriaa/ionic-tutorial1
android angular ionic ionic-framework ios node npm vscode
Last synced: about 2 months ago
JSON representation
Ionic tutorial1 : "getting started" présentation de quelques fonctionnalités de base
- Host: GitHub
- URL: https://github.com/nfriaa/ionic-tutorial1
- Owner: nfriaa
- License: mit
- Created: 2017-11-12T16:05:19.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-13T15:33:42.000Z (about 7 years ago)
- Last Synced: 2023-10-20T04:23:06.516Z (about 1 year ago)
- Topics: android, angular, ionic, ionic-framework, ios, node, npm, vscode
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-tutorial1
Ionic tutorial1 : "getting started" présentation de quelques fonctionnalités de base
[](https://github.com/nfriaa/ionic-tutorial1/issues) [](https://github.com/nfriaa/ionic-tutorial1) [](https://github.com/nfriaa/ionic-tutorial1/blob/master/LICENSE)
## Tester cette application en local
```sh
git clone https://github.com/nfriaa/ionic-tutorial1.git
cd ionic-tutorial1
npm install
ionic serve
```
## Créer une nouvelle application ionic
```sh
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
```sh
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 :
```sh
ionic generate page Exemple1
```
Cette commande va générer les fichiers pour la page Exemple1 :
```diff
+ 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`
```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`
```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 :
```sh
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 :
```html
{{item.title}}
```
- Il faut maintneant déclarer et initialiser le tableau items dans le fichier `src/pages/exemple2/exemple2.ts` :
```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.