Points forts

Réutilisez dans vos projets le code vu en formation

Réutilisez dans vos projets le code vu en formation

Pourquoi coder une todo list bidon ? Apprenez plutôt à coder les grandes fonctionnalités qu'on retrouve dans toute application professionnelle, en créant un clone de YouTube.com étape par étape, jusqu'à la mise en production finale. On ne vous enseignera pas tout Angular, mais vous maîtriserez 80% des fonctionnalités dont vous aurez besoin dans tous vos projets.

Oubliez les slides PowerPoint, ouvrez plutôt votre éditeur de code

Vous aurez juste ce qu'il faut de cours magistral pour vous faire un cadre de référence et comprendre les concepts fondamentaux. Les matinées sont consacrées aux explications du formateur et aux "exercices" sous forme de quizs et de courts challenges de code. Les après-midi sont entièrement dédiés à la pratique : le développement d'un clone de YouTube avec Angular.

Oubliez les slides PowerPoint, ouvrez plutôt votre éditeur de code
Are you readyyyyy? Begin!!

Are you readyyyyy? Begin!!

Participez à des quizs collectifs en mode "jeu télévisé", brainstormez avec vos camarades sur les meilleurs choix d'implémentation, affrontez-vous dans des challenges de code express. Le côté ludique combiné à un chouia de compétition bienveillante renforce votre apprentissage tout en vous gardant engagé.

Apprenez à votre rythme

Les travaux pratiques de la formation se font en autonomie. Passez plus de temps sur un point délicat. Zappez ce que vous maîtrisez déjà. Sollicitez le formateur pour qu'il vous ré-explique une notion, rien qu'à vous. Le formateur est là pour vous guider, à votre rythme, pas pour vous imposer une cadence ou un programme.

Apprenez à votre rythme
Devenez un·e développeur·se autonome

Devenez un·e développeur·se autonome

"J'ai à peu près compris, mais dans un mois j'en aurai oublié les trois-quarts." — Pour éviter d'entendre ça, on développe votre autonomie dès la formation, car vous en aurez besoin après ! On vous donne des exercices dont la réponse est à chercher sur la doc officielle ou StackOverflow. On vous enseigne une méthode de conception Angular réutilisable dans vos propres projets. On crée une "boîte à outils" de techniques de code réutilisables.

Quelques clients pour lesquels Vincent a déjà animé des formations.

Logo Voyages SNCF
Logo Orange
Logo GFI Informatique
Logo Adictiz
Logo BNP Paribas
Logo Axiocode

Objectifs

La formation Angular Fondamentaux vise à permettre aux apprenant·e·s de :

  • Maîtriser les principales briques de la pile technique Angular : TypeScript, Angular CLI, et Visual Studio Code.
  • Maîtriser les principales briques du framework Angular, et notamment (mais pas exclusivement) les composants, les services, et les modules.
  • Coder dans les règles de l’art une application Angular complète, avec une partie “backoffice” et une partie “frontoffice”, une authentification utilisateur, et un backend accessible via une API REST.
  • Savoir tester son code et le déployer en production.
  • Acquérir une méthodologie de développement et des techniques réutilisables pour tous leurs projets Angular.

Programme

1. Mise en route et outillage

  • Présentation de la pile technique d’une application Angular type
  • Visual Studio Code : paramètres et extensions recommandés pour Angular ; 5 raccourcis clavier pour être ultra-productif
  • Angular CLI : installation et paramètres recommandés ; 10 commandes Angular CLI indispensable pour coder mieux et plus vite
  • Présentation des packages npm utilisés pendant la formation
  • Présentation de l’application “fil rouge”, un clone de YouTube.com

Remarque. Le langage TypeScript est expliqué au fil de la formation, à chaque fois qu’une nouvelle syntaxe est introduite.

2. Les 3 briques fondamentales : composant, service, module

Composant :

  • Définition et syntaxe d’un composant Angular
  • Vue d’ensemble des syntaxes de templates de composant : interpolation, binding de propriété, binding d’événement, conditions avec *ngIf, boucles avec *ngFor, et pipes
  • Communiquer entre deux composants grâce aux inputs / outputs

