Contactez-nous
FormationsJavaScriptAngular

Angular

Formation Angular

Angular est le successeur d’AngularJS, le framework front-end repris et maintenu par Google. Angular architecture ses applications autour du concept de composant, permettant une meilleure réutilisation de code qu’auparavant. Cette version couvre Angular 6 et ses nouveautés, mais également les nouveautés apparues dans Angular 2, Angular 4 et Angular 5.

Objectifs

  • Appréhender les technologies utilisées par Angular
  • Créer des composants d'UI
  • Construire une Single Page Application (SPA)
  • Communiquer avec le serveur
  • Connaître des bonnes pratiques du framework

Pré-requis

  • HTML/CSS
  • JavaScript ou TypeScript

Programme

Jour 1

  • Les IDEs JavaScript
    • Visual Studio Code
    • WebStorm
    • EditorConfig
  • Une réintroduction à JavaScript
    • Closures
    • Fonctions Constructeurs et Prototype
    • ES5.1, ES6, ES7, ES8, ES.Next
  • JavaScript Asynchrone
    • Callbacks et Boucle d’événements
    • Utilisation de this dans un contexte asynchrone
    • Callback Hell, Promise, async/await
    • Observable avec RxJS
    • Intercepter les callbacks Asynchrone avec zone.js
  • TypeScript
    • Un surensemble de ECMAScript
    • Typage statique
    • Interfaces
    • Comportements différents d’ECMAScript
    • Décorateurs

Jour 2

  • Outillage d’un projet Angular
    • webpack
    • Live Server et Hot Reloading
    • ESLint et TSLint
    • Angular CLI
  • Introduction à Angular
    • Architecture créée via Angular CLI
    • NgModules
    • Components et Metadata
    • Templates et Data binding
    • Directives et Pipes
    • Services et Injection de Dépendance
  • Anatomie d’un template
    • Property binding : bind et []
    • Interpolation {{}}
    • Event binding : on et ()
    • Two way data binding : bindon et [()]
    • ngClass, ngStyle, ngModel
    • *ngIf, *ngFor, *ngSwitch
    • Références vers Element, Directives et Composants
  • Anatomie d’un composant
    • @Component vs Web Component
    • Communication parent/enfant avec @Input et @Output
    • Cycle de vie et Hooks
    • Détection de changement

Jour 3

  • Modules
    • NgModules vs. Modules JavaScript
    • Imports, Exports, Declarations et Providers
    • Features Modules
    • CoreModule et SharedModule
  • Routeur
    • Configuration des Routes
    • Routes avec Paramètres
    • Routes enfants et router-outlet imbriqués
    • Sécuriser l’accès avec les Guards
    • Resolver
    • Lazy-loaded modules
  • Services
    • Injection de dépendances
    • Providers, useClass, useFactory, useValue et useExisting
    • Services globaux et isolés
    • Hierarchie des services
  • Http
    • Récupérer des données JSON
    • Gestion des erreurs
    • Données non-JSON
    • Intercepter les requêtes et réponses
    • Annuler une requête

Jour 4

  • Formulaires
    • Formulaires Réactifs vs Template Driven
    • Rendu de formulaires
    • Validation
  • Tests Automatisés
    • Test Unitaires avec Jasmine et Karma
    • Modules de Tests et Mocks
    • HttpClientTestingModule
    • Protractor et les tests End-to-End
  • Aller plus loin
    • Création de directives et Pipes
    • Réutilisation de composants entre projets
    • Angular Animations
    • Migrations entres les version d’Angular
    • Platform-server : Server Side Rendering
    • Sécurité
    • Internationalisation

Formations associées

AngularJS