Recherche avancée
Par formation
Par date
Par ville
logo HUB Formation
Organisme de Formation
aux Technologies et métiers de L'informatique
La pédagogie au service de la technologie
Accueil > Domaines > Développement > Frameworks > Développement d'applications avec Angular 6

Développement d'applications avec Angular 6

angular-js

Angular est le framework créé par Google. Ses dernières versions amènent de nombreuses fonctionnalités, permettant de développer des applications web plus rapidement et de meilleure qualité. Cette formation permettra d'appréhender et d'utiliser tous les nouveaux concepts novateurs introduits par ce framework.

Objectifs

  • A l'issue de la formation, les stagiaires seront en mesure de:
  • D'avoir une vue d'ensemble d'u Framework
  • Savoir développer une nouvelle application Web
  • Savoir concevoir une application Angular

Public

  • Ce cours s'adresse aux développeurs Web

Prérequis

  • Avoir des bases en JavaScript.

Programme de la formation

Introduction a Node JS

  • Présentation de l'architecture de NodeJs
  • Le moteur V8 de Google
  • Caractéristiques de NodeJs
  • Présentation de Npm
  • Présentation de expressJS
  • Mise en place d'un premier Backend en NodeJS

Rappel sur ES6/ES2015

  • Nouveautés ES6 : portée de a un bloc, template litterals, arrow functions…
  • Modules ES6 et dépendances
  • Les Classes ES6

Le langage TypeScript

  • Le typage
  • Décorateurs / annotations
  • Autres outils : visibilité, statique, abstraction…
  • Mise en place de l'environnement et Outillage: Cas pratique : Développer et tester une application Angular

Comprendre Angular

  • Concepts fondamentaux et vue d'ensemble de l'architecture : composants, services, vues…
  • Organisation du code avec les modules : les conteneurs NgModules et l'encapsulation
  • Cas pratique: création du projet file rouge

Les composants

  • Comprendre la notion de Web components du W3C (custom elements, shadow DOM, HTML templates et imports)
  • Cycle de vie et structure des Angular components
  • Les mécanismes d'interaction entre composants
  • Le dataBinding
  • Cas pratique: création des composants nécessaires pour le projet file rouge

Injection des dépendances

  • Retour sur le système d'injection de dépendances
  • Les injecteurs et instances dans Angular
  • Enregistrer un service : les différentes options
  • Les directives de Angular
  • Cas pratique: création et injection d'un service de type bouchon pour simuler la génération des données dans notre projet

Programmation réactive

  • Concepts de programmation réactive
  • Angular 6 et RxJS 6 (Reactive Extensions for JavaScript)
  • Comprendre et utiliser les observables et observateurs

Gestion des 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
  • Cas pratique: création du module d'administration de notre projet

Communication avec les Webservices

  • Utilisation de l'API REST
  • Gestion des requêtes HTTP avec l'API HttpClient d'Angular 4 et plus
  • Cas pratique: création et communication avec un WebService Rest

Routing et navigation

  • Vue d'ensemble du routage Angular
  • Déclarer et configurer des routes et URLs
  • La navigation avec routerLink et navigate
  • Gérer les redirections
  • Cas pratique: ajout des redirections et des navigations nécessaires pour finaliser le site
  • Configurer l'environnement de test
  • Karma et Jasmine
  • Utiliser Protractor pour des tests end-to-end
  • Les bonnes pratiques pour tester sous Angular
  • Cas pratique: Tester le projet file rouge

Les nouveautés Angular 6,7 et concepts avancés

  • Focus sur les nouveautés et changements apportés par Angular 6
  • Introduction aux services workers, pris en charge depuis Angular 5
  • UI Design avec Angular Material et le Component Dev Kit (CDK)
  • Composants avancés
  • Compilation Ahead of Time (AoT)
  • Le lazy-loading
  • Cas pratique : Optimisation et déploiement du projet File rouge