Votre partenaire formation 100% digital

AngularJS (v.1)

Augmentez votre productivité en développant des applications web riches grâce au framework AngularJS

  • Formateur(s)

    Cédric LE GALLO
  • Référence

    ANGJS1

  • Durée

    3 jours (21h)

  • Prix unitaire HT

    1650 €

Prochaines sessions

Prochaines sessions - AngularJS (v.1)
Date de début Ville Prix unitaire HT
20 février 2019 Paris 1650 € Réserver
25 septembre 2019 Paris 1650 € Réserver

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

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