Aller au contenu principal
Afficher le fil d'ariane

PLB CONSULTANT : 05. Angular - Développement d'applications web

Organisme

PLB CONSULTANT
3-5 RUE MAURICE RAVEL
92300 LEVALLOIS PERRET
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

21 heures

Modalités

Formation

  • Classe virtuelle
  • Présentiel

Évaluation

Travaux pratiques. Auto-évaluation en début et en fin de formation.

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
840€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3360€ HT / groupe
4 stagiaires minimum

Public

Architectes, développeurs, chefs de projets…

Pré-requis

Avoir des connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript.

Objectifs pédagogiques

- Maîtriser les fondamentaux du Framework Angular et ses nouveautés 

- Organiser, modulariser et tester ses développements JavaScript 

- Savoir développer plus rapidement et tester des applications web Angular 2 avec JavaScript et TypeScript 

- Connaître les bonnes pratiques de développement et de mise en production 

- Découvrir les spécifications EcmaScript 6 (ES6) 

- Savoir intégrer les tests unitaires au développement

Programme détaillé

 

Introduction

Objectifs du framework et Points forts d’Angular, comparaison avec ReactJS, VueJS

Bien comprendre les implications de la politique de versionning

Les dernières versions et ce qu’elles apportent

 

JavaScript ES5, ES6 et Typescript

Voir ou revoir les bases de la syntaxe JavaScript : Variables, tableaux, fonctions

Les améliorations d’ES6 avec les notions de classes et de modules, : Instanciation d’objet, les Arrow functions, l’interpolation de String

TypeScript  avec les Types et les annotations : 

Transpilation, configuration de la transpilation

Inférence de type, interfaces, Classes, Visibilité

Décorateurs

Atelier 1

Objectif : Être à l’aise avec la syntaxe TypeScript

Description : Manipulation de tableaux, boucles et fonction de call-back en JavaScript

Déclaration de classe et d’interface, instanciation d’objet

 

Premiers pas avec Angular

Les prérequis d’installation, rappels npm et nodejs

L’outil de développement Angular-CLI : ng et ses principales commandes

Modules et composants Angular

Atelier 2

Objectif : Prendre en main les commandes d’AngularCli et le cycle de développement

Description : Installation nodejs, npm, TypeScript

Installation Angular CLI

Création de projet, démarrage du serveur

Constatation du LiveReload, Debugger Chrome

 

L’approche composant

Principes généraux d'Angular, l’arbre de composants, Shadow Dom et templates

Comment déclarer un composant, les différentes syntaxes possibles, création via ng : les fichiers générés

les éléments de syntaxe des templates : Interpolation, Pipes, Utilisation de composant

Interactions entrée/sortie avec les composants  : Binding et événements

Le cycle de vie des composants et les interfaces de call-back proposés par Angular

Comment gérer le style des composants, le sélecteur CSS :host

Comparaison directive / composant. Créer ses propres directives

Atelier 3

Objectif : Savoir déterminer l’arbre de composants

Prendre en main la syntaxe de templating

Description : Création d’un composant menu et d’un composant liste

Développent Typescript des modèles

Gestion du onClick

Application de style via le sélecteur:host

 

Injection de dépendances

Le principe d’injection, son mécanisme dans Angular

Annotations concernés par l’injection

Les injecteurs hiérarchiques, Choisir son injecteur dans les composants 

Écrire sa classe service, cycle de vie et cas d’usage

Atelier 4

Objectif : Créer son premier service

Description : Création de deux composants service

Mock d’un appel HTTP

Service stateful encapsulant les données partagées

 

Programmation réactive et service HTTP

Programmation réactive : OK, on vous rappellera

Le standard ReactiveX, son implémentation avec RxJS

Le type Observable et la méthode subscribe()

Les principaux opérateurs disponibles, leurs importations

Les cas d’usage de le programmation réactive dans les application front-end

Exemple incontournable : Le service HTTP fourni par Angular

Les bonnes pratiques pour interagir avec le back-end : Mapping Objet, Intercepteurs, Gestion du CORS

Atelier 5

Objectif : Savoir dialoguer avec un back-end 

Description : Création des fonctionnalités CRUD dans le composant service

 

Le routage Angular

Comment gérer la navigation avec Angular ? Déclarer ses routes

Gérer les redirections, récupération les paramètres de navigation

Routage hiérarchique : comment s’organiser, les bonnes pratiques

Guards et resolver : Comment protéger l’accès à une route

S’abonner aux évènements de routage

Atelier 6

Objectif : Gérer la navigation d’une application

Description : Création d’un composant détail

Gestion de la navigation liste→detail

Protection de routes

 

Les formulaires Angular

Template-driven ou Model-driven ?

La directive ngModel

Les types FormGroup et FormControl. Comment gérer la réutilisation ?

Le support pour la validation de données, écrire ses propres validateurs, validation dynamique

Gestion des libellés d’erreurs

Atelier 7

Objectif : Savoir concevoir et valider des formulaires

Description : Modification du composant détail

Définition du formulaire et de ses validateurs

Gestion des erreurs et de la soumission

 

Support pour l’internationalisation

Support pour la localisation d’Anguler, Comment la locale est déterminée ?

Développer une application multi-lingue : Processus et outillage

Syntaxe du templating

Atelier 8

Objectif : Savoir internationaliser une application 

Description : Utiliser les fichiers de libellés (Français/Anglais) fournis

 

Intégrer les tests dans son développement

Le moteur de tests Karma et le framework Jasmine proposés

Écrire un test de composants, de service, isolation du code à tester

Les tests End to End avec Cypress

Exécuter les tests

Atelier 9

Objectif : Écrire des tests unitaires avec Angular 

Description : Écriture des tests unitaires pour tous les composants précédents

 

Se préparer pour la production

Profiling d’application, identifier les goulots d’étranglement

Polyfill et chargement différenciée en fonction des navigateurs

Gérer les différents environnement (dev et prod) 

Assembler pour la production, 

Comment déployer, Configuration du serveur et gestion du reload

Atelier 10

Objectif : Savoir déployer une application Angular en production 

Description : Assemblage pour la production

Configuration nodeJs

Déploiement

Sessions

Filtrer les résultats

45 résultats

Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.

0 résultat