Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nfriaa/ionic-tutorial3
Ionic tutorial3 : Appel d'une API de type RESTful et affichage des données.
https://github.com/nfriaa/ionic-tutorial3
android api ionic ionic-framework ionic3 ios node npm restful
Last synced: 13 days ago
JSON representation
Ionic tutorial3 : Appel d'une API de type RESTful et affichage des données.
- Host: GitHub
- URL: https://github.com/nfriaa/ionic-tutorial3
- Owner: nfriaa
- License: mit
- Created: 2017-11-15T13:16:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-07T14:15:19.000Z (about 7 years ago)
- Last Synced: 2024-11-15T19:42:12.990Z (2 months ago)
- Topics: android, api, ionic, ionic-framework, ionic3, ios, node, npm, restful
- Language: TypeScript
- Size: 97.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-tutorial3
Ionic tutorial3 : Appel d'une API de type RESTful et affichage des données (liste / détails). L'API utilisée dans ce tutorial est `https://randomuser.me` qui permet d'avoir un ou plusieurs personnes exemples.
[](https://github.com/nfriaa/ionic-tutorial3/issues) [](https://travis-ci.org/nfriaa/ionic-tutorial3) [](https://github.com/nfriaa/ionic-tutorial3/blob/master/LICENSE)
## Pour tester cette application en local
```sh
git clone https://github.com/nfriaa/ionic-tutorial3.git
cd ionic-tutorial3
npm install
ionic serve
```
## 1. Créer une nouvelle application Ionic
```sh
ionic start ionic-tutorial3 sidemenu
# puis démarrer dans le navigateur :
ionic serve
```
## 2. Créer le provider
C'est la classe qui va intéragir avec le service Web (RESTful) pour récupérer les données.
```sh
ionic g provider PeopleService
```
- changer le code du fichier `src/providers/people-service/people-service.ts` comme suit :
Nous allons recupérer 5 utilisateurs à partir de l'API `randomuser.me` à l'aide de l'URL `https://randomuser.me/api/?results=5`
```ts
import { Http } from '@angular/http';
import { Injectable } from "@angular/core";
import "rxjs/add/operator/map";
@Injectable()
export class PeopleServiceProvider {
constructor(public http: Http) {
console.log("Hello PeopleServiceProvider Provider");
}
data: any;
load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
// We're using Angular HTTP provider to request the data,
// then on the response, it'll map the JSON data to a parsed JS object.
// Next, we process the data and resolve the promise with the new data.
this.http
.get("https://randomuser.me/api/?results=10")
.map(res => res.json())
.subscribe(data => {
// we've got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data.results;
resolve(this.data);
});
});
}
}
```
- déclarer ensuite l'objet `HttpModule` dans le fichier `src/app/app.module.ts` :
```ts
// dans la partie des imports :
import {HttpModule} from '@angular/http';
// et dans le tableau 'imports' :
imports: [
... ,
HttpModule
],
```
## 2. Créer la page qui va contenir la liste des personnes
- générer la page :
```sh
ionic g page PeopleList
```
- puis déclarer cette page dans le menu principale de l'application (voir ionic-tutorial1).
- modifier le code du fichier `src/pages/people-list/people-list.ts` pour avoir :
```ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PeopleServiceProvider } from "../../providers/people-service/people-service";
@IonicPage()
@Component({
selector: 'page-people-list',
templateUrl: 'people-list.html',
providers: [PeopleServiceProvider]
})
export class PeopleListPage {
public peoples: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public peopleServiceProvider: PeopleServiceProvider) {
console.log("PeopleListPage constructor.");
this.loadPeople();
}
loadPeople(){
this.peopleServiceProvider.load()
.then(data => {
this.people = data;
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad PeopleListPage');
}
}
```
- modifier le code du fichier `src/pages/people-list/people-list.html` pour avoir :
```html
Peaple List
{{person.name.title}} {{person.name.first}} {{person.name.last}}
{{person.email}}
```
## 3. Créer la page qui va contenir les détails d'une personne
- générer la page :
```sh
ionic g page PeopleDetails
```
- puis déclarer cette page dans le fichier `src/app/app.module.ts` (voir ionic-tutorial1).
- dans le fichier `src/pages/people-list/people-list.html` ajouter l'appel de fonction après le clic :
```html
```
- dans le fichier `src/pages/people-list/people-list.ts` ajouter la fonction `itemTapped` qui nous rediriger vers la page `PeopleDetailsPage` :
```ts
itemTapped(event, person) {
this.navCtrl.push(PeopleDetailsPage, {
person: person
});
}
```
- le code du fichier `src/pages/people-details/people-details.ts` :
```ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-people-details',
templateUrl: 'people-details.html',
})
export class PeopleDetailsPage {
selectedItem: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.selectedItem = navParams.get('person');
}
ionViewDidLoad() {
console.log('ionViewDidLoad PeopleDetailsPage');
}
}
```
- le code du fichier `src/pages/people-details/people-details.html` :
```html
People Details
{{selectedItem.name.title}} {{selectedItem.name.first}} {{selectedItem.name.last}}
Email: {{selectedItem.email}}
Phone: {{selectedItem.phone}}
Nationality: {{selectedItem.nat}}
City: {{selectedItem.location.city}}
State: {{selectedItem.location.state}}
Birth date: {{selectedItem.dob}}
```
Et voilà vous pouvez visualiser la liste des personnes et lorsqu'on clic sur une personne on obtient les détails.
## 4. Utiliser une même page pour la liste et les détials
Il est possible d'utiliser une seule page. On va appliquer ça à la liste du fichier `src/pages/list/list.html` :
```diff
List
+
{{item.title}}
{{item.note}}
+
You navigated here from {{selectedItem.title}} : {{selectedItem.note}}
````
Maintenant si on clic sur un item de cette liste le résultat est affiché dans la même page.