{"id":20504878,"url":"https://github.com/nfriaa/ionic-tutorial3","last_synced_at":"2026-04-12T01:41:28.286Z","repository":{"id":201889847,"uuid":"110835493","full_name":"nfriaa/ionic-tutorial3","owner":"nfriaa","description":"Ionic tutorial3 : Appel d'une API de type RESTful et affichage des données.","archived":false,"fork":false,"pushed_at":"2018-01-07T14:15:19.000Z","size":100,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T07:55:46.914Z","etag":null,"topics":["android","api","ionic","ionic-framework","ionic3","ios","node","npm","restful"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nfriaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-11-15T13:16:14.000Z","updated_at":"2017-11-17T10:15:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"7e702d0b-43e8-45cc-a395-59b34ffbe121","html_url":"https://github.com/nfriaa/ionic-tutorial3","commit_stats":null,"previous_names":["nfriaa/ionic-tutorial3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriaa%2Fionic-tutorial3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriaa%2Fionic-tutorial3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriaa%2Fionic-tutorial3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriaa%2Fionic-tutorial3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nfriaa","download_url":"https://codeload.github.com/nfriaa/ionic-tutorial3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242102800,"owners_count":20072145,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","api","ionic","ionic-framework","ionic3","ios","node","npm","restful"],"created_at":"2024-11-15T19:40:59.934Z","updated_at":"2025-12-07T01:02:39.481Z","avatar_url":"https://github.com/nfriaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ionic-tutorial3\n\nIonic 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.\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg?style=flat)](https://github.com/nfriaa/ionic-tutorial3/issues) [![Build Status](https://travis-ci.org/nfriaa/ionic-tutorial3.svg?branch=master)](https://travis-ci.org/nfriaa/ionic-tutorial3) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/nfriaa/ionic-tutorial3/blob/master/LICENSE)\n\n![](https://img.shields.io/badge/node-8-red.svg)\n![](https://img.shields.io/badge/npm-5-blue.svg)\n![](https://img.shields.io/badge/ionic-3-ff69b4.svg)\n![](https://img.shields.io/badge/angular-5-orange.svg)\n![](https://img.shields.io/badge/typescript-latest-green.svg)\n![](https://img.shields.io/badge/editor-vscode-yellow.svg)\n\n## Pour tester cette application en local\n```sh\ngit clone https://github.com/nfriaa/ionic-tutorial3.git\ncd ionic-tutorial3\nnpm install\nionic serve\n```\n\n## 1. Créer une nouvelle application Ionic\n```sh\nionic start ionic-tutorial3 sidemenu\n# puis démarrer dans le navigateur :\nionic serve\n```\n\n## 2. Créer le provider\nC'est la classe qui va intéragir avec le service Web (RESTful) pour récupérer les données.\n```sh\nionic g provider PeopleService\n```\n\n- changer le code du fichier `src/providers/people-service/people-service.ts` comme suit :\nNous allons recupérer 5 utilisateurs à partir de l'API `randomuser.me` à l'aide de l'URL `https://randomuser.me/api/?results=5`\n```ts\nimport { Http } from '@angular/http';\nimport { Injectable } from \"@angular/core\";\nimport \"rxjs/add/operator/map\";\n\n@Injectable()\nexport class PeopleServiceProvider {\n  constructor(public http: Http) {\n    console.log(\"Hello PeopleServiceProvider Provider\");\n  }\n\n  data: any;\n\n  load() {\n    if (this.data) {\n      // already loaded data\n      return Promise.resolve(this.data);\n    }\n\n    // don't have the data yet\n    return new Promise(resolve =\u003e {\n      // We're using Angular HTTP provider to request the data,\n      // then on the response, it'll map the JSON data to a parsed JS object.\n      // Next, we process the data and resolve the promise with the new data.\n      this.http\n        .get(\"https://randomuser.me/api/?results=10\")\n        .map(res =\u003e res.json())\n        .subscribe(data =\u003e {\n          // we've got back the raw data, now generate the core schedule data\n          // and save the data for later reference\n          this.data = data.results;\n          resolve(this.data);\n        });\n    });\n  }\n}\n```\n\n- déclarer ensuite l'objet `HttpModule` dans le fichier `src/app/app.module.ts` :\n```ts\n// dans la partie des imports :\nimport {HttpModule} from '@angular/http';\n\n// et dans le tableau 'imports' :\nimports: [\n    ... ,\n    HttpModule\n  ],\n```\n\n## 2. Créer la page qui va contenir la liste des personnes\n- générer la page :\n```sh\nionic g page PeopleList\n```\n\n- puis déclarer cette page dans le menu principale de l'application (voir ionic-tutorial1).\n\n- modifier le code du fichier `src/pages/people-list/people-list.ts` pour avoir :\n```ts\nimport { Component } from '@angular/core';\nimport { IonicPage, NavController, NavParams } from 'ionic-angular';\n\nimport { PeopleServiceProvider } from \"../../providers/people-service/people-service\";\n\n@IonicPage()\n@Component({\n  selector: 'page-people-list',\n  templateUrl: 'people-list.html',\n  providers: [PeopleServiceProvider]\n})\nexport class PeopleListPage {\n\n  public peoples: any;\n\n  constructor(\n    public navCtrl: NavController, \n    public navParams: NavParams,\n    public peopleServiceProvider: PeopleServiceProvider) {\n\n      console.log(\"PeopleListPage constructor.\");\n\n      this.loadPeople();\n  }\n\n  loadPeople(){\n    this.peopleServiceProvider.load()\n    .then(data =\u003e {\n      this.people = data;\n    });\n  }\n\n  ionViewDidLoad() {\n    console.log('ionViewDidLoad PeopleListPage');\n  }\n\n}\n```\n\n- modifier le code du fichier `src/pages/people-list/people-list.html` pour avoir :\n```html\n\u003cion-header\u003e\n  \u003cion-navbar\u003e\n    \u003cbutton ion-button menuToggle\u003e\n      \u003cion-icon name=\"menu\"\u003e\u003c/ion-icon\u003e\n    \u003c/button\u003e\n    \u003cion-title\u003ePeaple List\u003c/ion-title\u003e\n  \u003c/ion-navbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content padding\u003e\n\n  \u003cion-list\u003e\n    \u003cbutton ion-item *ngFor=\"let person of peoples\"\u003e\n      \u003cion-avatar item-left\u003e\n        \u003cimg src=\"{{person.picture.thumbnail}}\"\u003e\n      \u003c/ion-avatar\u003e\n      \u003ch2\u003e{{person.name.title}} {{person.name.first}} {{person.name.last}}\u003c/h2\u003e\n      \u003cp\u003e{{person.email}}\u003c/p\u003e\n    \u003c/button\u003e\n  \u003c/ion-list\u003e\n\n\u003c/ion-content\u003e\n```\n\n## 3. Créer la page qui va contenir les détails d'une personne\n- générer la page :\n```sh\nionic g page PeopleDetails\n```\n\n- puis déclarer cette page dans le fichier `src/app/app.module.ts` (voir ionic-tutorial1).\n\n- dans le fichier `src/pages/people-list/people-list.html` ajouter l'appel de fonction après le clic :\n```html\n\u003cbutton ion-item *ngFor=\"let person of peoples\" (click)=\"itemTapped($event, person)\"\u003e\n```\n\n- dans le fichier `src/pages/people-list/people-list.ts` ajouter la fonction `itemTapped` qui nous rediriger vers la page `PeopleDetailsPage` :\n```ts\nitemTapped(event, person) {\n    this.navCtrl.push(PeopleDetailsPage, {\n      person: person\n    });\n  }\n```\n\n- le code du fichier `src/pages/people-details/people-details.ts` :\n```ts\nimport { Component } from '@angular/core';\nimport { IonicPage, NavController, NavParams } from 'ionic-angular';\n\n@IonicPage()\n@Component({\n  selector: 'page-people-details',\n  templateUrl: 'people-details.html',\n})\nexport class PeopleDetailsPage {\n\n  selectedItem: any;\n\n  constructor(public navCtrl: NavController, public navParams: NavParams) {\n\n    this.selectedItem = navParams.get('person');\n    \n  }\n\n  ionViewDidLoad() {\n    console.log('ionViewDidLoad PeopleDetailsPage');\n  }\n\n}\n```\n\n- le code du fichier `src/pages/people-details/people-details.html` :\n```html\n\u003cion-header\u003e\n  \u003cion-navbar\u003e\n    \u003cbutton menuToggle *ngIf=\"!selectedItem\"\u003e\n      \u003cion-icon name=\"menu\"\u003e\u003c/ion-icon\u003e\n    \u003c/button\u003e\n    \u003cion-title\u003ePeople Details\u003c/ion-title\u003e\n  \u003c/ion-navbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content\u003e\n\n  \u003cion-card *ngIf=\"selectedItem\"\u003e\n    \u003cimg src=\"{{selectedItem.picture.medium}}\" /\u003e\n    \n    \u003cion-card-content\u003e\n      \u003cion-card-title\u003e\n        {{selectedItem.name.title}} {{selectedItem.name.first}} {{selectedItem.name.last}}\n      \u003c/ion-card-title\u003e\n\n      \u003cp\u003e\n        Email: {{selectedItem.email}}\n        \u003cbr/\u003e\n        Phone: {{selectedItem.phone}}\n        \u003cbr/\u003e\n        Nationality: {{selectedItem.nat}}\n        \u003cbr/\u003e\n        City: {{selectedItem.location.city}}\n        \u003cbr/\u003e\n        State: {{selectedItem.location.state}}\n        \u003cbr/\u003e\n        Birth date: {{selectedItem.dob}}\n      \u003c/p\u003e\n    \u003c/ion-card-content\u003e\n  \u003c/ion-card\u003e\n\n\u003c/ion-content\u003e\n```\n\nEt voilà vous pouvez visualiser la liste des personnes et lorsqu'on clic sur une personne on obtient les détails.\n\n## 4. Utiliser une même page pour la liste et les détials\nIl est possible d'utiliser une seule page. On va appliquer ça à la liste du fichier `src/pages/list/list.html` :\n```diff\n\u003cion-header\u003e\n  \u003cion-navbar\u003e\n    \u003cbutton ion-button menuToggle\u003e\n      \u003cion-icon name=\"menu\"\u003e\u003c/ion-icon\u003e\n    \u003c/button\u003e\n    \u003cion-title\u003eList\u003c/ion-title\u003e\n  \u003c/ion-navbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content\u003e\n\n+ \u003cion-list *ngIf=\"!selectedItem\"\u003e\n    \u003cbutton ion-item *ngFor=\"let item of items\" (click)=\"itemTapped($event, item)\"\u003e\n      \u003cion-icon [name]=\"item.icon\" item-start\u003e\u003c/ion-icon\u003e\n      {{item.title}}\n      \u003cdiv class=\"item-note\" item-end\u003e\n        {{item.note}}\n      \u003c/div\u003e\n    \u003c/button\u003e\n  \u003c/ion-list\u003e\n\n+ \u003cdiv *ngIf=\"selectedItem\" padding\u003e\n    You navigated here from \u003cb\u003e{{selectedItem.title}}\u003c/b\u003e : {{selectedItem.note}}\n  \u003c/div\u003e\n\u003c/ion-content\u003e\n````\n\nMaintenant si on clic sur un item de cette liste le résultat est affiché dans la même page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfriaa%2Fionic-tutorial3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnfriaa%2Fionic-tutorial3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfriaa%2Fionic-tutorial3/lists"}