Imprimer le programme 
Télécharger le programme en PDF -
Formateur(s)
Cédric LE GALLO -
Référence
ANGJS1
-
Durée
3 jours (21h)
-
Prix unitaire HT
1650 €
Prochaines sessions
Description
AngularJS 1 est un framework JavaScript maintenu par Google, qui tire parti des nouvelles fonctionnalités apportées par HTML5 et en étend les possibilités. En découplant la manipulation du DOM de la logique métier, et grâce à une organisation très modulaire, AngularJS permet de concevoir des applications web riches.
Cette formation très complète sur AngularJS 1, vous permettra de maîtriser les bases du framework au travers d’une série d’exercices pratiques, mettant en avant une programmation par composant, afin de permettre une transition efficace vers Angular 2+.
Objectifs pédagogiques
- Appréhender la philosophie et le fonctionnement du framework AngularJS 1
- Développer une application Web avec AngularJS 1
- Maîtriser les impacts du choix d’une architecture incluant une application web riche
Public cible
Chefs de projet Web, Architectes techniques, Développeurs front-end
Pré-requis
Connaissance de HTML, CSS et bon niveau JavaScript (les notions fondamentales seront abordées en rappels)
Modalités d’évaluation
L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.
Méthodes pédagogiques
50% théorie / 50% pratique
Dernière mise à jour : Décembre 2022
Nos formations sont accessibles aux personnes en situation de handicap, pour plus d’informations, c’est ICI
Programme de la formation
Rappels & mise en route
- Rappels sur JavaScript : prototype, portée des variables, fonctions, contextes, etc.
- Rappels HTML5 : balises sémantiques, forms
- Présentation du design pattern MVVM
- Définition d’une application « single page »
- Déclaratif vs impératif
- Installation d’un environnement de travail : node.js, éditeur, navigateur
Une application web sans manipuler le DOM
- Data binding bi-directionnel
- La gestion des vues et le moteur de template
- Qu’est-ce qu’une expression AngularJS ?
- Définition d’un contrôleur
- Association vue et contrôleur
- Comprendre les contextes AngularJS ($scope)
- Appréhender les événements utilisateurs
- Formulaire : interaction et validation
- Utilisation des filtres (dans la vue, dans le contrôleur et combinaison)
- Écriture d’un filtre
Travaux pratiques
- Présentation de l’application fil rouge : ngDoodle
- Création d’un événement
- Noter ses disponibilités
Test et debug d’une application AngularJS
- Environnement de test
- Choix d’un framework de test
- Tests unitaires et karma
- Batarang : voir fonctionner AngularJS depuis le navigateurBonnes pratiques de développement AngularJS
Design Patterns appliqués à une application web
- Notion de routing
- Configuration avec $routeProvider
- Route et gestion de l’historique de navigation
- Initialisation avant routage
- Découplage grâce aux services
- Injection de dépendances
- Présentation ou rappel sur les promesses
- Les promesses avec Angular JS
- Des services « standard » $http $resource : utilisation d’une API REST
- Créer ses propres services : plusieurs façon d’y arriver
Travaux Pratiques
- Re-Organisation de notre application (Refactoring time)
- Création, utilisation et affichage
- Création d’un service
- Communication avec un serveur via une API REST
Découpler pour mieux tester
- Test d’un service AngularJS
- Simuler le résultat d’une requête http
Techniques avancées de AngularJS
Étendre et augmenter HTML pour qu’il réponde à vos besoins
- Plongée dans le coeur de Angular JS : fonctionnement interne
- AngularJS pour les pros : les directives
- Fonctionnement des directives
- Directive et événements utilisateurs
- Intégration d’un contrôleur dans une directive
Pratique
- Création d’un fiche récapitulative
- Affichage calendaire
Trucs & astuces
- Organisation du code selon la taille de votre application
- Bonnes pratiques
- Automatisation avec Grunt
AngularJS 2.0
- Présentation générale
- Concepts et langages
- Impacts et approche vis à vis de cette nouvelle version