Nos formations

Développement Front End - Angular : développer une application Web (2 jours)

Développement Front End - Angular : développer une application Web (2 jours) Image

Accessible aux personnes en situation de handicap

Objectifs

Tandis que la première version d’Angular s’était imposée pour développer des applications web facilement en JavaScript, ses successeurs Angular 2, 4, 5 et 6 dont les versions stables sont maintenant disponibles (et déjà utilisées en production sur certains produits Google), va encore plus loin : meilleures performances, utilisation de la nouvelle version de JavaScript (ES6/ES2015), meilleurs outils de développement, server-side rendering… Toutefois, la syntaxe a beaucoup changé. Que vous utilisiez déjà ou non Angular, passez à la vitesse supérieure pour vos développements JavaScript avec Angular.

Concrètement, à l’issue de ce cours, les participants auront acquis les connaissances et compétences nécessaires pour :

  • Construire une application Angular (version 2 et plus)
  • Programmer avec le langage Typescript
  • Anticiper les problématiques liées au déploiement dans le SI

Programme détaillé

Structure d’une application Angular

Le langage TypeScript

Première application avec Angular Cli

Évolutions et disparitions depuis Angular JS

 

Les composants

Principes généraux d’Angular

Templates, nouvelles syntaxes

Styles du composant

Nouvelles directives du framework

Cycle de vie des composants

 

Injection de dépendances

Principes du mécanisme d’injection

Annotations et décorateurs

Configuration de l’injecteur dans Angular

 

Syntaxe du template Angular

Interpolation

Réutilisation de composants

Les bindings

Les directives structurelles

Gestion des événements

Les Pipes

 

Les formulaires Angular

Formulaires Template-driven

Formulaires Model-driven

La directive ngModel

Validation personalisée

Autres apports du module @angular/forms

 

Accès au réseau

Les Observables dans Angular

Les Promises

Gestion de la sécurité

Dévelopement et déploiement avec ou sans CORS

 

Le routage Angular

Déclarer ses routes

Configuration du routeur

Application Universelle côté serveur

 

Tests

Le moteur de tests Karma

Le framework Jasmine

Tests de composants

Tests End to End

 

Études de cas

 

Réalisation d’une application de gestion de tâches (Todo List) améliorée, collaborative et temps réel à la Trello.

  • Création, suppression, mise à jour et modification d’une tâche (CRUD)
  • Partage des tâches en équipe, collaboration sur les tâches
  • Gestion de droits de lecture et écriture

 

Réalisation d’une application de réseau social simplifié à la Twitter.

  • Affichage temps réel et mise à jour du flux d’informations
  • Publication, réactions aux messages
  • Ajout / Suppression / modification d’entrée dans l’agenda
  • Détection de collision d’événements
  • Personnalisation du style de l’agenda

Développement Front End - Angular : développer une application Web (2 jours)

Développement Front End - Angular : développer une application Web (2 jours) Image

Accessible aux personnes en situation de handicap

Objectifs

Tandis que la première version d’Angular s’était imposée pour développer des applications web facilement en JavaScript, ses successeurs Angular 2, 4, 5 et 6 dont les versions stables sont maintenant disponibles (et déjà utilisées en production sur certains produits Google), va encore plus loin : meilleures performances, utilisation de la nouvelle version de JavaScript (ES6/ES2015), meilleurs outils de développement, server-side rendering… Toutefois, la syntaxe a beaucoup changé. Que vous utilisiez déjà ou non Angular, passez à la vitesse supérieure pour vos développements JavaScript avec Angular.

Concrètement, à l’issue de ce cours, les participants auront acquis les connaissances et compétences nécessaires pour :

  • Construire une application Angular (version 2 et plus)
  • Programmer avec le langage Typescript
  • Anticiper les problématiques liées au déploiement dans le SI

Programme détaillé

Structure d’une application Angular

Le langage TypeScript

Première application avec Angular Cli

Évolutions et disparitions depuis Angular JS

 

Les composants

Principes généraux d’Angular

Templates, nouvelles syntaxes

Styles du composant

Nouvelles directives du framework

Cycle de vie des composants

 

Injection de dépendances

Principes du mécanisme d’injection

Annotations et décorateurs

Configuration de l’injecteur dans Angular

 

Syntaxe du template Angular

Interpolation

Réutilisation de composants

Les bindings

Les directives structurelles

Gestion des événements

Les Pipes

 

Les formulaires Angular

Formulaires Template-driven

Formulaires Model-driven

La directive ngModel

Validation personalisée

Autres apports du module @angular/forms

 

Accès au réseau

Les Observables dans Angular

Les Promises

Gestion de la sécurité

Dévelopement et déploiement avec ou sans CORS

 

Le routage Angular

Déclarer ses routes

Configuration du routeur

Application Universelle côté serveur

 

Tests

Le moteur de tests Karma

Le framework Jasmine

Tests de composants

Tests End to End

 

Études de cas

 

Réalisation d’une application de gestion de tâches (Todo List) améliorée, collaborative et temps réel à la Trello.

  • Création, suppression, mise à jour et modification d’une tâche (CRUD)
  • Partage des tâches en équipe, collaboration sur les tâches
  • Gestion de droits de lecture et écriture

 

Réalisation d’une application de réseau social simplifié à la Twitter.

  • Affichage temps réel et mise à jour du flux d’informations
  • Publication, réactions aux messages
  • Ajout / Suppression / modification d’entrée dans l’agenda
  • Détection de collision d’événements
  • Personnalisation du style de l’agenda