Programme de Formation AngularJS

Introduction

Développement d'applications riches

Panorama des frameworks disponibles

Architecture, pattern MVVM (Model View ViewModel)

AngularJS : présentation, composantes

Rappels HTML5, JavaScript

Atelier : Mise en place d'un projet intégrant AngularJS Découpage MVVM

Contrôleurs : fonctionnement, implémentation

Modèle et contexte : hiérarchie, création

Gestion des événements utilisateur : $scope.emit(), $scope.broadcast(), $scope.on()

Implémentation des vues : affichages, saisies, actions, binding (expressions) et filtres

Gestion des paramètres

Invocation des contrôleurs dans la vue

Moteur de templates : inclusion, inline

Atelier : Création d'une application web MVVM complète Debug et tests

Gestion des exceptions

Debug d’AngularJS : méthodes, Batarang

Tests unitaires : Jasmine, Karma, ngMock

Injection de dépendances et mock objects

Tests fonctionnels : Protractor, $httpBackend (ngMockE2E) Atelier : Debug d'applications et automatisation de tests Notions avancées

Noyau AngularJS : compilation, directives

Raffraîchissement des templates

Cadre d'exécution

Application mono-page multi-vues

Configuration du routage

Gestion de l'historique

Internationalisation de l'application

Formatage : dates, nombres

Implémentation de filtres

Atelier : Configuration de l'application - Implémentation single page/Multi views - I18N Appels serveur

Intercepteurs de réponse

Ajax avec le service $http

Gestion des appels REST : service $resource

WebSocket et Server-Sent Events avec AngularJS

Utilisation de l'API Promise

Atelier : Multiples appels de services Modularité et services

Application et modules : création, configuration

Démarrage de l'application, directives

Partage de services inter-applications

Services : création, configuration et gestion des dépendances

Bonnes pratiques

Atelier : Création et configuration de modules et de services

Programme de Formation Vue.Js : Avancé

Introduction

Historique des versions,

Comparaisons entre Vue 2 et Vue 3

Rappel sur les Single Files Components

Créer son application : comparaison entre Vue CLI et Vite

Découvrir la Composition API

Composition API vs Options API

Comprendre la fonction « setup » et le script setup

Gérer les données avec les hooks

Optimiser son code avec Vue 3

Réutiliser son code avec les directives personnalisées

Providers et injection de données entre les composants

Gérer le cache avec Keep Alive

Améliorer l’expérience utilisateur⋅trice

Gérer l’affichage des fenêtres de dialogue avec Teleport

Gérer le chargement de ses pages avec Suspense

Créer des transitions et animations entre les composants

Traduire ses pages avec l’internationalisation (i18n)

Gérer des cas particuliers

Les composants asynchrones

Les fonctions de rendu et JSX

Utilisation de VueJS en dehors d’une application dédiée : petite-vue,

Utiliser Typescript

Présentation de Typescript

Créer une application Vue avec Typescript

Intégrer Typescript dans une application existante

Atelier: Créer des composants typésTester son application

Les outils de test ( Jest, Cypress )

Tests unitaires : Jest, Vitest, Peeky

Tests e2e : Cypress, Nightwatch

Atelier: mettre en place des tests dans son application

Programme de Formation Angular : Initiation

Introduction

Présentation de l'environnement de développement NodeJS

Présenation de la CLI Angular

Rappel des normes EcmaScript

Créer un projet Angular à l'aide d'angular CLI

Atelier : Configurer un projet AngularTypeScript

Présentation de TypeScript

Les types de variables de TS

Le typage fort

Les interfaces de classe

Présentation des décorateurs

Présentation

La Syntaxe de base d'Angular

L'organisation en Module et Composant

Les décorateurs Angular

Le MVVM / MVW

Le One Way et Two Way Data Binding

L'opérateur "moustache"

La gestion des Events et l'objet $event

Les NgModel

Les variables de template

Atelier : Réaliser une TodoListRoutage

Le Module de Routage

Déclarer les routes d'un projet

Gérer les redirections

La route par défaut

Récupérer les paramètres d'url, les query-strings, etc

Limiter l'accès au route: Les guards

Routes imbriquées

Atelier : Mettre en place une application multi-vuesLes pipes

Présentation des pipes «|»

Utiliser le safeOperator «?.»

Importer des locales dans notre projet

Définir une locales par default

Utiliser les locales avec les filtres

Créer des pipes personnalisés

Les pipes pures et impures

Atelier: Créer un pipe personnaliséLes Directives

Différence entre directives d'attributs et structurelles

Les directives ngFor, ngIf, ngSwitch, ngClass, ngStyle

Utiliser les attributs ARIA (directive attr.*)

Créer une directive personnalisée

Transmettre des valeurs à une directive (@input)

Gérer les événements dans une directive

