AngularJS

Digital performance.
ANGULARJS
OUADIE LAHDIOUI OLAHDIOUI@SQLI.COM 23 AVRIL 2015

PROGRAMME DE LA FORMATION
+ Introduction
+ Cycle de vie
+ Principes généraux
+ Modèle, vues et contrôleurs
+ Les modules
+ Les directives et les filtres
+ Cycles de vie et scopes
+ Les services Angular
+ AJAX et REST
+ Aller plus loin
+ Démonstration
SOMMAIRE
© SQLI Enterprise – SQLI GROUP | 2015 2

+ Architecture et fonctionnalités d'AngularJS
+ Qu'est-ce qu'une architecture orientée REST ?
1INTRODUCTION

+ Un framework JavaScript développé par une équipe Google
+ Permet d’implémenter côté front-end le pattern MVW (MV*)
+ Apporte aux applications web côté client les services traditionnellement apportés côté
serveur :
ARCHITECTURE ET FONCTIONNALITÉS D'ANGULARJS
+ lnjection de dépendances
+ MVC
+ Tests unitaires
+ Data-binding bidirectionnel
+ Routing
+ le templating

+ Representational State Transfer
+ REST n’est pas un protocole ou un format, c’est un style d’architecture qui repose sur le
protocole HTTP
+ Principes :
ARCHITECTURE ORIENTÉE REST
+ L’URI est important : connaître l’URI doit suffire pour nommer et identifier une ressource
+ HTTP fournit toutes les opérations nécessaires (HEAD, GET, POST, PUT, DELETE, OPTION)
+ Exemple d’URLs REST :
+ Créer un nouveu client : POST http://www.example.com/customers
+ Récupérer un client par identifiant : GET http://www.example.com/customers/33245
+ Le même URL peut être utilisé avec
les méthodes PUT et DELETE

ARCHITECTURE ORIENTÉE REST
+ Hybris SAP
+ JAVA 
+ HTML, AngularJS et CSS
+ Service Web REST

+ Pattern MV*
+ Data-binding bi-directionnel
+ Avantages et inconvénients
+ Installation et découverte
+ Application « Hello world! »
2PRINCIPES GÉNÉRAUX

+ Model-View-Whatever (whatever works for you)
+ Model: représente les données reçues du serveur
+ View: contient l’ensemble des vues affichées à l’utilisateur
+ Controller: contient la logique de l’application
PATTERN MV*
+ MVC + MVVM

1/2
DATA-BINDING BI-DIRECTIONNEL
+ Nombreux systèmes de templating : String statique + données = text ajouté au DOM par innerHTML
+ Tout changement sur une donnée nécessite un nouveau merge

2/2
DATA-BINDING BI-DIRECTIONNEL

AVANTAGES ET INCONVÉNIENTS
Avantages inconvénients
Two-way data binding Connaissances javaScript indispensables
Pattern du monde java Philosophie à appréhender
Testabilité Composants graphiques externes
Sponsorisé par Google

+ Rendez-vous sur www.angularjs.org
INSTALLATION ET DÉCOUVERTE
angular.min.js

APPLICATION « HELLO WORLD! »
+ Directive démarquant une application AngularJS
+ Liaison du champs input au modèle+ Evaluation dynamique du modèle

+ Le modèle
+ Les vues : templates
+ Les vues : expression
+ Les vues : directives
+ Les vues : filtres
+ Les contrôleurs : fonctionnement
+ Les contrôleurs : le $scope
3MODÈLE, VUES ET CONTRÔLEURS

+ Structure de données représentant une entité de l'application
+ Généralement transmise en JSON
LE MODÈLE
{
"users" : [{
"name": "Joe",
"id": "82047392"
},{
"name": "John",
"id": "65198013"
}]
}

1/4
+ Ce que voit l'utilisateur final
+ AngularJS, intègre nativement un moteur de template
+ Template : fichier HTML enrichi de certains attributs et balises propres à AngularJS
LES VUES : TEMPLATES

+ Le langage d'expressions d'AngularJS est utiliser pour le binding
+ Des expressions valides :
LES VUES : EXPRESSION
+ Le code mis dans les vues :
Difficilement gérable
Ne peut pas faire l'objet de tests unitaires
2/4

3/4
+ Une directive = Flag placé dans la vue
+ Les navigateurs ne reconnaissent pas ces flags, c’est à angularjs de les traiter
+ Balise ou attributs HTML, mais aussi classes CSS et commentaires HTML
+ Permet la création de composants réutilisables
LES VUES : DIRECTIVES

