Booster des Talents IT

Formation AngularBest Formation !

logo du framework JavaScript Angular
Développez des applications propres et performantes grâce à notre formation de 3 jours !
Notre formation sur le framework Angular permet une montée en compétences rapide et pérenne. Grâce à une méthode pédagogique moderne alternant mises en pratique, retours d'expérience et échanges en continu, les participants acquièrent les bons réflexes pour développer sereinement et de façon autonome avec Angular. A l'issue des 3 jours de formation, ils sont capables de concevoir des applications propres et robustes quelque soit leur contexte professionnel. Les nouveaux standards du web (TypeScript, ES6 et les Web Components notamment) sont abordés via des exemples concrets de mises en application, pour faciliter l'assimilation des bonnes et mauvaises pratiques. Un support de cours reprenant tous les points importants de la formation sera remis à chacun des apprenants.
Prixà partir de
1650 €HT
RéférenceAF24791
Durée3 jours
Public Architectes, Chefs de Projet, Consultants, Développeurs
PrérequisConnaissances en JavaScript, HTML et CSS.
Éditeurs Open Source, Google
TP50%

Plan de Formation Angular

Introduction à la formation Angular

Présentation générale et objectifs de cette formation Angular
Décryptage de la philosophie voulue par Google
Les apports d’Angular dans le monde du développement web
Versionning : d’AngularJS à Angular 2, 4, 5 et 6
Le langage TypeScript, Babel et les versions standardisées de JavaScript (EcmaScript 2015, ES7, ES2018…) : ce qu’il faut savoir avant de démarrer sur Angular
Comprendre la notion de Web components du W3C (custom elements, shadow DOM, HTML templates et imports)

Atelier : Présentation du formateur et des stagiaires, échanges sur les différents contextes professionnels et perspectives d’application des acquis de la formation.

Premier pas : comprendre la structure du framework

Concepts fondamentaux et vue d’ensemble de l’architecture : composants, services, vues…
Comment est organisée une application Angular ?
Organisation du code avec les modules : les conteneurs NgModules et l’encapsulation
Templates, les nouvelles syntaxes
Fonctionnement du databinding pour gérer les données dynamiques
Rôles des pipes et directives
Principes de l’injection de dépendances avec Angular
Les packages à installer, les nouvelles fonctionnalités d’Angular CLI et l’intérêt de Webpack

Exemples de cas pratiques : Configuration de l’environnement de développement, installation des outils et création d’une première application « from scratch » avec Angular CLI (en version stable depuis Angular 4).

Composants, templates et liaison de données (databinding)

Cycle de vie et structure des Angular components
Démarrer un projet et créer une hiérarchie de composants
Les mécanismes d’interaction entre composants
Annotations et décorateurs, leurs différences et propriétés
Ajouter des styles aux composants (comprendre la ViewEncapsulation)
L’interpolation et les différents binding de données (propriétés et évènements)
Le two-way binding dans un composant
Travailler avec les Angular Elements

Exemples de cas pratiques : Création de composants Angular, ajout de styles et mise en œuvre des différents types de databinding., transformation de composants en custom elements.

Directives et pipes

Directives structurelles (ngFor, ngIn et les ngSwitch)
Directives par attribut (ngModel, ngStyle, ngClass…)
Construire ses propres directives
Utiliser les pipes natifs (DatePipe, UpperCasePipe, CurrencyPipe…)
Créer ses propres pipes
Le nouveau pipe keyvalue d’Angular 6

Exemples de cas pratiques : Utilisation de directives, manipulation des pipes (paramètres, notion de Change Detection) pour enrichir ses composants.

Services et injection de dépendances

Retour sur le système d’injection de dépendances
Créer un service basique
Les injecteurs et instances dans Angular
Enregistrer un service : les différentes options
Déclarer des services avec les tree-shakable providers

Exemples de cas pratiques : Développement et déclarations de services personnalisés.

Formulaires

Les différentes façons de créer des formulaires : template-driven ou reactive ?
Comprendre la gestion du flux de données
Valider et gérer les erreurs : considérations pour la sécurité
Créer des validateurs personnalisés et les ajouter à un formulaire

