Formation Angular

Dans cette formation nous développerons une application web complète et nous verrons également comment utiliser Angular pour le développement d'une application mobile avec Ionic ainsi qu'une application desktop avec Electron.

À l'issue de cette formation, vous n'aurez plus peur d'utiliser TypeScript - nous espérons même que vous envisagerez de l'utiliser sur vos projets non-Angular !

Vous comprendrez la notion d'Observable, et vous aurez les notions nécessaires de RxJS pour pouvoir développer vos premières applications en toute autonomie.

Bref, vous aurez tout ce qu'il faut pour profiter de la puissance d'Angular pour développer rapidement vos premières applications réactives et performantes, en sachant éviter les principales erreurs des débutants.

Toutes les étapes de la formation se feront sur le support d'un projet "fil rouge", dont l'objet pourra être proposé par les stagiaires ou, à défaut, par le formateur.

 

1. Introduction : les principaux concepts d'un projet Angular

 

• Aperçu historique d'Angular.
• Modules.
• Composants et templates.
• Services.

2. Premier TP

• Créer un projet avec l'angular-cli.
• Premier écran.
• Écrire ses premières ligne de code TypeScript.
• Dynamiser un écran grâce au data binding.
• Compiler un projet pour la production.

3. Organiser ses composants

• Écrire ses premiers composants.
• Entrées et sorties des composants (Input, Output).
• Cycle de vie des composants (ngOnInit, ngOnDestroy, ngOnChanges).
• Initiation aux animations Angular.

TP: nous enrichirons notre écran avec de multiples composants dynamiques

4. Les templates

• ngIf
• ngFor
• Les pipes (date, number, currency…).
• L'opérateur ?
• [ngStyle] et [ngClass].

TP: un composant affichant une liste avec un mini moteur de recherche, un style différent une ligne sur deux…

5. Un peu plus de TypeScript

• Typer un attribut, une méthode, un paramètre.
• Utiliser les interfaces.
• Échange autour de l'intérêt de TypeScript.
• Quelques options de configuration.

TP : nous allons décrire notre modèle de données avec des interfaces, et nous allons mettre des informations de typage sur tout le code que nous avons écrit.

 

6. La programmation réactive avec RxJS

• Les enjeux de la programmation réactive.
• Comprendre les Observables et les Souscriptions (différence avec les promesses).
• Utiliser BehaviorSubject.
• Les opérateurs : map, tap, mergeMap.
• timer, forkJoin, combineLatest.
• Les EventEmitter.
• Le pipe Async (| async).
• Les bonnes (et mauvaises) pratiques.
• Un point sur la mutabilité en JavaScript.
• Initiation à la généricité TypeScript (écriture Observable<T>).

TP : Nous allons faire une navigation à facettes dynamique, avec au moins deux critères de recherche.

7. Gestion des routes

• Écrire une application multi page avec le routeur.
• Le routeur Angular : un routeur "événementiel".
• Récupérer les paramètres d'une route, les queryParam.
• Gérer la navigation (liens, "redirections", historique…).

TP : Nous allons mettre en place un menu sur notre application. Notre navigation à facettes va mettre à jour l'url.

8. Gérer des formulaires

• Écrire et traiter un formulaire avec les Template-Driven Forms.
• Aperçu des autres systèmes de formulaires.

TP : Nous allons mettre en place un formulaire de création / modification de données.

9. Communiquer avec un serveur

• Utiliser la librairie de requête HTTP.
• Exemple : s'authentifier.
• Écrire un service "spécifique au domaine" d'accès aux données.

TP : Nos formulaires vont communiquer avec un backend via http / rest

10. Internationalisation

• Internationaliser votre application avec le composant ngx-translate.

TP : l'interface de notre appli sera bilingue français / anglais

11. Tester

• Écrire et lancer les tests.
• Mocker les appels http.

TP : Nous écrirons quelques tests.

12. Utiliser Angular en dehors du web

• Initialiser un projet desktop avec Electron.
• Initialiser un projet mobile avec Ionic.

TP : Nous créerons une application Electron minimale et nous la lancerons sur le desktop (linux, windows ou mac).

Nous créerons une application mobile minimale que l'on lancera dans un navigateur et sur un téléphone Android de développement. Nous présenterons quelques spécificités de développement liées à chaque plateforme.