AngularJS

objectif Apprendre à programmer une application web avec AngularJS public concerné Développeurs et chefs de projet Web pré-requis Connaitre l'environnement web, le HTML et le langage de programmation Javascript
Programme
1ère demi-journée Introduction

• Présentations

• Prérequis

• Objectifs et déroulement de la formation

Présentation d'Angular

• Philosophie du framework, concept de SPA

• Le modèle MVVM

• La programmation déclarative

Modèle, Vue et Contrôleur

• Séparation Modèle et Vue

• Le $scope, le ViewModel

• Les expressions

• Data binding bi-directionnel

• Présentations des directives principales d'Angular

• Interactions entre la vue et le contrôleur
  • Exercices : Gestion des listes : ajout, suppression, et style

2ème demi-journée Fonctionnement d'Angular

• 'Compilation' des templates

• Mécanisme de watchers, dirty-checking

• $rootScope, $digest et $apply

• Notions principales : Directive, Contrôleur, Service & Filtre

• Modification du DOM par les directives

• Directives et sémantique de la vue

Modules et injection de dépendance

• Intérêts de l'injection de dépendances

• Déclaration et utilisation des modules

• Injection de dépendances dans le contrôleur

Services

• Différence entre service et contrôleur

• Séparer code métier et aspect cosmétique

• Déclaration d'un service

• Différence entre service et factory

• Déclaration d'une constante
  • Exercices : Séparation entre service et contrôleur, création du service, délégation de méthodes

3ème demi-journée Routeur

• Le module ng-route

• Déclaration des routes via routeProvider

• Routes paramétrées, $routeParams

• Le service $location

• Autres routeurs disponibles
  • Exercices : Création de routes, vue principale et vue détaillée, routes paramétrées

Filtres

• Filtres standards Angular

• Filtrage de listes dans le ng-repeat
  • Exercices : filtrage de listes : sélection, tri, tri interactif

• Créer son propre filtre
  • Exercices : Création d'un filtre personnalisé

Validation de formulaires

• La validation en HTML5

• Types et contraintes sur les champs

• Validation dynamique, en CSS et JS

• Validation avancée avec ngModelOption

• Validateurs personnalisés
  • Exercices : validation JS et CSS, conditions complexes

4ème demi-journée Échanges avec les serveurs

• Le service $http
  • Exercices : Récupération de la météo via une service web, mise en page des données, gestion des erreurs, sélection de la ville.

Interaction avec un serveur REST

• Accès aux services via $resource

• Interaction avec la ressource

• Configuration, gestion du cache

Gestion des données

• Les données locales

• Les données sur un serveur

• Stockage local

• Surveiller une variable

Importation de données

• Directives d’importation de fichier

• Gestion côté serveur

5ème demi-journée Gestion de l'authentification

• resolve dans le routeur

• Passage de tokens dans le header des requêtes

• Service d'authentification centralisé

• Gestion des droits

Tests

• Justification des tests

• Frameworks de tests

• Structure d’un test Jasmine

• Mock - objet simulacre
  • Exercices : Adaptation de tests unitaires à l'application météo

• Tests d’intégration
  • Exercices : Protactor et Karma

• Tester pragmatiquement

6ème demi-journée Directives personnalisées

• Déclaration d'une directive

• Types de directives

• Scope isolé ou non

• La fonction $link

• Directives avancées

• Transclusion

Promesses et asynchrone

• Programmation asynchrone

• Traitement des promesses

• Groupement de promesses

• Création de promesses

• Exemples de promesses

UI Router

• Configuration du routeur, états et routes hiérarchisées

• Configuration avancée

UI Bootstrap

• Principe et installation

• Directives principales
  • Exercices : Gestion des fenêtres modales

7ème demi-journée Structure d’un projet et outils

• Introduction à Node, Yeoman, Bower et Gulp

• Configuration d'un projet Yeoman

• Présentation de la structure du projet

• Outils de production : minification, compilation, imports automatiques

Démarrage du projet

• Déclaration de nouvelles routes

• Barre de navigation
  • Exercices : Ajout d'une route au projet, gestion de l'onglet courant dans la barre de navigation

TP : Gestion CRUD de données

• Connexion à un tableau REST

• Liste et vue détaillée d'un élément

• Difficultés liées à l'asynchrone

• Ajout d'un filtre de mise en forme

• Permettre la modification d'un élément

8ème demi-journée TP : Gestion CRUD de données (suite)

• Problème de validation avec le 3-way data binding

• Copie et mise à jour de l'élément

• Création d'un nouveobjet

• Intégration dans une web app

Conseils

• Bonnes pratiques

• Pièges à éviter

• Maîtriser ses outils

• Gestionnaire de version

• Conseils pour vos projets

Conclusion

• Bonnes pratiques

• Outils de debug

• Librairies utiles (animation, internationalisation)

• Liens et références

• Angular 2.0

Ouvertures

• Langages alternatifs (ES6, Typescript)

• Préparation pour une migration vers Angular 2

• Autres framworks alternatifs (React, Flux/Redux, Aurelia...)