Le document traite du framework JavaScript Angular, en mettant en avant sa facilité d'apprentissage et sa capacité à créer des applications web dynamiques. Il explique les concepts clés tels que le modèle MVC, la gestion du scope, et le data binding. De plus, il évoque les améliorations apportées par Angular 2, incluant des performances accrues et une nouvelle syntaxe pour les templates.

1. Digital performance.
MEET-UP SQLI
ANGULAR
24/09/2015

2. + Concepteur Multimédia chez SQLI depuis depuis 1
an grâce au premier Meet-up
+ Aime Drupal, Symfony, JavaScript, Node et
Angular
+ Twitter : @ivelfan
+ Github : @ivelfan
+ Drupal.org : @ivelfan
+ #sallysaitout
ANGULAR
FLAVIEN MOUTAWE
24/09/2015 2

3. + « AngularJS est ce que le navigateur Web aurait
du être s'il avait été conçu pour des applications
Web . »
ANGULAR
MISKO HEVERY, CREATEUR D’ANGULAR
24/09/2015 3

4. QU’EST-CE QUE C’EST ?
+ Un célèbre framework JavaScript propulsé par Google depuis 2012
+ Facile à apprendre même sans grande connaissance en JavaScript
+ Rapide à mettre en place dans une architecture Client / Server
+ Pratique pour créer des applications Web, des sites Web dynamiques et des applications mobiles
hybrides
+ Utile pour séparer les couches techniques :
› Template
› Logique cliente
› Logique serveur
+ Permet de mieux organiser son code et de faire des tests !!
ANGULAR
24/09/2015 4

5. + MVW
› MVC : Model View Controller
› MVVM : Model View View Model
+ Template et Data Binding ($scope)
+ Directives
+ Injection de dépendances
+ SPA (Single Page Application)
› Navigation coté client
› Indépendant du « back-end »
+ Interaction avec un « back-end » via des
requêtes Ajax ou des Web sockets
ANGULAR
SUPER HEROIC JAVASCRIPT FRAMEWORK
24/09/2015 5

6. ANGULAR
FACILE NON ?
24/09/2015 6
+ jQuery
+ Angular

7. + Le conteneur principal : le Module
+ Contrôleur : Fonction JavaScript
+ Modèle : Objet standard JavaScript
+ Scope
› Objet JavaScript permettant la liaison entre la
vue et le contrôleur
› Partage des propriétés du scope avec les
scopes enfant
+ Vue : HTML, Directives et « Expression » Angular
ANGULAR
MVC
24/09/2015 7
Module
Contrôleur
Scope
Modèle
Vue

8. ANGULAR
MVC ET SCOPE
24/09/2015 8

9. + Le partage des variables du scope parent vers le scope enfant est à sens unique.
+ Lorsque le modèle dans le scope enfant subit une modification, le modèle du scope parent n’est pas impacté
(à moins d’utiliser la propriété $parent).
ANGULAR
DANGER DU SCOPE
24/09/2015 9

10. ANGULAR
TEMPLATE & DATA BINDING
24/09/2015 10
+ Template
› Aucune manipulation explicite de DOM
› Transformation du DOM par la mécanique
Angular
› Extension de HTML via les directives
+ Data Binding Bidirectionnel
› Littéralement « Donnée liée »
› Liaison entre la vue et le « scope » du
Contrôleur
› La vue et le contrôleur sont synchronisés

11. + La mécanique d’Angular consiste à vérifier la valeur de chaque modèle du scope et de la comparer avec la
valeur existante.
Si elle est différente, il enclenche la modification du template.
ANGULAR
PROBLEME DU DATA BINDING
24/09/2015 11
+ La communauté Angular recommande
une utilisation maximum de 2000 ng-
model dans une application !

12. + Partitionner son code et les
templates
+ Créer des composants
réutilisables
+ Restriction :
› E pour « Element »
› A pour « Attribut »
» Ng-app
» Ng-model
» Ng-repeat
» ….
› M pour « Comment »
ANGULAR
DIRECTIVES
24/09/2015 12

13. + Singleton qui fournit des tâches spécifiques à l'application (ex: $scope, $http)
+ Créer des services réutilisables à travers le module
› Code réutilisable et modulaire
› Maintenabilité du code
› Tests localisés
ANGULAR
INJECTION DE DÉPENDANCES
24/09/2015 13

14. + Autrement appelé « Application web monopage »
est une application web accessible via une page
web unique qui permet de réduire le temps de
chargement et améliorer l’expérience utilisateur
(UX).
+ Angular nécessite une librairie supplémentaire
afin de profiter de la navigation : ui-route ou
angular-route
+ La navigation ne nécessite pas de rechargement
de page. L’intégralité des routes est gérée et
renseignée dans la configuration du module.
ANGULAR
SINGLE PAGE APPLICATION / NAVIGATION
24/09/2015 14