+ Filtre ou modifie l’affichage des données évaluées
+ Syntaxe inspirée de linux : caractère pie « | »
+ Filtres pré-inclus : currency, date, json, lowercase, number, limitTo…
LES VUES : FILTRES
4/4

+ Le contrôleur est une fonction javascript liée à la vue par la directive ng-controller
LES CONTRÔLEURS : FONCTIONNEMENT
1/2

2/2
+ Un scope, c'est un domaine dans lequel des variables peuvent exister
+ La racine de tous les scopes est le $rootScope
+ Un objet javaScript
+ Créé par les directives ng-app, ng-controler et ng-repeat
LES CONTRÔLEURS : LE $SCOPE

+ Création et configuration
+ Injection de dépendances
4LES MODULES

+ Permet d’encapsuler l’ensemble des éléments d’une application AngularJS
+ Un module permet de déclarer : directives, controleurs, filtres, constantes et services
+ Pour créer un module :
CRÉATION ET CONFIGURATION
+ L’affectation d’une valeur à la directive ngApp implique le chargement du module déclaré avec cet identifiant
+ Créer le module demoApp

+ Basée sur le service $injector :
+ L’injection des services dans les contrôleurs :
+ Automatiquement par leur nom :
INJECTION DE DÉPENDANCES
+ Explicite :
+ Bénéfices :
+ Découplage
+ Séparation des préoccupations

+ Convention de nommage, écriture normalisée
+ Types de directives
+ Créer ses propres directives
+ Créer ses propres filtres
5
LES DIRECTIVES ET LES FILTRES

+ AngularJS normalise le nom de la derictive en camelCase
+ une directive dont le nom est myProduct pourra être utilisée avec les différentes
orthographes suivantes :
CONVENTION DE NOMMAGE, ÉCRITURE NORMALISÉE
+ <my-product>
+ <data-my-product>
+ <x-my-product>
+ <my:product>
+ <my_product>

+ Il existe 4 types de directive :
TYPES DE DIRECTIVES
+ Directive de type Element :
+ Directive de type Attribut :
+ Directive de type Classe :
+ Directive de type Commentaire :

+ Restrict :
+ E = Element
+ A = Attribute
+ C = Classe
+ M = Comment
CRÉER SES PROPRES DIRECTIVES

CRÉER SES PROPRES FILTRES
+ Le nom du filtre
+ u2713 -> ✓
+ u2718 -> ✘
+ Création du filtre dans le module myApp :
+ L’application du filtrer sur le vue :

+ Présentation du fonctionnement d’AngularJS
+ L’arbre des scopes
6
CYCLES DE VIE ET SCOPES

+ Le navigateur charge le HTML et le transforme en DOM.
+ AngularJS attend l’évènement DOMContentLoaded, puis cherche une directive nommée
ng-app qui définit les frontières de l’application.
+ Le service d’injection ($injector) est utilisé pour créer le $rootScope et le service $compile
qui va compiler le DOM et le lier au $rootScope.
+ Les éléments dynamiques tels que les expressions sont alors rendus
PRÉSENTATION DU FONCTIONNEMENT D’ANGULARJS

+ Les scopes : des objets qui servent de contexte d'évaluation des expressions contenues
dans les templates
L’ARBRE DES SCOPES

+ Les services natifs
+ Les values et constant
+ Factory, Service et Provider
7LES SERVICES ANGULARJS

LES SERVICES NATIFS
+ Singletons nommés qui vont fournir une tâche précise
+ Ils peuvent être ensuite injectés dans un contrôleur ou un autre service
+ Chargés uniquement si besoin (lazy load)
+ AngularJS propose plusieurs méthodes pour créer un service :
+ module.provider()
+ module.service()
+ module.factory()
+ module.value()
+ module.constant()
1/2

+ $document :
LES SERVICES NATIFS
+ $location :
+ $log :
2/2

1/3
+ Techniquement, un service, une factory ou un provider, ça sert à la même chose
+ Un service est une manière plus facile d’écrire une factory, qui est une manière plus
simple d’écrire un provider
+ Provider :
FACTORY, SERVICE ET PROVIDER
+ La manière la plus configurable de créer un service
+ Son rôle principl, c’est de créer et mettre à disposition un objet

