Logo Angular

Formation Angular

Angular est le successeur d’AngularJS, le framework front-end repris et maintenu par Google. Angular architecture ses applications autour du concept de composant, permettant une meilleure réutilisation de code qu’auparavant. Cette version couvre Angular 13 et ses nouveautés, mais également les nouveautés apparues dans Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 et Angular 12.

Objectifs pédagogiques / Compétences visées

  • Appréhender les technologies utilisées par Angular
  • Créer des composants d'UI
  • Construire une Single Page Application (SPA)
  • Communiquer avec le serveur
  • Connaître des bonnes pratiques du framework

Pré-requis

  • HTML/CSS
  • JavaScript ou TypeScript

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Les IDEs JavaScript

  • Visual Studio Code
  • WebStorm
  • EditorConfig

Une réintroduction à JavaScript

  • Closures
  • Fonctions Constructeurs et Prototype
  • ES6, ES7, ES8, ES9, ES10, ES11, ESNext

JavaScript Asynchrone

  • Callbacks et Boucle d’événements
  • Utilisation de this dans un contexte asynchrone
  • Callback Hell, Promise, async/await
  • Observable avec RxJS
  • Intercepter les callbacks Asynchrone avec zone.js

TypeScript

  • Un surensemble de ECMAScript
  • Typage statique
  • Interfaces
  • Comportements différents d’ECMAScript
  • Décorateurs

Jour 2

Outillage d’un projet Angular

  • webpack
  • Live Server et Hot Reloading
  • ESLint et TSLint
  • Angular CLI

Introduction à Angular

  • Architecture créée via Angular CLI
  • NgModules
  • Components et Metadata
  • Templates et Data binding
  • Directives et Pipes
  • Services et Injection de Dépendance

Anatomie d’un template

  • Property binding : bind et []
  • Interpolation {{}}
  • Event binding : on et ()
  • Two way data binding : bindon et [()]
  • ngClass, ngStyle, ngModel
  • *ngIf, *ngFor, *ngSwitch
  • Références vers Element, Directives et Composants

Anatomie d’un composant

  • @Component vs Web Component
  • Communication parent/enfant avec @Input et @Output
  • Cycle de vie et Hooks
  • Détection de changement

Jour 3

Modules

  • NgModules vs. Modules JavaScript
  • Imports, Exports, Declarations et Providers
  • Features Modules
  • CoreModule et SharedModule

Routeur

  • Configuration des Routes
  • Routes avec Paramètres
  • Routes enfants et router-outlet imbriqués
  • Sécuriser l’accès avec les Guards
  • Resolver
  • Lazy-loaded modules

Services

  • Injection de dépendances
  • Providers, useClass, useFactory, useValue et useExisting
  • Services globaux et isolés
  • Hierarchie des services

Http

  • Récupérer des données JSON
  • Gestion des erreurs
  • Données non-JSON
  • Intercepter les requêtes et réponses
  • Annuler une requête

Jour 4

Formulaires

  • Formulaires Réactifs vs Template Driven
  • Rendu de formulaires
  • Validation

Tests Automatisés

  • Test Unitaires avec Jasmine et Karma
  • Modules de Tests et Mocks
  • HttpClientTestingModule
  • Protractor et les tests End-to-End

Aller plus loin

  • Création de directives et Pipes
  • Réutilisation de composants entre projets
  • Angular Animations
  • Migrations entres les version d’Angular
  • Platform-server : Server Side Rendering
  • Sécurité
  • Internationalisation / i18n

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 05/11/2021