Service :

  • Définition et syntaxe d’un service Angular
  • Utiliser un service partout dans l’appli grâce à l’injection de dépendance
  • Utiliser un service pour stocker du code réutilisable
  • Utiliser un service pour partager des données dans l’application

Module (NgModule) :

  • Définition et syntaxe d’un module Angular (NgModule)
  • Utiliser les modules pour organiser son code de manière optimale
  • Créer un SharedModule pour stocker des composants réutilisables
  • Créer un CoreModule pour stocker des services singleton

3. Formulaires Angular

  • Différences entre un formulaire Angular et un formulaire HTML classique
  • Vue d’ensemble des syntaxes permettant d’ “Angulariser” un formulaire (syntaxes dites “réactives”)
  • Ajouter des règles de validation à un formulaire (champ obligatoire, longueur mini ou maxi, format imposé…)
  • Afficher les erreurs de validation à l’utilisateur, soit en temps réel, soit à la soumission
  • Créer un formulaire pour éditer les données d’une base de données
  • Gérer la sérialisation et désérialisation des données lorsqu’elles passent du formulaire au backend ou du backend au formulaire
  • Traiter les données à la soumission du formulaire et rediriger l’utilisateur sur un écran spécifique

4. Requêtes HTTP et Observables

  • Récupérer et enregistrer des données sur un serveur avec le HttpClient et une API REST
  • Techniques pour éviter les erreurs Angular lorsque les données du serveur ne sont pas disponibles tout de suite
  • Gérer les erreurs de requêtes HTTP les plus fréquentes (timeout, retry, affichage d’un message user-friendly…)
  • Comprendre enfin ce qu’est un Observable, avec quelle syntaxe il s’utilise, et ce que signifie l’aspect “asynchrone”
  • Les 5 opérateurs RxJS dont vous ne pouvez pas vous passer dans un projet Angular (RxJS est le nom de la librairie des observables)

5. Routeur

  • Créer les différentes “pages” de son application grâce au routeur
  • Créer des routes imbriquées
  • Créer des routes protégées
  • Récupérer un paramètre d’URL (par ex, un identifiant de base de données) pour déterminer quelles données afficher dans la page

6. Authentification

  • Vue d’ensemble des solutions serveur pour gérer l’authentification (solution maison, Google SignIn, Auth0…)
  • Créer une page accessible uniquement aux utilisateurs authentifiés
  • Créer une partie “back-office” accessible uniquement aux utilisateurs “admin”
  • Masquer certains éléments d’interface en fonction du rôle de l’utilisateur
  • Envoyer des requêtes HTTP authentifiées au serveur

7. Tests unitaires et Déploiement

Tests unitaires :

  • Karma et Jasmine
  • Tester avec le support d’Angular
  • Tester un service Angular
  • Tester un composant Angular
  • Tester un composant Angular qui utilise un service asynchrone

Déploiement :

  • Vue d’ensemble des techniques de déploiement
  • Configuration serveur pour héberger une appli Angular
  • Optimisations pour le passage en prod

Sessions et tarifs

Prochaines sessions

Tarifs

Vous inscrivezTarif unitaire
1 à 2 apprenant·e·s1 400 € HT
3 à 5 apprenant·e·s1 260 € HT
6+ apprenant·e·s1 120 € HT
Tarif fidélité1 190 € HT

Formation intra-entreprise ou sur mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux, décrivez-nous votre besoin en détail.

Demander un devis formation intra / sur mesure

Public visé et prérequis

La formation Angular Fondamentaux s’adresse principalement aux développeurs web front amenés à développer des applications web professionnelles.

Une connaissance décente de JavaScript est nécessaire, même si les aspects avancés sont expliqués aux moments adéquats ; tout développeur web front utilisant déjà quotidiennement JavaScript, idéalement au-delà d’un usage principalement basé jQuery, a normalement les connaissances nécessaires.

Ceci étant dit, il peut être utile de « préparer le terrain » en amont pour fluidifier l’acquisition de connaissances une fois en formation. Une ressource recommandée pour cela est le guide JavaScript de MDN : https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide.