15. ANGULAR 2
BUILD INCREDIBLE APPLICATIONS
24/09/2015 15

16. + L’arrivée d’EcmaScript 6
+ L’arrivée d’ATScript : Hérité de TypeScript, un
preprocesseur JavaScript
+ Une meilleure expérience développeur
+ Performances accrues
› Des rendus de 3 à 5 fois plus rapides
› Précompilation des templates et réutilisation
› Vues mise en cache
› Meilleur gestion de la mémoire
ANGULAR 2
DES AMÉLIORATIONS NOTABLES
24/09/2015 16

17. + Component
› Controller + View
› Element on the screen
+ Directive Decorator
› Ajout de comportement au
HTML (ex : ng-show)
+ Template Syntax
› HTML as template (ex: ng-if,
ng-repeat)
ANGULAR 2
LA FIN DU CONCEPT « DIRECTIVE DEFINITION OBJECT »
24/09/2015 17

18. + Liaison des propriétés
ANGULAR 2
TEMPLATE SYNTAX
24/09/2015 18
+ Liaison des évènements

19. ANGULAR
LE COMPONENT
24/09/2015 19

20. ANGULAR
LE COMPONENT
24/09/2015 20

21. ANGULAR
LE COMPONENT
24/09/2015 21

22. NOUS RESPIRONS, PARLONS & VIVONS L’INNOVATION 24/7
LIKEZ & SUIVEZ-NOUS !
CONTACT
SQLI Enterprise France
268 Avenue du Président Wilson
93210 Saint-Denis La Plaine
Tel : +33 1 55 93 26 26
SQLI Enterprise Suisse
Chemin de la Rueyre 116 - 1020 Renens, VD
Tel : +41 (0)21 637 72 30
SQLI Enterprise Belgium
Kortrijksesteenweg 90 - 9830 Sint-Martens-Latem
Tel : +32 (0)9 329 83 80
24/09/2015 22

23. A propos de SQLI Enterprise : L’ESN du groupe SQLI est le partenaire de
référence de la transformation digitale des entreprises : coopération métiers/IT,
architectures du futur, expertises de pointe sur les technologies innovantes
sont mises au service des usages collaboratifs et de la digitalisation des
processus et services. SQLI Enterprise œuvre pour la création d’une véritable
force de frappe digitale : mise en place d’usines d’industrialisation digitale de
taille significative alliant qualité, innovation et flexibilité, conception de socles
cross-canal évolutifs, conseil et solutions sur le big data, les technologies
mobiles et les objets connectés.
Notre cabinet de conseil Alcyonix vous aide a résoudre une équation complexe :
manager et optimiser la digitalisation ! Ses activités s’articulent autour du
management de l’organisation (Amélioration de processus, gouvernance,
méthodes Lean et Agile, innovation, conduite et changement et formations) et
du système d’information (Alignement SI et métiers, assurance qualité,
gouvernance et budgets IT, portfolio management et conseil IT). Ses 1200
passionnés sont répartis en France (Paris, Lyon, Toulouse, Bordeaux, Rouen,
Nantes, Lille), en Suisse (Lausanne et Genève), en Belgique (Bruxelles), au
Luxembourg, aux Pays-Bas et au Maroc (Rabat et Oujda).
+ Immeuble le Pressensé
268 Avenue du Président Wilson
93210 La Plaine Saint-Denis
Tél: 01 55 93 26 00 / Fax: 01 55 93 26 01
+ www.sqli.com
+ Propriété intellectuelle
Le présent document, propriété exclusive de SQLI, est protégé par les
lois françaises et internationales de la propriété intellectuelle.
Toute reproduction ou représentationintégrale ou partielle de ce
document par quelque procédé et sur quelque support que ce soit est
strictementinterdite,sauf autorisation préalable, expresse et écrite de
SQLI.
A défaut d'autorisation, toute utilisation est constitutive du délit de
contrefaçon. Tout contrevenants'expose ainsi à des poursuites
judiciaires civiles et/ou pénales.
Seules sont tolérées, sans autorisation préalable, d'une part, les
reproductions strictement réservéesà l'usage privé du copiste et non
destinéesà une utilisation collective, et d'autre part, les courtes
citations justifiées par le caractère scientifique ou d'information de
l’œuvre dans laquelle elles sont incorporées (articles L.122-4, L.122-5
et L.335-2 du Code de la propriété intellectuelle).
GROUPE SQLI
24/09/2015 23

24. Digital that works
LIKEZ & SUIVEZ-NOUS !
WWW.SQLI-ENTERPRISE.COM