Organisme de Formation aux technologies et métiers de L'informatique
angular

Formation Angular 2+ - Développement d'applications web

Développer des applications web performantes à partir de JavaScript, en utilisant les nouveautés du framework de référence Angular

Informations générales

APW254
3 jours (21h)
2 050 €HT

Objectifs

Après ce cours, vous serez capable de :

  • Maîtriser les fondamentaux du Framework Angular et ses nouveautés
  • Organiser, modulariser et tester ses développements JavaScript
  • Développer plus rapidement et tester des applications web Angular 2 avec JavaScript et TypeScript
  • Identifier les bonnes pratiques de développement et de mise en production
  • Utiliser les spécifications EcmaScript 6 (ES6)
  • Intégrer les tests unitaires au développement

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Architectes
  • Développeurs
  • Chefs de projets…

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • Disposer de connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript

Programme de la formation

Selon les spécialistes qui se sont sérieusement penchés sur la nouvelle version du framework créé par Google, Angular 2+ n'a de commun avec son prédécesseur que son seul nom tant les évolutions qu'il porte sont nombreuses. Et toutes visent à atteindre un seul et unique objectif : développer plus rapidement des applications web de meilleure qualité ! C'est notamment l'un des apport du recours à TypeScript, le langage de programmation libre et open-source développé par Microsoft. A l'issue de ces 3 journées de formation, les participants seront à même de développer des applications web plus performantes avec Angular 2+.

Introduction

  • Outils et IDE
  • Packaging, npm
  • Webpack
  • Installation node.js / npm
  • Installation angular-cli

TypeScript et ES6

  • Installation TypeScript
  • Transpiler EcmaScript
  • Let, variables locales et constantes
  • Typage et types natifs
  • Paramètres optionnels, valeurs par défaut
  • Classes et interfaces
  • Gestion des modules
  • Arrow functions

Le framework Angular

  • Contexte
  • Présentation générale
  • Description de l'architecture du framework (MVC, workspaces, configurations, ...)
  • Présentation des composantes du framework (modules, composants, directives, services, ...)
  • La philosophie « composant »
  • Commandes du angular-cli
  • L'extension du navigateur Angular DevTools
  • Les types de NgModules
  • Métadonnées du NgModule
  • Contexte de compilation des modules
  • Import/Export de modules

Les composants et template

  • Métadonnées du composant (selecteur, template, styles, ...)
  • Déclarations dans un NgModule
  • ViewEncapsulation
  • Interpolation / expression
  • Property-Binding / Attribute-binding / Class-binding / Style-binding
  • Variables locales

Directives

  • Directives d'attributs (selecteur, ElementRef, HostListener, @Input)
  • Directives de structure (ngIf, ngFor, Symbole *)
  • ng-template

Evénements et cycle de vie

  • Syntaxe de l'event-binding
  • Types d'événement et handlers
  • Objet $event
  • Property-binding et @Input
  • EventEmitter et @Output
  • Two way data binding (opérateur banana in a box)
  • Cycle de vie d'un composant (ngOnInit, ngOnChanges, ngOnDestroy)

Pipes

  • Définition
  • Les pipes standards (lowercase, uppercase, currency, decimal, ...)
  • Le pipe key-value
  • Créer son propre pipe

Services

  • Définition
  • Création de service
  • Injection d'un service
  • Providers (+ providedIn) et injectors
  • Différence entre injecteur root et injecteur composant

Formulaires

  • Control et ControlGroup
  • Validations
  • Gestions d'erreurs
  • Gestion des modifications
  • Groupes de champs avec FormBuilder

Observables, RxJS et HttpClient

  • Observables
  • RxJS
  • HTTP providers
  • Requêtes
  • Transformation des données et observables
  • Options de requêtes

Routing

  • Concepts de routage
  • Router providers et config
  • Router directives
  • Méthodes de routage et paramètres

Pour aller plus loin...

  • Lazy-loading
  • Introduction aux tests
  • Introduction aux PWA
  • Création de librairie
  • Librairie de composant : Introduction à Angular-material
  • Gérer l'état : Introduction à ngrx
plus d'infos

Méthode pédagogique

Une pédagogie basée sur l'alternance de phases théoriques, d'ateliers de mise en pratique, de retours d'expériences et de séances d'échanges. A travers les TP proposés, les participants acquièrent une première expérience concrète du développement d'applications web sur Angular 2+. Des experts du framework qui partagent leurs trucs et astuces pour développer plus rapidement Angular 2+ correspond à toutes les versions successives d'Angular, soit de la version 2 à la version 10 a ce jour.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 08/04/2024