CATALOGUE Code & Data Apprendre Ionic 5 Création d'une Page de Détail d'Annonce avec Angular et Ionic

Création d'une Page de Détail d'Annonce avec Angular et Ionic

Nouvelle page : Détails d’une annonce

Vidéo non disponible ! Réessayez plus tard

4h 11min

59 leçons

Transcription

99,00€ 59,40€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

4h 11min

59 leçons

99,00€ 59,40€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Étapes pour Afficher une Annonce en Détail

Objectifs

Créer une nouvelle page de détail dans une application Ionic
Configurer le routage avec des paramètres
Ajouter des événements de clic pour la navigation
Afficher les informations d'une annonce spécifique

Résumé

Apprenez comment rediriger un utilisateur vers une page de détail d'annonce et y afficher les informations pertinentes.

Description

Dans cette vidéo, nous allons créer une nouvelle page dédiée aux détails d'une annonce dans notre application Ionic. Nous commencerons par générer la page avec la commande Ionic generate page, suivi de la configuration du routage dans le fichier AppRoutingModule. Ensuite, nous ajouterons un événement de clic sur nos éléments d'annonce pour rediriger l'utilisateur vers la page de détail correspondante.

Nous couvrirons également l'injection du routeur Angular dans notre constructeur et l'utilisation de la méthode router.navigate pour la navigation avec des paramètres. Finalement, nous testerons notre configuration pour nous assurer que tout fonctionne correctement.

Ce tutoriel est essentiel pour quiconque souhaite renforcer ses compétences en développement mobile avec Angular et Ionic.

Questions fréquentes

Pourquoi utilise-t-on 'this.router.navigate' ?

Pour naviguer vers une nouvelle page en Angular en passant des paramètres dynamiquement.

Quel fichier contient la configuration des routes dans une application Angular ?

Le fichier AppRoutingModule contient la configuration des routes.

Quel paramètre doit-on ajouter à la route pour afficher une annonce spécifique sur la page de détail ?

On doit ajouter le 'annonce ID' comme paramètre de la route.

Programme détaillé

Accueil de la formation

Module 1 - Débuter avec ionic

Ionic c’est quoi ? 01:34

Télécharger et configurer un éditeur 02:32

Installer Ionic 03:25

Créer une première application 05:58

Module 2 - Éléments de base d’un projet Ionic

Arborescence d’un projet Ionic 03:00

Pages, composants et services 01:15

Création du modèle de données 03:24

Notre première page : Affichage de la liste des annonces 03:57

Notre premier composant 03:42

Envoyer un paramètre à un composant 03:36

Notre premier service 03:24

Faire appel à notre service depuis une page 03:57

Module 3 - Découverte des composants Ionic

Lister des éléments : ion-list et ion-item 01:50

Ajouter du contenu textuel à un ion-item: ion-label 03:45

Ajouter une image dans un ion-item: ion-thumbnail et ion-img 03:08

Changer le style d'un element: le css dans Ionic 03:35

Les ionicons 03:45

Ajouter un bouton à l'entête de la page: ion-toolbar et ion-button 04:21

Superposer un composant à une page: ion-modal 07:09

Créer une liste d'éléments à cocher: ion-checkbox 03:38

Récupérer la liste des catégories depuis le service 06:39

Passer des paramètres à un ion-modal 05:30

Fermer un ion-modal et retourner des paramètres 06:13

Créer un Pipe pour filtrer les annonces par catégorie 09:45

Module 4 - Changer le thème de l’application

Les thèmes sur Ionic 03:28

Changer le thème de l’application 04:36

Module 5 - Encore plus de composants

Nouvelle page : Détails d’une annonce 04:02

Récupérer une annonce par identifiant depuis le servcice 04:59

Afficher des informations détaillées : ion-card 03:50

Utiliser les ion-list à l'intérieur d'une balise ion-card 07:07

Menu de l’application : ion-menu 06:48

Nouvelle page : Création d’une annonce 03:10

Les formulaires sur ionic: Mise en place 04:18

Les formulaires : ion-input 04:22

Personnaliser notre ion-input: désactiver la validation automatique du champ 01:54

Personnaliser notre ion-input: validation manuelle du champ 03:17

Personnaliser notre ion-input: afficher un message d'erreur 04:33

Les formulaires : ion-text-area 03:58

Les formulaires : ion-datetime 02:56

Les formulaires : ion-select 06:00

Les formulaires : Validation du formulaire et ion-toast 06:26

Soumettre le formulaire: Créer le nouvel objet Annonce 04:44

Spumettre le formulaire: Enregistrer la nouvelle annonce 04:11

Nouvelle page : Connexion 03:46

Nouveau service : Utilisateur 05:10

Soumettre le formulaire de connexion : redirection 04:36

Vérifier les informations d’identification : ion-alert 03:01

Mise à jour du formulaire de création de l’annonce 04:30

Module 6 - Lancer l’application sur un smartphone Android

Préparer son environnement 03:21

Configurer le smartphone 02:07

Lancer l’application sur smartphone 03:54

Module 7 - Utiliser les fonctionnalités natives du téléphone

Ionic native 02:15

Composer un numéro de téléphone 05:46

Utiliser l’appareil photo du téléphone 10:33

Garder l’utilisateur connecté 05:50

Déconnecter l’utilisateur 05:31

Module 8 - Générer un APK exécutable pour Android

Personnaliser l’application 03:27

Générer l’APK 02:03

Conclusion 01:38