Formation Angular

Cette formation vous permettra de découvrir comment développer rapidement une application avec Angular avec les bonnes pratiques de structuration du code.

Objectifs pédagogiques

  • Savoir développer une application web Angular complète en appliquant les bonnes pratiques d'architecture.
  • Savoir initialiser un projet d'application mobile avec Ionic ou desktop avec Electron.
  • Être capable d'écrire en TypeScript.
  • Maîtriser le système de composants d'Angular (Modules, Composants, Services).
  • Comprendre les observables et maîtriser les opérateurs RxJS les plus courants.
  • Savoir mettre en place des tests unitaires.

Formation Angular en détail

Programme

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.

Jour 1

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.

Jour 2

1. 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.

2. 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.

3. 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.

Jour 3

1. 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

2. Internationalisation

  • Internationaliser votre application avec le composant ngx-translate.

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

3. Tester

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

TP : Nous écrirons quelques tests.

4. 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.

Public visé et pré-requis

Public

Développeurs.

Pré-requis

Cette formation est destinée à des développeurs ayant une expérience du développement d'applications web.

  • Maîtrise du html
  • Connaissance du langage JavaScript (les promesses, les événements, le dom)
  • Connaissances de base de l'architecture client serveur
  • Notions de REST, json

Personne en situation de handicap

Pour toutes questions relatives à l’accueil d’un participant présentant un handicap, merci de nous contacter préalablement avant toute inscription.

Prochaines sessions & tarifs

Formations Front end

Angular

Nantes Du 22 au 24 mai 2024

Durée : 3 jours soit 21 heures
Tarif : 1800 € ht par personne

Formations Front end

Angular

À distance (FOAD) Du 25 au 29 novembre 2024

Durée : 3 jours soit 21 heures
Tarif : 1800 € ht par personne

1 journée puis 4 demi-journées

Ingénierie pédagogique

Moyens pédagogiques et techniques

  • Les supports de cours (slides) seront disponibles en ligne et distribués en début de formation (à l'aide d'un lien vers notre outil interne ou d'une version numérisée), puis fournis au format électronique à la fin de la formation.
  • Une salle de formation équipée d'une connexion Internet, d'un vidéoprojecteur, paperboard…
  • Un ordinateur par stagiaire avec un système d'exploitation installé et les outils nécessaires.

Modalités de suivi de l'exécution du programme

  • Durant la formation : alternance d'apports théoriques, d’exercices pratiques et de mise en situation sous forme de travaux pratiques corrigés avec l’expert-formateur.
  • En fin de formation : évaluation à chaud sur l'atteinte des objectifs pédagogiques sous forme de tour de table et de test de connaissances, d'exercices, de QCM.

Moyens d'encadrement

Formation assurée par un expert Angular.

Témoignage