Nos formations : Informatique

ANGULAR – Création d’applications Web

Prix par personne : 2 290 €
Durée : 3 Jour(s) / 21 Heures
Prochaines sessions :
06 au 08 novembre

Objectifs

Permettre la création d’applications Web et d’applications Web Monopages

Pré-requis

Avoir des connaissances de base dans un langage de programmation orienté objet => ( Java, C#, C++ ) – savoir modéliser un modèle de donnée simple ( classe, interface )|Logiciels : Visual Studio Code, NodeJS|Avoir des connaissances de base en Javascript => savoir créer une fonction avec des paramètres

Public visé

Cette formation s’adresse aux développeurs et aux chefs de pro et

Programme

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

 

Modalité d'accès

Vous pouvez vous inscrire pour suivre une de nos formations usqu’à la veille de la date de démarrage si la formation est financée directement par votre entreprise ET si le nombre maximum de participants n’est pas atteint. Si la formation est financée via un OPCO, vous devez au préalable avoir obtenu un accord de ce dernier.

Accessibilité aux personnes en situation de handicap

Nos locaux sont accessibles aux Personnes à Mobilité Réduite PMR.
De plus, nos conseillers sont disponibles pour vous accompagner dans vos démarches à travers nos partenaires. Nous sommes en mesure de mobiliser les expertises, les outils nécessaires pour vous accueillir, vous accompagner et vous former.