From c1dfd1382bcc0f9076ca2a41246784c9e7a9a433 Mon Sep 17 00:00:00 2001 From: Lefeuvre Romain Date: Wed, 8 Dec 2021 23:28:11 +0100 Subject: [PATCH] Update --- README.md | 103 +++++++++++++++++++++++++++++------------------------- 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index f52b7c32..ddc5f6ba 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,9 @@ Votre aventure dans le monde merveilleux des frameworks JavaScript commence avec Angular. -Angular est un framework développé par Google. Ce framework se base principalement sur la définition de composants et de services. L'objectif est d'avoir un code modulaire et réutilisable. Le langage recommandé pour programmer avec Angular et celui que nous allons utiliser est Typescript. On -peut aussi utiliser Javascript 5/6 ou bien Dart. +Angular est un framework développé par Google. Ce framework se base principalement sur la définition de composants et de services. L'objectif est d'avoir un code modulaire et réutilisable. Le langage recommandé pour programmer avec Angular et celui que nous allons utiliser est Typescript. On peut aussi utiliser Javascript ou bien Dart. -Pour vous aider dans votre quète, le professeur Chen vous a laissé des instructions ainsi que les +Pour vous aider dans votre quête, le professeur Chen vous a laissé des instructions ainsi que les éléments de bases pour créer un Pokédex à cette adresse : [https://github.com/barais/teaching-jxs-angular](https://github.com/barais/teaching-jxs-angular) (l'utilisation d'une bicyclette est conseillée pour s'y rendre plus vite). @@ -17,7 +16,23 @@ C'est un [clone](https://github.com/gbecan/teaching-jxs-angular4) du sujet déve ## Step 0 -Vérifiez l'installation de nodejs à l'aide de nvm (voir guid d'install [http://olivier.barais.fr/blog/posts/teaching/istic/m2/french/2018/09/10/Operation_portable_M2_ISTIC.html](http://olivier.barais.fr/blog/posts/teaching/istic/m2/french/2018/09/10/Operation_portable_M2_ISTIC.html) +### Installation de node js + +* Sous linux : + Installer la dernière version de node via nvm (nvm permet d'installer et d'utiliser rapidement différentes versions de node et npm) + https://github.com/nvm-sh/nvm + + ``` + curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash + ``` + Relancer le terminal + + ``` + nvm install node + ``` + +* Sous windows : + https://nodejs.org/en/download/ ### Installez ng-cli @@ -53,9 +68,7 @@ Changez le template *app-component.html* en remplaçant le code du template par ## Step 2: Recherche d'un pokémon via son numéro -La première étape pour développer notre pokédex consiste à proposer au dresseur de rechercher un -pokémon via son numéro. Nous allons donc créer un composant Angular qui va contenir et gérer cette -interface. Pour créer un composant, il suffit de créer une classe et de lui ajouter l'annotation *@Component*. Cette annotation peut être complétée par plusieurs paramètres. Par exemple: +La première étape pour développer notre pokédex consiste à proposer au dresseur de rechercher un pokémon via son numéro. Nous allons donc créer un composant Angular qui va contenir et gérer cette interface. Pour créer un composant, il suffit de créer une classe et de lui ajouter l'annotation *@Component*. Cette annotation peut être complétée par plusieurs paramètres. Par exemple: - **selector** permet de définir le nom de l'élément html qui sera remplacé par notre composant - **templateUrl** permet de spécifier le fichier html qui servira de vue au composant @@ -86,7 +99,7 @@ Vous constaterez que ng-cli génère automatiquement une structure pour vous ave Créer un composant avec un élément *<input>* afin de récupérer l'id recherché. Ajouter votre composant à la liste des directives et au template du composant *my-component*. -Charger ce composant en ahjoutant le selector de ce composant dans le template du composant *app.component.html* +Charger ce composant en ajoutant le selector de ce composant dans le template du composant *app.component.html* ```html @@ -94,8 +107,6 @@ Charger ce composant en ahjoutant le selector de ce composant dans le template d Vous constaterez que la page web contient maintenant le code html résultat du composant *my-component* à l'intérieur du composant *app.component*. - - Nous allons maintenant utiliser le data-binding d'Angular pour lier l'élément *<input>* à un attribut de notre composant. En quelque sorte, nous allons lier la vue à notre modèle. @@ -136,7 +147,7 @@ Il faut aussi aussi ajouter l'attribut dans la classe métier du composant. Dan Créer un attribut id et lier le à l'élément *<input>* précédemment créé. Pour tester le lien entre l'attribut et l'élément HTML, nous allons utiliser une autre syntaxe utilisant -aussi le méchanisme de data-binding : *{{myAttribute}}*. Cette syntaxe permet d'afficher la valeur d'un +aussi le mécanisme de data-binding : *{{myAttribute}}*. Cette syntaxe permet d'afficher la valeur d'un attribut du composant sur la page. @@ -151,7 +162,7 @@ Créer un deuxième champs input en mode readonly et lié les deux par un id. A ### Q3bis : -comprendre pourquoi il devient difficile de faire une attaque XSS sur une application angular +Expliquer pourquoi il devient difficile de faire une attaque XSS sur une application angular [lien](https://ripcordsystems.com/2019/03/09/angular-how-to-prevent-xss-attacks-code-examples/) @@ -159,8 +170,8 @@ comprendre pourquoi il devient difficile de faire une attaque XSS sur une applic ## Recherche dans une liste -Malheureusement, seul le professeur Chen connaît précisément le numéro de tous les pokémons. Pour -aider les jeunes dresseurs à utiliser le pokédex, nous allons offrir la liste des pokémons ainsi qu'un +Malheureusement, seul le professeur Chen connaît précisément le numéro de tous les pokemon. Pour +aider les jeunes dresseurs à utiliser le pokédex, nous allons offrir la liste des pokemon ainsi qu'un champ de recherche pour filtrer cette liste. ### Q4 : @@ -173,12 +184,12 @@ ng g class pokemon ``` ### Q5 : -Créer une liste fictive (4-5 éléments suffiront) de pokémons dans le composant précédemment +Créer une liste fictive (4-5 éléments suffiront) de pokemon dans le composant précédemment créé. ### Q6 : -Afficher la liste des pokémons dans [https://angular.io/guide/template-syntax#ngforof](https://angular.io/guide/template-syntax#ngforof) +Afficher la liste des pokemon dans [https://angular.io/guide/template-syntax#ngforof](https://angular.io/guide/template-syntax#ngforof) une balise *<select>* en utilisant \*ngFor ### Q7 : @@ -188,7 +199,7 @@ Récupérer le choix du dresseur en liant la balise *<select>* au modèle ave ### Q8 : -Comme la liste des pokémons peut être très longue, nous allons proposer au dresseur de filtrer la liste. +Comme la liste des pokemon peut être très longue, nous allons proposer au dresseur de filtrer la liste. Ajouter un champ de texte et récupérer sa valeur dans un attribut. Nous allons devoir créer un filtre à l'aide d'un *pipe* Angular. @@ -203,10 +214,13 @@ dans la classe généré pour le pipe, vous verrez ce filtre prend deux paramètres : le nom de l’attribut à filtrer et la valeur à rechercher. La fonction transforme ressemblera à cela. ```ts - transform(value: any[], property?: string, searchString?: string): any { - if (typeof value !== 'undefined') { - return value.filter((e) => { - return e[property].toLowerCase().indexOf(searchString.toLowerCase()) !== -1; + transform(pokes: any[], property?: string, searchString?: string): any { + if(typeof searchString == 'undefined'){ + return pokes; + } + else if (typeof pokes !== 'undefined' && typeof property !== 'undefined') { + return pokes.filter((poke) => { + return poke[property].toLowerCase().indexOf(searchString.toLowerCase()) !== -1; }); } else { return []; @@ -224,33 +238,14 @@ Pour valider le choix du dresseur, nous allons ajouter un bouton « Go ! » dont ```html (eventName)="codeToExecute()" ``` - - - Ajouter un *<button>* à la page et lier l'évènement click à une méthode du contrôleur. Pour le -moment la méthode se contentra d'afficher l'id ou le nom du pokémon recherché dans la console. - - -## Intégration de composants existants - - -### Q9 bis: - - -Intégration de composants material UI. - -En suivant ce [guide](https://material.angular.io/guide/getting-started), intgréer un composant angular à votre application. -Regardez le nombre de module util à la comilation et le nombre de dépendances utilisés. (Dans votre node_module) - +moment la méthode se contentera d'afficher l'id ou le nom du pokemon recherché dans la console. ## Accès à une API - - - -Le site [http://pokeapi.co/](http://pokeapi.co/) propose une API contenant de nombreuses informations sur les pokémons. En -particulier, l'API offre la liste des pokémons (api/v2/pokedex/1) ainsi que des informations détaillées +Le site [http://pokeapi.co/](http://pokeapi.co/) propose une API contenant de nombreuses informations sur les pokemon. En +particulier, l'API offre la liste des pokemon (api/v2/pokedex/1) ainsi que des informations détaillées pour chacun d'entre eux (api/v2/pokemon/54 ou api/v2/pokemon/psyduck). Nous allons utiliser cette API comme source d'information pour notre pokédex. @@ -272,11 +267,11 @@ spécifier à Angular que votre service comporte une dépendance vers un autre s ### Q11 : -Créer une méthode pour récupérer la liste des pokémons en utilisant le service *http*. +Créer une méthode pour récupérer la liste des pokemon en utilisant le service *http*. ### Q12 : -Utiliser ce service dans le composant de recherche de pokémons pour remplacer la liste fictive de +Utiliser ce service dans le composant de recherche de pokemon pour remplacer la liste fictive de pokémons. Pour cela, ajouter le paramètre providers au module AppModule comme ceci : ```ts @@ -300,8 +295,6 @@ mécanismes de data-binding vus jusqu'ici pour afficher l'id, le nom et les stat ## Communication entre contrôleurs - - À présent, nous avons deux parties à notre application. La première permet de rechercher un pokémon grâce à son numéro ou son nom. La deuxième récupère et affiche les informations d'un pokémon. Il ne reste plus qu'à relier ces deux parties pour finaliser notre pokédex. Pour faire communiquer nos deux @@ -324,3 +317,19 @@ attributs, nous allons utiliser la notion d'observable. Créer un observable dans le service précédemment créé. Le composant d'affichage d'informations d'un pokémon peut maintenant souscrire à cet observable pour détecter le changement de pokémon. + + +## Intégration de composants open source + +### Q17: +La richesse d'Angular réside également dans son écosystème de librairies de composants réutilisables et open source. + +* Vous allez maintenant intégrer un composant Angular issue d'une librairie open source dans votre application. + + Dans le cadre de ce tp je vous recommande d'utiliser [primeng](https://primefaces.org/primeng/showcase/#/setup) + ou [Angular Material](https://material.angular.io/guide/getting-started). + + Vous trouverez également d'autres librairies de composants intéressentes sur la page [Angular Dev Resources](https://angular.io/resources?category=development) du site d'Angular. + + +* Regardez le nombre de module utile à la compilation et le nombre de dépendances utilisés. (Dans votre node_module)