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 9 et ses nouveautés, mais également les nouveautés apparues dans Angular 2, Angular 4, Angular 5, Angular 6, Angular 7 et Angular 8.

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 06/03/2020