Exemples de cas pratiques : Création d’un formulaire selon les deux approches possibles, enregistrement des contrôles et mise en œuvre de tests.

Les Observables et la bibliothèque RxJS

Concepts de programmation réactive
Angular 6 et RxJS 6 (Reactive Extensions for JavaScript)
Comprendre et utiliser les observables et observateurs
L’intérêt des Subjects
Les principaux opérateurs : map(), filter(), throttleTime(), scan() et reduce()
Gestion des requêtes HTTP avec l’API HttpClient d’Angular 4

Exemples de cas pratiques : Utilisation des observables et comparaison avec d’autres techniques (promises, event handlers, arrays), interactions avec un serveur Firebase.

Routing et navigation

Vue d’ensemble du routage Angular
Déclarer et configurer des routes et URLs
La navigation avec routerLink et navigate
Paramètres de routes
Gérer les redirections
Configurer des guards

Exemples de cas pratiques : Définition des routes et navigation dans une application.

Tests

Configurer l’environnement de test
Karma et Jasmine
Utiliser Protractor pour des tests end-to-end
Les bonnes pratiques pour tester sous Angular

Exemples de cas pratiques : Tests unitaires et aperçu de la mise en œuvre d’une démarche TDD (Test Driven Development)

Progressive Web Apps, Service Workers, Schematics : nouveautés Angular 6 et concepts avancés

Focus sur les nouveautés et changements apportés par Angular 6
Qu’est-ce qu’une PWA ?
Introduction aux services workers, pris en charge depuis Angular 5
UI Design avec Angular Material et le Component Dev Kit (CDK)
Migration automatique avec ng update
ng add et l’utilisation des Schematics
Composants avancés
Zones
Compilation Ahead of Time (AoT)
Le lazy-loading

Exemples de cas pratiques : Ajout de service workers, démonstration de l’implémentation d’une PWA avec Angular 6.

Nos autres formations JavaScript

AF27924Formation Stencil New Formation ! 28 sessions prévues2 jours1290 €HT
AF24600Formation Dojo Toolkit 30 sessions prévues3 jours1790 €HT
AF26033Formation Vue.js 30 sessions prévues3 jours1700 €HT
AF25915Formation TypeScript 30 sessions prévues2 jours1290 €HT
AF25904Formation MeteorJS 29 sessions prévues4 jours2190 €HT
Voir les 27 formations
Vous pouvez également être intéressé par des formations angularjs, react, VueJS ou par les formations de notre filière JavaScript
A propos de Angular
Angular est un célèbre framework JavaScript développé par Google. Vous trouverez sur notre blog un certain nombre d'informations quant aux nouveautés attendues sur la version 6 d'Angular, ainsi que des ressources utiles en amont de votre formation. En savoir plus
Prixà partir de
1650 €HT
RéférenceAF24791
Durée3 jours
Public Architectes, Chefs de Projet, Consultants, Développeurs
PrérequisConnaissances en JavaScript, HTML et CSS.
Éditeurs Open Source, Google
Travaux pratiques50%
Suivez l'une de
nos 30 sessions
le 26/11/2018 à Lyon
le 18/12/2018 à Nantes
le 26/12/2018 à Paris
le 15/01/2019 à Aix-en-Provence
le 21/01/2019 à Paris
le 13/02/2019 à Lyon
le 13/02/2019 à Grenoble
le 27/02/2019 à Lille
le 25/03/2019 à Paris
le 26/03/2019 à Nantes
le 08/04/2019 à Lyon
le 08/04/2019 à Grenoble
le 10/04/2019 à Toulouse
le 15/05/2019 à Aix-en-Provence
le 20/05/2019 à Paris
le 11/06/2019 à Lille
le 25/06/2019 à Lyon
le 25/06/2019 à Grenoble
le 15/07/2019 à Nantes
le 23/07/2019 à Paris
le 03/09/2019 à Toulouse
le 11/09/2019 à Lyon
le 11/09/2019 à Grenoble
le 08/10/2019 à Aix-en-Provence
le 16/10/2019 à Paris
le 20/11/2019 à Lille
le 25/11/2019 à Grenoble
le 25/11/2019 à Lyon
le 03/12/2019 à Paris
le 30/12/2019 à Nantes
Voir toutes les dates