Arkesys

Angular – Développer des applications Web

Par Arkesys

Objectifs

  • Installer et configurer un projet Angular
  • Créer des composants d’application réutilisables
  • Collecter des données utilisateurs avec des formulaires simples et des formulaires dynamiques
  • Mettre en place la navigation dans l’application
  • Structurer les traitements avec des services et mettre en œuvre les mécanismes d’injection de dépendances
  • Échanger des données avec le serveur
  • Synchroniser des traitements avec les objets Observable
  • Traduire une application en plusieurs langues
  • Intégrer des composants de la librairie Material
  • Ecrire des tests unitaires et des tests d’intégration

Programme

Introduction

  • HTML5 et JavaScript
  • Principes et architecture d’une Single Page Application
  • Comparaison AngularJS / Angular
  • Outils et installation

Démarrer un projet

  • Utilisation de NodeJS
  • Langage TypeScript et outils associés
  • Modules et dépendances
  • Mise en place d’un serveur de développement

Structure du projet Angular

  • Fichiers de configurations
  • Modules, import, export et provider
  • Intégration de librairie externe CSS ou JavaScript
  • Scripts et outils de construction/packaging

Composants et templates

  • Application et composant
  • Template et expressions
  • Data Binding
  • Gestion d’événements
  • Directives de structure
  • Pipes et formatage

Formulaires

  • Lier le formulaire au modèle
  • Valider les champs
  • Gérer les erreurs
  • Regroupement d’items
  • Création de formulaire dynamique (ReactiveForm)

Navigation dans l’application

  • Principe des routes
  • Module Router
  • Configuration des routes
  • Navigation dans l’application

Services

  • Injections de dépendances
  • Créer des services injectables
  • Structurer ses services
  • Visibilité des fonctions

Communication avec le serveur

  • Requêtes AJAX avec le module HTTP
  • Programmation réactive pour manipuler la requête
  • Objets « observable »
  • Filtrer et transformer les données avec RxJS

Notions avancées sur les composants

  • Créer des composants réutilisables
  • Communication inter-composants
  • Paramétrage @Input et @Output
  • Manipuler le DOM avec @ViewChild
  • Stratégies de détection du changement
  • Gestionnaire d’états @ngxs
  • Structurer son code en modules

Tester l’application

  • Présentation du framework de test
  • Ecriture de tests unitaires
  • Scénario de tests d’intégration
  • Exécution des tests

[Option] Material Design

  • Configuration du projet pour Material
  • Présentation des composants
  • Intégration des principaux composants
  • Personnalisation du thème

[Option] Internationalisation

  • L’API i18n d’Angular
  • Attributs i18n et attributs personnalisés
  • Gestion des singuliers et pluriels
  • Création de fichiers de traduction

Travaux pratiques

  • Création d’une application bancaire de gestion de comptes et de clients

– Mise en place du projet

– Création d’un premier composant

– Ajout d’un formulaire de création d’un nouveau client

– Mise en place de la navigation dans l’application

– Création de services métiers de persistance locale

– Connexion de l’application à un service Web REST

– Création de composants personnalisés réutilisable

Pédagogie

Explications théoriques suivies de pratiques guidées puis de mises en autonomie

Votre formation a lieu en présentiel :

  • 1 vidéoprojecteur par salle
  • 1 ordinateur

Votre formation se déroule à distance avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque)
  • 1 Webcam (facultatif – dans l’idéal)
  • 1 deuxième écran (facultatif – dans l’idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque - facultatif)

L’acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s’appuie également sur la réalisation d’exercices et de TP. Enfin, des quiz s’ajoutent aux différents outils de validation de l’acquisition des compétences visées.
Une évaluation est systématiquement réalisée par chaque stagiaire, à l’issue de la formation.

À l’issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu’un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Accessible à tous

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l’animation à leurs besoins et rendre l’apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.

Formations de la même catégories (5)

Zenika
Angular AvancéPar Zenika

Angular est le FrameWork TypeScript créé par Google. Parmis ses concurrents (React, VueJS, …) angular est celui qui propose le plus de fonctionnalité en son sein. Cette formation va nous permettre de rentrer dans les coeur d’Angular pour y découvrir tout ce que les développeurs de Google nous ont fourni. Au programme : I18n, Material Design, Reactive Form, RxJS, ZoneJS et bien plus.

Formation animée en présentiel

La formation en présentiel se déroule sur des jours consécutifs

Formation disponible en mode "formation à distance"

La formation à distance peut se dérouler sur des jours consécutifs ou se décomposer en demies journées

Retengr
Angular JSPar Retengr

Le WEB 2.0 a vu l’avènement d’un nouveau mode de conception d’application web: la Single Page Application. AngularJS fut dans un premier temps développer par Google pour des besoins internes, et au regard de son succès grandissant en a fait un produit open source qui rationalise les développements sur le client, apportant ainsi aux entreprises un socle technologique solide et pérenne.

Global Knowledge
Développement Web avec Angular JSPar Global Knowledge

Ce cours vous permet d’acquérir les fondamentaux du framework AngularJS

Orsys
AngularJS, maîtriser le framework JavaScript de GooglePar Orsys

Développé par Google, AngularJS est un framework structurant et simplifiant le développement des applications riches côté client. Cette formation vous apportera la maîtrise des fonctionnalités clés du framework : filtres, contrôleurs, templates... Vous verrez également son intégration dans une architecture REST.

Dawan
AngularPar Dawan

Maîtriser les concepts du framework Angular - Utiliser Angular pour développer des applications web performantes