Logo Angular

Formation Angular

Angular est un framework de développement de front-end open source qui permet de créer des applications web dynamiques et modernes. Il a été développé par Google et est basé sur le langage de programmation JavaScript. Angular utilise un modèle de programmation orienté composant, qui permet de structurer votre code de manière modulaire et réutilisable. Il offre également une série de fonctionnalités avancées telles que la gestion des données en temps réel, la gestion de l'état de l'application et le routage de pages. En utilisant Angular, vous pouvez créer des applications web complexes et interactives rapidement et de manière efficace. Il est utilisé par de nombreuses entreprises et organisations à travers le monde pour développer des applications web professionnelles.

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 26/12/2022