Formation Angular Fondamentaux

IMPORTANT. Cette formation porte au minimum sur Angular 5.2.7 du 28/02/2018.

Angular est une plateforme de développement permettant de créer des applications web et mobiles qui utilisent les derniers standards du web. Notre formation “Angular Fondamentaux” vous apprend tous les concepts essentiels d’Angular à travers le développement d’une application professionnelle de A à Z.

Tous les points importants sont abordés : l’environnement de développement, le langage TypeScript, les composants, les templates, les modules, le routing, les services, l’injection de dépendances, les formulaires, l’accès aux données via des requêtes HTTP, les tests, et les outils et librairies tierce-partie.

Quatre bonnes raisons de choisir AngularChef

Replay

Un point ne vous paraît pas clair ? Vous avez raté une explication ? Accédez à l'intégralité de la formation en replay : de courtes séquences vidéo reprennent tous les points abordés par le formateur. Regardez-les quand vous le souhaitez, à votre rythme.

Codez tout de A à Z

Codez une application complète, utilisant toutes les techniques présentées en formation. Partez d'un socle minimal, enrichissez-le au fil des TP truffés de fonctionnalités répandues et facilement réutilisables dans vos propres projets, et terminez en déployant le fruit de votre travail sur le web.

Toujours à jour

Les technologies présentées dans nos formations évoluent constamment, et nos supports de cours et exercices également. Nous sommes toujours en veille pour mettre à jour et améliorer nos contenus dès que de nouvelles versions sortent, ou que de nouvelles bonnes pratiques sont découvertes par la communauté.

Quizzes collectifs

En plus des séquences théoriques et des travaux pratiques, nos formations sont ponctuées de quizzes permettant d'évaluer vos connaissances préalables ou ce que vous avez retenu d'un concept. Ces quizzes se font collectivement en un temps limité, un peu comme dans un jeu TV. C'est ludique, stimulant, et cela permet de renforcer vos acquis.

À l’issue de la formation, vous saurez…

  • Créer des applications Angular professionnelles dans le respect des bonnes pratiques.
  • Utiliser toutes les “briques” du framework Angular à bon escient (composant, directive, service, module…), de manière efficace et sûre.
  • Traduire une fonctionnalité de votre projet en concepts Angular.
  • Tester et organiser votre code.
  • Tirer le meilleur parti de TypeScript et RxJS (observables).

En revanche, les points suivants ne seront PAS abordés :

  • Bases de JavaScript. Si c’est ce que vous cherchez, consultez notre formation TypeScript.
  • TypeScript avancé. (Seuls les points nécessaires à la bonne compréhension d’Angular sont abordés.)
  • Angular avancé. Si c’est ce que vous cherchez, consultez notre formation Angular avancé.
  • Création d’un backend (avec Node.js, par exemple).
  • Création d’une application mobile native. Notre formation vous permettra de créer un site ou une appli web responsive, mais pas une appli mobile native. C’est d’ailleurs impossible de créer une appli mobile native avec Angular seul ; il faut utiliser un framework dédié en plus d’Angular, comme Ionic ou NativeScript.

Public & Pré-requis

Cette formation s’adresse aux développeurs et intégrateurs web.

Pour la suivre, vous DEVEZ CONNAÎTRE JavaScript (bonnes connaissances) ainsi que HTML & CSS (notions).

En revanche, aucune connaissance Angular ou TypeScript n’est requise.

Inscription & Infos pratiques

Prochaines sessions & tarifs :

Dates Lieu Tarif * Places restantes Inscription

* Si vous inscrivez plus d'un participant, chaque participant au-delà du premier bénéficie d'une réduction de 100€HT. Exemple : Pour une formation qui coûte 1.000€HT, le premier participant paie 1.000€HT et les suivants 900€HT chacun. Si vous inscrivez 3 participants ou plus, il peut être plus intéressant financièrement d'organiser une formation INTRA (dans vos locaux).

Durée : 3 jours, de 9h à 17h30 chaque jour (soit 21 heures).

Adresse : Domaine des Entrepreneurs, 75 rue de Richelieu, 75002 Paris (voir le plan).

Formateur : Vincent Caillierez.

Inscription : Cliquez le bouton "Inscription" pour vous PRÉ-INSCRIRE à la session qui vous intéresse. Vous recevrez par retour une convention de formation simplifiée. Pour confirmer votre inscription, il faudra nous renvoyer cette convention signée.

Prise en charge CPF/DIF : Notre société est déclarée en tant qu'organisme de formation. Vous pouvez donc faire une demande de financement de votre formation auprès de l'organisme habilité. Pour obtenir tous les renseignements nécessaires à votre demande, préinscrivez-vous en cliquant sur "Inscription".

Matériel : Chaque participant doit amener son propre ordinateur portable sur lequel réaliser les exercices. Vous êtes libre d'utiliser l'OS et l'IDE de votre choix. (Des instructions détaillées sur les prérequis logiciels sont envoyées aux participants avant la formation, mais en gros il faut Node.js et npm sur sa machine, et pour l'IDE Visual Studio Code et WebStorm sont des choix assez populaires.)

Programme

Stack technique utilisé pendant la formation : Node.js et npm, Angular 5.2.7 ou +, Angular CLI 1.6.7 ou +, Bootstrap 4.0.0 ou +.

