Être rappelé(e)

Formation Angular

Apprenez à développer des applications web performantes avec Angular. Le framework front-end de Google n'aura plus de secret pour vous.

  • Utilisez votre CPF
  • Eligible OPCO
  • Eligible Pôle Emploi
  • Objectifs Notre formation est conçue sur des cas pratiques pour vous permettre de maîtriser le framework Angular dans un contexte professionnel. * Savoir créer une application web avec la version 18/19 du framework Angular * Développer et tester complètement une application * Appliquer les bonnes pratiques de développement * Maîtriser les concepts et les outils du framework * Déployer votre application Angular
  • Public Développeur, chef de projet, agence web ou webmaster
  • Niveaux requis Maîtriser HTML/CSS, connaître Javascript
  • Durée 4 jours

Programme

Rappels sur javascript ES6/7 et orienté objet

  • Les class et l'instanciation d'objets
  • L'accessibilité des membres, l'encapsulation et les accesseurs, l'héritage
  • Savoir créer un modèle de données via les class
  • Les principales implémentations ES6/7 (Arrow functions, Spread operator, Paramètres rest, Template strings, Import et Export)

Typescript

  • Qu'est-ce que Typescript ?
  • Utiliser les types natifs
  • Créer vos modèles de données avec les interfaces
  • Interface ou class pour typer vos donnnées ?

Components, data-binding, template, directives et events

  • Le component racine, déclaration et structure - définition du décorateur de class
  • data-binding, property-binding et change detection, comment ça marche ?
  • A l'abordage du template HTML et des syntaxes
  • Gérer les événements utilisateur
  • Les directives de structure *ngIf et *ngFor
  • Les directives ngClass et ngStyle
  • Le cycle de vie d'un component
  • Travaux pratiques : créer un component enfant, afficher des données, gérer des évènements et utiliser les directives de structure

Les pipes

  • Qu'est-ce qu'un pipe et comment il fonctionne ?
  • Travaux pratiques : utilisation des pipes natifs Angular
  • Travaux pratiques : création d'un Custom pipe

Les services

  • Pourquoi et quand utiliser les services ?
  • Comment utiliser un service dans un component grâce à l'injection de dépendance ?
  • Travaux pratiques : partager l'accès aux données entre les components
  • Travaux pratiques : partager des fonctionnalités entre les components
  • Notion de gestion d'état dans une application front-end

Pratique : création d'une application web

  • Créer un nouveau projet et ajouter Bootstrap (les 3 méthodes)
  • Scaffolder une application en components et en services via le CLI Angular
  • Communiquer de l'information entre les components avec @Input et @Output
  • Communiquer de l'information entre les components avec un Service
  • Utiliser HttpClient pour Faire des requêtes de type GET/POST/PUT/DELETE
  • Mise en place du routing avec la class Router

Gestion des formulaires

  • FormControl et FormGroup
  • TDF versus DDF : Template Driven Form et Data Driven Form
  • Validation et gestion d'erreur personnalisée
  • Gestion de l'envoi des données du formulaire
  • Travaux Pratiques : ajout d'un formulaire dans l'application

Notions avancées : state, performance et conception modulaire

  • Qu'est-ce que le state d'une application et pourquoi le gérer ?
  • Mettre en place une stratégie de gestion du state
  • Travaux pratiques : gérer simplement le state de l'application avec RxJS et les services
  • Les autres solution existantes pour gérer l'état de l'application
  • Conception modulaire d'une application, pourquoi ?
  • Le lazy-loading versus le eager-loading
  • Travaux pratiques : créer un nouveau module et mettre en place du lazy-loading

Bonnes pratiques, déploiement, rappels généraux et QCM

  • Rappels sur les étapes de développement de la création au déploiement
  • Compiler une application Angular pour la production et la déployer
  • Rappels des bonnes pratiques
  • QCM online
  • Session questions/réponses avec le formateur
Et obtenez votre certification !

Ils me font confiance