Skip to content

Update #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RomainLefeuvre wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1dfd13
Update
LefeuvreRomain Dec 8, 2021
39d509e
Merge branch 'barais:master' into master
RomainLefeuvre Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 56 additions & 47 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).


Expand All @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -86,16 +99,14 @@ 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
<app-my-component></app-my-component>
```

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 *&lt;input>* à un attribut de
notre composant. En quelque sorte, nous allons lier la vue à notre modèle.

Expand Down Expand Up @@ -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 *&lt;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.


Expand All @@ -151,16 +162,16 @@ 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://vitalflux.com/angular-prevent-xss-attacks-code-examples/)


## 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 :
Expand All @@ -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 *&lt;select>* en utilisant \*ngFor

### Q7 :
Expand All @@ -188,7 +199,7 @@ Récupérer le choix du dresseur en liant la balise *&lt;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.
Expand All @@ -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 [];
Expand All @@ -224,33 +238,14 @@ Pour valider le choix du dresseur, nous allons ajouter un bouton « Go ! » dont
```html
(eventName)="codeToExecute()"
```



Ajouter un *&lt;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.

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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)