Module 1 - Introduction

  • Présentation des participants et du formateur.
  • Introduction à Angular. Qu’est-ce que c’est ? Points forts. Points faibles.
  • Démarrage. Outils de développement (WebStorm conseillé). Stack technique (npm + angular-cli). Création d’une application Angular minimale.
  • Révisions JavaScript. Déclarer avec var, let ou const ? Rappel des syntaxes fréquentes pour manipuler les objets, les tableaux et les fonctions.
  • TypeScript/ES6. Introduction. Bénéfices. Principe de “transpiling”. Passage en revue des principales nouveautés des langages TypeScript et ES6 : Types, Interfaces, Classes, Modules, Fonctions flèche, Templates chaîne.
  • Superquiz. Présentation de l’applicaiton fil rouge développée tout au long de la formation.

Module 2 - Composants I

  • Introduction. Définition, création et utilisation d’un composant Angular.
  • L’arbre des composants. Toute application Angular est un arbre de composants.
  • Templates - Afficher des données. Interpolation. Binding de propriété. Directives structurelles (*ngIf, *ngFor, *ngSwitch).
  • Templates - Mettre en forme des données. Ajouter des styles CSS à un composant. Modifier dynamiquement le formatage avec ngClass et ngStyle. Utiliser les “pipes” (équivalent des “filtres” dans AngularJS).
  • Templates - Réagir aux actions de l’utilisateur avec le binding d’événement.

Module 3 - Composants II

  • Méthodes “cycle de vie” : ngOnInit, ngOnChanges, ngOnDestroy.
  • Rendre un composant réutilisable. Propriété “input” (@Input). Événements “output” (@Output). Pattern Smart/Dumb. Projection de contenu ().

Module 4 - Services & Injection de dépendance

  • Services. Définition. Utiliser un service. Créer son propre service.
  • Injection de dépendance. Définition. Déclarer une dépendance (globale ou locale). Injecteur une dépendance.
  • Comment organiser son code pour tirer partie de l’injection de dépendance.

Module 5 - Modules Angular

  • Qu’est-ce qu’un module Angular ? Syntaxe. Bénéfice. Présentation rapide de quelques modules fournis par le framework (BrowserModule, CommonModule, FormsModule…).
  • Root Module vs Feature Module. Différences de syntaxe. Cas d’usage.

Module 6 - Routeur

  • Tâches préparatoires.
  • Mettre en place les routes de l’application avec RouterModule et .
  • Naviguer dans l’application via des liens cliquables (routerLink) ou programmatiquement (Router.navigate).
  • Syntaxes diverses. Routes avec paramètre(s). Routes imbriquées. Liens absolus et relatifs.
  • Mettre le lien actif en surbrillance.
  • Routes d’un feature module. Déclaration. Activation.

Module 7 - HTTP

  • Tâches préparatoires.
  • Recevoir et envoyer des données avec Http : Requêtes GET et POST.
  • Transformer les données reçues grâce aux opérateurs RxJS.
  • Paramétrage avancé des requêtes (par ex, changer les headers HTTP).
  • Autres types de requêtes : PUT et DELETE.

Module 8 - Formulaires

  • Introduction. Activer les formulaires dans Angular. Présentation des 2 syntaxes possibles, avec points communs et différence.
  • Formulaires pilotés par le template. Syntaxe (template). Validation du formulaire. Récupération des données. Cas d’utilisation.
  • Formulaires pilotés par le template (aussi appelé “reactive forms”). Syntaxe (template + modèle). Validation du formulaire (Validators). Récupération des données. Cas d’utilisation. Résumé et contraste des deux syntaxes.

Module 9 - Observables & RxJS

  • Explication du principe de programmation réactive.
  • Présentation de RxJS, une implémentation de ReactiveX en JavaScript. Définition de Observable, Observer, Subject.
  • Principaux opérateurs RxJS utilisés dans Angular : map, mergeMap, reduce, filter…

Module 10 - Fonctionnalités avancées

  • Routeur avancé. Utiliser les “gardes” pour empêcher d’accéder à ou de quitter une route, ou pour précharger les données associée à une route.
  • Formulaires avancés. Créer un champ répété. Créer un validateur custom. Observer les changements de valeur en temps réel (par ex, pour faire un moteur de recherche “auto-complete”).
  • Affichage avancé. Créer une directive. Référencer ou modifier l’élément hôte. Référencer les éléments enfant.
  • HTTP avancé. Modifier le paramétrage de toutes les requêtes HTTP d’une application.

Module 11 - Tests unitaires & end-to-end

  • Introduction. Bénéfices d’ajouter des tests à son application. Différences entre tests unitaires et tests end-to-end (également appelés tests d’intégration).
  • Tests unitaires. Tester une portion de code. Tester les différentes “briques” d’une application Angular : un service, un composant, un formulaire, les requêtes HTTP.
  • Tests end-to-end. Tester l’application dans son ensemble, du point de vue de l’utilisateur final.
  • Outils de testing : Jasmine, Karma, Protractor.

Module 12 - Outillage, internationalisation et déploiement

  • Passage en revue des outils utiles au développement Angular : TypeScript, Tests, Angular CLI, Augury, Frameworks UI.
  • Internationalisation. Traduire et localiser son application.
  • Déploiement. Vue d’ensemble. Prérequis serveur et prérequis Angular. Builder son code. Compilation AOT.

Module 13 - Migration de AngularJS à Angular 2+

  • 7 différences entre AngularJS et Angular 2+.
  • Préparer son code AngularJS 1.x en vue d’une migration vers Angular 2+.
  • Utiliser ng-upgrade et ng-forward.
  • Faut-il passer à Angular 2+ aujourd’hui ?