Atelier: Créer une directive personnaliséLes Formulaires

Présentation des formulaires

Les Templates Driven Form et Reactive Form

Gérer la validations des champs et du formulaire

Présentation des états d'un formulaire (ngControl)

Valider les formulaires (ngSubmit)

Créer des validateurs personnalisés

Atelier : Gestion des entrées utilisateursInjection de dépendances

Principes de DI

Configurer l'injecteur

Enregistrer des services dans un composant

Création de l'injecteur

Différents types de service: classe, valeur, fabrique...

Atelier : Architecturer notre application sous forme d'une organisation de servicesLe client HTTP

Principe de communication asynchrone

Fonctionnement des promesses et async/await

Présentation des Observables RxJS

Le Module HttpClientModule

Communiquer avec une API REST (http.get, http.post, etc)

Appliquer des fonctions de callback

Gestion des erreurs

Typage les données retournées

Atelier : Mettre en place un client d'API ReSTDéploiement

Les commandes de compilation

Les modes de compilation

Les compilations AOT et JIT

Gestion du base href

Les règles de réécriture

Atelier : Compiler un projet pour la publication

Programme de Formation Vue.js : Initiation

Découvrir Vue.js

Vue.js : présentation, principes

Comparaison avec d'autres frameworks JS : Angular, React,...

Initialisation d'un projet et interface en lignes de commande

Architecture d'une application Vue.js ; objet Vue

Styles d'API: Option / Composition

Interface de debug

Remise à niveau : Ecmascript5, NodeJS

Notions de composants, cycle de vie

Atelier : Installation de l'environnement, création d'une applicationCréer des composants

Structure et implémentation d'un composant

Gestion des événements

Imbrication de composants

Slots

Evénements personnalisés

Atelier : Organisation de l'application en composantsPeupler les vues

Méthodes d'écritures des templates : render methods, jsx

Composants fonctionnels

Gestion des animations et des des transitions

Atelier : Utilisation de différentes méthodes pour enrichir les vuesGérer la navigation dans l'application

Configuration des routes

Sécurité de l'application (filtres d'interceptions)

Gestion des transitions

Atelier : Utilisation de Vue router pour naviguer entre les pages.

Programme de Formation Vue.js : Approfondissement

Rappel Vue.js

Vue.js : présentation, principes, architecture

Utilisation de composants

Atelier : Installation de l'environnement, création ou import d'une applicationGérer l'état et stocker des données

Vuex : présentation, concepts de base.

Gestion des plugins

Stockage des données

Atelier : Utilisation de Vuex dans l'applicationInteragir avec une application back-end

Chargement et envoi de données de manière asynchrone

Interrogation d'un service web REST et traitement d'un flux JSON

Gestion des formulaires et validation des saisies

Introduction du data binding

Atelier : Interrogation de services web et exploitation du résultat.Améliorer son code

Mixins et plugins

Utilisation des Single File Components .vue.

Directives personnalisées

Optimisation des performances

Composables

Implémenter des tests unitaires

Atelier : optimisation du code applicatif et tests unitaires.

Programme de Formation Vue.js : Initiation + Approfondissement

Découvrir Vue.js

Vue.js : présentation, principes

Comparaison avec d'autres frameworks JS : Angular, React,...

Initialisation d'un projet et interface en lignes de commande

Architecture d'une application Vue.js ; objet Vue

Styles d'API: Option / Composition

Interface de debug

Remise à niveau : Ecmascript5, NodeJS

Notions de composants, cycle de vie

Atelier : Installation de l'environnement, création d'une applicationCréer des composants

Structure et implémentation d'un composant

Gestion des événements

Imbrication de composants

Slots

Evénements personnalisés

Atelier : Organisation de l'application en composantsPeupler les vues

Méthodes d'écritures des templates : render methods, jsx

Composants fonctionnels

Gestion des animations et des des transitions

Atelier : Utilisation de différentes méthodes pour enrichir les vuesGérer la navigation dans l'application

Configuration des routes

Sécurité de l'application (filtres d'interceptions)

Gestion des transitions

Atelier : Utilisation de Vue router pour naviguer entre les pages.Gérer l'état et stocker des données

Vuex : présentation, concepts de base.

Gestion des plugins

Stockage des données

Atelier : Utilisation de Vuex dans l'applicationInteragir avec une application back-end

Chargement et envoi de données de manière asynchrone

Interrogation d'un service web REST et traitement d'un flux JSON

Gestion des formulaires et validation des saisies

Introduction du data binding

Atelier : Interrogation de services web et exploitation du résultat.Améliorer son code

Mixins et plugins

Utilisation des Single File Components .vue.

Directives personnalisées

Optimisation des performances

Composables

Implémenter des tests unitaires

Atelier : optimisation du code applicatif et tests unitaires.