Pour le reste, une connaissance « standard » de la couche client est évidemment attendue : HTML et CSS, donc. Pas besoin d’être super calé·e en HTML5 ou CSS3 : même si on s’en servira, ce n’est pas le cœur du sujet et la formation n’a donc pas de prérequis particuliers dans ces domaines. Il n’est pas non plus nécessaire de connaître TypeScript.

Pour le backend, l’API REST de l’application développée en formation sera générée grâce à l’excellente librairie JSON Server (https://github.com/typicode/json-server). L’exploration de la couche serveur / API sort du périmètre de cette formation, et il vous appartiendra de décider quelle solution vous retenez (parmi la myriade d’options disponibles) pour gérer les données de votre projet.

Livrables

Les apprenant·e·s reçoivent dès la validation de leur inscription une liste de ressources recommandées sur Angular, qu’ils peuvent commencer à explorer à leur rythme.

En début de session, ils reçoivent l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.

Après la session, ils reçoivent une archive de référence, contenant les codebases finalisées, entièrement documentées, les slides de toute la formation et diverses ressources complémentaires.

Aspects logistiques

La formation se déroule dans une salle privative climatisée, lumineuse, fonctionnelle et confortable. Les locaux sont facilement accessibles en transports en commun.

Situé à Paris, près de Châtelet, ils sont accessibles via pas moins de 5 lignes de métro et 2 lignes de RER :

MyCowork Beaubourg
5 Rue du Cloître Saint-Merri
75004 Paris

» Voir sur Google Maps

M° Châtelet (L1, L4, L7, L11, L14)

M° Rambuteau (L11)

RER Châtelet-les-Halles (RER A ou RER B)

On trouve également plusieurs parkings alentour, par exemple le Parking Georges Pompidou.

  • Chaque apprenant·e amène son propre poste de travail ou ordinateur portable.
  • L’accès internet est assuré par une connexion haut débit. La salle fournit un accès Wi-Fi par défaut. Veuillez nous prévenir en avance s’il vous faut un accès Ethernet filaire.
  • Vous n’êtes pas en région parisienne et cherchez un hébergement ? Pourquoi ne pas passer par Airbnb ? Ça existe même pour les entreprises.
  • Les formations vont de 3 à 10 apprenant·e·s.

Les horaires indicatifs de la formation, pour un total de 7 heures par jour soit 21h de formation, sont :

  • 9h15 Accueil, petit déjeuner (boissons chaudes et fraîches, viennoiseries)
  • 9h30 Début de la journée
  • 12h30 Déjeuner
  • 13h45 Reprise
  • 16h15 Pause café
  • 16h30 Reprise
  • 18h Fin de la journée

Vous pourrez retrouver toutes les informations sur les modalités d’inscription et de paiement, l’annulation et le remboursement dans nos Conditions Générales de Vente, sans oublier notre règlement intérieur.


Nos locaux, pour nos formations inter-entreprises (cliquez pour agrandir) :

Photo MyCowork 1
 
Photo MyCowork 2
 
Photo MyCowork 3
 

Formateur

Vincent Caillierez

Vincent Caillierez

Vincent Caillierez réalise des sites web depuis 1997. D'abord développeur web sur des technos comme ASP puis PHP, il se lance assez rapidement dans la formation web.

En 2006, il crée DrupalFrance.com (revendu depuis), un site de ressources francophones sur le CMS Drupal. Dans ce cadre, Vincent conçoit un ensemble de formations sur Drupal qui lui ont donné l'opportunité de former des centaines de développeurs et webmasters.

Après avoir vécu quelques années à l'étranger, il revient à Paris en 2014, date à laquelle il met au point sa première formation Angular (qui portait à l'époque sur la version 1 du framework, AngularJS).

Depuis, Vincent a formé des dizaines de développeurs sur toutes les versions d'Angular. Il continue à améliorer la formation Angular Fondamentaux pour tenir compte des évolutions du framework mais aussi pour la rendre encore plus efficace pédagogiquement.

Vincent est le créateur d'AngularChef.com.