ANGULAR – Création d’applications Web

RAPPEL SUR JAVASCRIPT

MODULE 1 – FONDEMENTS DU FRAMEWORK ANGULAR (2H30)

Contexte et historique

Installation d’Angular

Créer un projet Angular (ng new my-app)

Architecture et composants Angular (Structure d’un projet Angular)

Outils de développement actuels : VSCode (+extensions) / Extension Chrome Angular DevTools

Lancer le projet (ng serve / npm start)

MODULE 2 – LES COMPOSANTS (3H30)

Le Composant d’entrée de l’application : AppComponent (Structure d’un composant ( ng g c )

Modifier le template d’un composant

Mon premier composant : Component ( ng g c )

Intégrer le composant dans notre app via le router

Interpolation {{ }} c – définir une variable dans le code behind et l’afficher

Property binding Input()

Event binding Output()

Cycle de vie des composants ngOnlnit / ngAfterViewlnit / ngOnDestroy

MODULE 3 – LES DIRECTIVES (2H30)

Aperçu des directives

Directives sur les composants @Component

Directive structurelles nglf / ngFor

Directives sur les attributs https://angular.io/guide/attribute-directives

MODULE 4 – LES PIPES (3H00)

Vue d’ensemble des Pipes peuvent être intégrés dans template (html) ou code behind (ts)

Pipes intégrées : DatePipe

Paramétrer un Pipe

Enchaînement de Pipes: CurrencyPipe / UppercasePipe

Pipes Stateful : https://angular-training-guide.rangle.io/pipes/stateful_and_asynic_pipes

Pipes sur mesure : https://angular.io/guide/pipes-custom-data-trans

MODULE 5 – LES SERVICES (3H30)

Récapitulatif de l’injection de dépendance ( private myService: Service )

Définir et injecter des services : Service ( ng g s )

Fournisseurs : Module providers

Lazy Injection : https://angular.io/guide/lazy-loading-ngmodules

Afficher les données d’un service depuis un composant

Faire communiquer des données via RXJS

MODULE 6 – LES FORMULAIRES (2H30)

Création d’un formulaire : Réactive Form ( Typed Form / Untyped Form )

isPristine / isValid

Validation d’un formulaire, Gestion des erreurs

MODULE 7 – LE ROUTEUR (2H30)

Itinéraires (route patterns)

Support pour les Query Strings

Configuration des itinéraires

Traitement des erreurs de routage Angular (ex : 404 page)

Techniques supplémentaires : AuthGuard

MODULE 8 – LES MODULES (30 MIN)

Découpage de l’application en modules

MODULE 9 – OUTILS ANNEXES (30 MIN)

Angular Material

Le module d’internationalisation

Déboguer l’application via Chrome console

Déboguer l’application via Chrome breakpoints

Déboguer l’application via AngularDevTools

MODULE 10 – CRÉER ET TESTER DES APPLICATIONS ANGULAR (30 MIN)

Découpage de l’application en modules

Builder l’application : ng build prod

Exécuter son site en production : http-serve-p 4200