Rafiaa Jnaieh
2019
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
ANGULAR
Introduction
Angular est un framework Javascript côté client qui permet de réaliser des applications de type "Single Page
Application". Il est basé sur le concept de l'architecture MVC (Model View Controller) qui permet de séparer
les données, les vues et les différentes actions que l'on peut effectuer . il utilise le TypeScript plutôt que
JavaScript
Qu’est-ce que le TypeScript ? Pourquoi l’utiliser ?
C’est un sur-ensemble de JavaScript qui est justement transcompilé en JavaScript pour être compréhensible par
les navigateurs. Il ajoute des fonctionnalités extrêmement utiles :
•le typage strict
•les fonctions dites lambda ou arrow, permettant un code plus lisible
•les classes et interfaces
1- Préparez l'environnement de développement
Installez les outils
ANGULAR/ CLI “Command Line Interface” d’Angular est l’outil qui vous permet d’exécuter des scripts pour
la création, la structuration et la production d’une application Angular.
[Link]
NPM NPM est un package manager qui permet l’installation d’énormément d’outils et de libraries dont vous
aurez besoin pour tout type de développement
2- Créez votre premier projet
ng new mon-premier-projet
cd mon-premier-projet
ng serve –open
Découvrez la structure du code
Le dossier e2e est généré pour les tests end-to-end,
le dossier node_modules contient toutes les dépendances pour votre
application : les fichiers source Angular et TypeScript, par exemple.
Le dossier src où vous trouverez tous les fichiers sources pour votre
application.
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Créez un component
ng generate component mon-premier
il a mis à jour le fichier [Link]
3- Gérez des données dynamiques
String interpolation {{variable/méthode}}
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Property binding
Event binding
Two-way binding [(ngModel)]="variable"
Propriétés personnalisées @Input
il serait intéressant de faire en sorte que chaque
instance d' ComponentXX ait un nom différent
qu'on puisse régler depuis l'extérieur du code.
Pour ce faire, il faut utiliser le décorateur @Input
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
4- Structurez le document avec des Directives
Les directives structurelles *ngIf /*ngFor
*ngIf="condition"
*ngFor="let obj of myArray"
Les directives par attribut NgModel/ngStyle/ngClass
ngStyle
ngClass prend un objet clé-valeur, mais cette fois avec la classe à appliquer en clé, et la condition en
valeur
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
4- Modifiez les données en temps réel avec les Pipes
Les pipes prennent des données en input, les transforment, et puis affichent les données modifiées dans le DOM
Utilisez et paramétrez les Pipes
DatePipe
async
C’est un cas particulier mais extrêmement utile dans les applications Web, car il permet de gérer des données
asynchrones
Il faut ajouter AsyncPipe en début de chaîne pour dire à Angular d'attendre l'arrivée des données avant
d'exécuter les autres pipes :
5- Améliorez la structure du code avec les Services
ng generate service User
Injection et instances
un service doit être injecté, et le niveau choisi pour l'injection est très important. Il y a trois niveaux possibles
pour cette injection :
•dans AppModule: ainsi, la même instance du service sera utilisée par tous les components de
l'application et par les autres services ;
•dans AppComponent : comme ci-dessus, tous les components auront accès à la même instance du
service mais non les autres services ;
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
•dans un autre component : le component lui-même et tous ses enfants
(c'est-à-dire tous les components qu'il englobe) auront accès à la même
instance du service, mais le reste de l'application n'y aura pas accès.
- injecter ce service dans XXModule en l'ajoutant à l'array providers
- déclarer comme argument dans le constructeur de XXComponent
6- Gérez la navigation avec le Routing
Créez des routes
déclare les routes dans XXModule
dire à Angular où vous souhaitez afficher les components dans
le template lorsque l'utilisateur navigue vers la route en
question. On utilise la balise <router-outlet></router-outlet>
Naviguez avec les routerLink
routerLink
Naviguez avec le Router
[Link]
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Paramètres de routes path/:id
créer la route dans AppModule
injecter ActivatedRoute dans SingleAppareilComponent, importé depuis @angular/router, afin de
récupérer le fragment id de l'URL
Rq :il ne faut pas oublier d'utiliser + avant id dans l'appel pour caster la variable comme nombre.
service
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Redirection redirectTo
Guards
C’est un service qu'Angular exécutera au moment où l'utilisateur essaye de naviguer vers la route sélectionnée.
Ce service implémente l'interface canActivate et donc doit contenir une méthode du même nom qui prend les
arguments ActivatedRouteSnapshot et RouterStateSnapshot
Sauvegardez ce fichier dans le dossier sous le nom [Link]
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Dans la méthode canActivate , vérifier l'état de l'authentification dans AuthService. Si l'utilisateur est
authentifié, la méthode renverra true, permettant l'accès à la route protégée. Sinon, retourner false, ou rediriger
l'utilisateur vers la page d'authentification
Maintenant, si vous essayez d'accéder à /appareils sans être authentifié, vous êtes automatiquement redirigé vers
/auth.
7- Observez les données avec RxJS
Observables
un Observable est un objet qui émet des informations auxquelles on souhaite réagir.
À cet Observable, on associe un Observer — un bloc de code qui sera exécuté à chaque fois que l'Observable
émet une information. L'Observable émet trois types d'information : des données, une erreur, ou un message
complete.
On a un Observable, il faut l'observer ! Pour cela, on utilisera la fonction Subscribe()
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Subscriptions
quand vous utilisez des Observables personnalisés, il est vivement conseillé de stocker la souscription dans un
objet Subscription
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Subjects
l'utilisation d'un Subject pour gérer la MAJ des appareils
permettra de mettre en place un niveau d'abstraction afin d'éviter
des bugs potentiels avec la manipulation de données.
Pourquoi est-ce important ?
Si les données sont mises à jour par une autre partie de l'application, il faut que l'utilisateur voie ce changement
sans avoir à recharger la page. Il va de même dans l'autre sens : un changement au niveau du view doit pouvoir
être reflété par le reste de l'application sans rechargement.
Opérateurs
Un opérateur est une fonction qui se place entre l'Observable et l'Observer (la Subscription, par exemple), et qui
peut filtrer et/ou modifier les données reçues avant même qu'elles n'arrivent à la Subscription.
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
8- les Forms - méthode template
importer FormsModule dans AppModule
Créez le formulaire
ngModel sans parenthèses ni crochets. Pour signaler à Angular que vous souhaitez enregistrer ce contrôle
(ngSubmit) , vous recevez cette soumission et exécutez la méthode onSubmit
#f est une référence locale. Vous donnez simplement un nom à l'objet sur lequel vous ajoutez cet attribut .
En générale, on ne donne pas de valeur à une référence locale : on écrit simplement #f ou #my-app
Validez les données
Exploitez les données
Construisez un formulaire réactif avec FormBuilder
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Ajoutez dynamiquement des FormControl
Un FormArray est un array de plusieurs FormControl , et permet, par exemple, d'ajouter des nouveaux
controls à un formulaire. Vous allez utiliser cette méthode pour permettre à l'utilisateur d'ajouter ses hobbies.
Modifiez ensuite onSubmitForm() pour récupérer les valeurs, si elles existent (sinon, retournez un array vide)
:
Rafiaa Jnaieh – Rafiaajnaieh@[Link]
Afin d'avoir accès aux controls à l'intérieur de l'array, pour des raisons de typage strict liées à TypeScript, il
faut créer une méthode qui retourne hobbies par la méthode get() sous forme de
FormArray ( FormArray s'importe depuis @angular/forms ) :
Rafiaa Jnaieh – Rafiaajnaieh@[Link]