2/3
+ Factory :
+ Un raccourci pour écrire un provider
+ Pas de méthode $get à écrire

3/3
+ Service :
+ La fonction va être utilisée directement (avec new) pour créer l’objet
+ Pas besoin de return, on attache tout à this
+ Le choix entre une factory et un service est vraiment une question de goût

1/3
+ Plus simplifiée que les service et factory, car son second paramètre est directement
l'instance du service à publier
+ il ne peut pas bénéficier d'injection d'autres services
+ AngularJS créé automatiquement un provider, mais qui ne fera que renvoyer l'instance
préexistante du service
LES VALUES ET CONSTANT
+ value:

2/3
+ Comme value, l'instance du service est un objet existant avant l'appel de la méthode
constant
+ La méthode constant enregistre aussi cet objet comme étant un provider, sous le même
nom que le service donc sans le suffixe 'Provider
LES VALUES ET CONSTANT
+ Constant :

3/3

+ Le service « $http »
+ Le service « $resource »
+ L’API de promise
8AJAX ET REST

+ un service bas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP
+ $http.get : une requete HTTP de type GET
+ $http.head : une requete HTTP de type HEAD
+ $http.post : une requete HTTP de type POST
+ $http.put : une requete HTTP de type PUT
+ $http.jsonp : une requete HTTP avec JSONP comme format de retour
LE SERVICE « $HTTP »

+ Un service haut niveau dédié à l’appel d’API REST
+ La ressource propose les méthodes get(), query(), save(), et delete()
+ $resource n’est pas inclus par défaut dans le framwork AngularJS
LE SERVICE « $RESOURCE »

+ Une promise : un objet représentant le résultat futur d’une action exécutée de manière
asynchrone
+ L’API de promise utilisée dans AngularJS par le biais de ses services : $http, $resource …
L’API DE PROMISE
+ Les services $http et $resource exposent des fonctions supplémentaires plus pratiques :

+ Quelques directives AngularJS
+ SPA (Single Page Application)
+ Bonnes pratiques
+ Outils de debug : ng-instpector, Batarang
9ALLER PLUS LOIN

BINDING
+ Ng-app
+ Ng-controller
QUELQUES DIRECTIVES ANGULARJS
+ Ng-disabled
+ Ng-hide
+ Ng-show
+ Ng-repeat
+ Ng-switch
+ Ng-change
+ Ng-checked
+ Ng-click
+ Ng-href
+ Ng-selected
+ Ng-minlength
+ Ng-maxlength
+ Ng-required
+ Ng-list
+ Ng-option
+ Ng-submit
TEMPLATE OPÉRATION FORMULAIREAPPLICATION
+ Ng-init
+ Ng-bind
+ Ng-model
+ Ng-style

+ Une application web accessible via une page web unique afin d’éviter le chargement d’une
nouvelle page à chaque action demandée
+ Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page
mais le contenu est modifié au fur et à mesure selon les requêtes
+ Configurer l’affichage des différentes pages :
+ Définir les routes :
SPA (SINGLE PAGE APPLICATION)
+ Définir l’endroit où se “rendra” la vue :

+ Avant d’utiliser une méthode fournie par jQuery, demandez vous toujours si AngularJS ne
propose pas une solution.
+ Il faut préférer les directives AngularJS au directives HTML :
BONNES PRATIQUES
+ Il faut toujours utiliser « track by » dans les directive ngRepeat :
+ Ne pas oublier le principe SRP au moment de création des services
+ Single Responsibility

BONNES PRATIQUES
+ Un unique contrôleur pour toute l’application
+ Code dupliqué dans les différents contrôleur
+ Manipulation directe du DOM en dehors des directives
+ Code complexe dans les expressions et non dans le contrôleur
+ Je met un gros conteneur avec tout dedans et tout le monde y accède
+ Non respect des bonnes pratiques :

+ ng-inspector : un plugin chrome pour étudier les scopes AngularJS, il affiche les scopes
sous forme arborescente.
+ Batarang : un plugin chrome pour faciliter le debuggage des applications.
OUTILS DE DEBUG
ng-inspector Batarang

+ AngularJS & Accélérateur B2B Hybris (PowerTools)
10DÉMONSTRATION

MERCI POUR VOTRE ATTENTION

AngularJS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à AngularJS

Similaire à AngularJS (20)

Plus de Ouadie LAHDIOUI

Plus de Ouadie LAHDIOUI (6)

AngularJS