Formation Angular JS

D U RÉE D E L A F ORMATION : 3 JOURS

D ATE : 10 AU 12 JUIN 2014
P RIX : 1350 € HT

P U BL I C : C E T T E F O R M AT I O N E S T D E S T I N É E A U X C H E F S D E P R O J E T W E B ,
A R C H I T E C TE S T E C H N I Q U E S , D É V E L O P P E U RS F R O N T - END.

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG TEL:

1
+33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Description et Objectifs
La formation Angular JS permet d’acquérir les compétences et connaissances nécessaires pour développer
des applications Angular JS.

Prérequis
 Connaissance de HTML, CSS et bon niveau JavaScript (les notions fondamentales seront
abordées en rappels)

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

2
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours - Synthèse
1. Rappels & mise en route
2. Une application web sans manipuler le DOM
3. Travaux pratiques
4. Test et debug d'une application AngularJS
5. Design Patterns appliqués à une application web
6. Travaux Pratiques
7. Découpler pour mieux tester
8. Étendre et augmenter HTML pour qu'il réponde à vos besoins
9. Pratique
10. Perspectives, trucs & astuces

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

3
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours
1. Rappels & mise en route
◦ Rappels sur JavaScript : prototype, portée des variables, fonctions, contextes
◦ 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

2. 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 Angular JS ?
◦ Définition d'un contrôleur
◦ Association vue et contrôleur
◦ Comprendre les contextes Angular JS ($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

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

4
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours
3. Travaux pratiques
◦ Présentation de l'application fil rouge : ngDoodle
◦ Création d'un événement
◦ Noter ses disponibilités

4. 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 navigateur

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

5
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours
5. 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

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

6
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours
6. 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

7. Découpler pour mieux tester

◦ Test d'un service AngularJS
◦ Simuler le résultat d'une requête http

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

7
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Plan du cours
8. Étendre et augmenter HTML pour qu'il réponde à vos besoins
◦ Plongée dans le cœur 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

9. Pratique
◦ Création d'un fiche récapitulative
◦ Affichage calendaire

10. Perspectives, trucs & astuces

◦ Organisation du code selon la taille de votre application
◦ Bonnes pratiques
◦ Automatisation avec Grunt
◦ Perspectives

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

8
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15
Moyens Pédagogiques et encadrement
 Formation présentielle
 Postes informatiques individuels
 Vidéo projecteur
 Support de cours fourni à chaque stagiaire
 Alternance entre exposés théoriques, pédagogie interactive et pratique – Synthèse
 Formateur expert en informatique et nouvelles technologies, ayant plusieurs années d’expérience avec le langage Angular JS

Moyen d’évaluation et suivi

 Séance des questions/réponses à la fin de chaque module afin de vérifier les acquis des stagiaires
 Réalisation d’exercices et de Travaux Pratiques individuels

TECHNOLOGY AND STRATEGY – 3 AVENUE DE LA PAIX – 67000 STRASBOURG

9
TEL: +33(0)3 90 00 79 20 / FAX: +33(0)3 88 36 65 15