[wpms_breadcrumb reverse="0"]
Framework et PHP

Angular JS fondamentaux

Reference : ANGJS01
3 jours - 1665 € HT
Prochaines sessions
    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