Programme de cours AngularJS 1.4

Animée par Charles Jacquin

Prérequis :

  • Javascript

Logiciel à installer :

Durée : 3 jours

Module 1

module optionnel

Rappels Javascript

  • Les fonctions
  • Les variables
  • Les objets
  • Le prototypage
  • AJAX
  • Rappels HTML5
  • Rapide présentation d' ECMA6

Module 2

AngularJS in a nutshell (core)

 

  • Introduction
  • Etats des lieux du marché
  • Etats des lieux technique
  • Le data-binding
  • Tour d'horizons des principaux composants natifs
  • Le $scope et le $rootScope
  • Les méthodes digest et apply
  • Les méthodes watch et watchGroup
  • Design patterns

Module 3

Environnement de developpement

 

  • Présentation de Webstorm (IDE )
  • Présentation de GIT
  • Présentation de NodeJS et npm
  • Présentation et installation de bower
  • Comparatif Gulp vs Grunt
  • Présentation et installation de gulp
  • Présentation et mise en place de webpack
  • Récupération des sources de l'exercice fil rouge via git

Module 4

Les composants du framework

 

  • Présentation des modules
  • Présentation des controllers
  • Présentation des services
  • Présentation des directives

Module 5

module optionnel

AngularJS et Material Design

 

  • Présentation des services de la librairie
  • Présentation des directives de la librairie
  • Exemples d'intégration

Module 6

Single Page Application et ui-router

  • Présentation du concept de single page application
  • Comparatif entre le routeur officiel et ui-router
  • Présentation de la librairie ui-router

Module 7

Validation de formulaires

  • Présentation des validations de formualires HTML5
  • Intégration de ce système de validation dans AngularJS
  • Présentation de la librairie ng-messages
  • Créer ses propres validateurs (synchrone ou asynchrone)

Module 8

Les services

  • Présentation du rôle des services
  • Présentation des services natifs du framework : 
    • $q
    • $http
  • Créer ses propres services
  • Design patterns

Exercice :

Écrire un service qui effectue des appels http vers le web-service rotten-tomatoes (base de données de films).

 

Faire appeler ce service par un contrôleur et afficher les résultats dans une vue.

Module 9

Gestion du modèle

  • AngularJS et le modèle
  • Rappel sur les web-services REST
  • Rappel sur les bases de données locales
  • Comparatif de trois librairies :
    • $resource
    • restangular
    • js-data-angular

Exercice :

Avec le service $http, écrire un service CRUD qui permette de manipuler une ressource.

 

Puis faire la même chose avec js-data-angular.

 

En tirer des conclusions.

Module 10

Créer ses propres directives

  • AngularJS et la manipulation du DOM
  • AngularJS et jQuery
  • Tour d'horizon de jqLite
  • Les differents paramètres : 
    • controller et controllerAs
    • template et templateUrl
    • replace
    • link et compile
  • Isoler le scope
  • Des composants complexes avec require

Exercice :

 

Réalisation d'un module contenant deux directives et un service permettant de reproduire le "collapse" de "bootstrap" et intégration dans le projet fil rouge.

Réalisation d'une directive permettant de mettre en place un scroll infini (pagination) et intégration dans le projet fil rouge.

Module 11

module optionnel

Modules complémentaires

  • Animations CSS3 avec ngAnimate
  • Les surfaces tactiles avec ngTouch
  • La sécurité avec ngSanitize
  • L'authentification avec Satellizr
  • Internationalisation avec I18n
  • Intégration de Bootstrap
  • Une application mobile avec ionicframework

Module 12

Tester son application

  • Tests unitaires avec Karma ;
  • Tests e2e avec Protractor ;
  • Présentation du module angularMock ;
  • Mocker ses propres services ;

Exercice : Ecrire un test unitaire utilisant  $httpBackend mocké.