[wpms_breadcrumb reverse="0"]
Framework et PHP

Angular JS fondamentaux

Reference : ANGJS01
3 jours - 1665 € HT
Prochaines sessions

Nous consulter.

Angular JS fondamentaux
Objectifs

  • Appréhender la philosophie et le fonctionnement du framework AngularJS,
  • Développer une application Web avec AngularJS,
  • Maîtriser les impacts du choix d’une architecture incluant une application web riche.

Pré requis

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

Modalités pédagogiques

Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques

Public visé
Inscription

Programmes de Angular JS fondamentaux

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 navigateur
  • 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

É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