Comprendre Les Bases d'AngularJS Et Savoir Quand L'utiliser

16/06/2016 Comprendre
les bases d'angularJS et savoir quand l'utiliser
Groupe kaliop kaliop.fr Digital SOON By Kaliop Nous rejoindre A propos Webinar
100% WEB PAR KALIOP Le blog des experts Français
Search on the blog...
L’EKIP DIGITAL TECHNO WEBINAR ECOMMERCE TUTORIAUX EVENTS LABS
AGILITÉ
3 TECHNO
AngularJS est-il fait pour moi ?

Les bases
by Anthony Sendra janvier 13, 2014
SUIVEZ NOUS !
REJOIGNEZ-NOUS
INTRODUCTION
AngularJS fait partie de la nouvelle vague de

frameworks JavaScript, à l’instar de
Backbone.js et Ember.js, pour ne citer que les NE MANQUEZ AUCUN ARTICLE
plus connus. Il s’inscrit dans un mouvement
d’innovation côté front-end, pour notre plus Abonnez-vous pour recevoir toute notre
grand bonheur. actualité 100% web
Votre adresse mail
http://blog.kaliop.com/blog/2014/01/13/angularjspresentation/ 1/13
16/06/2016 Comprendre les bases d'angularJS et savoir quand l'utiliser
Votre adresse mail
Aujourd’hui, les sites où le JavaScript ne sert
qu’à faire disparaître une balise <p> ou
Je m'abonne
changer le style d’un <div> se font de plus en
plus rares et sont pour la plupart des sites
éditoriaux. On voit de plus en plus apparaitre
des sites web poussés, et certains ressemblent à
ILS FONT PARLER D'EUX
des applications bureau (enrichi par le cloud)
avec une ergonomie ultra simple et une grande
facilité de prise en main. Concours 1 an du blog 100% web
23 avril 2014
Heureusement, les besoins ont évolué, mais les
outils aussi. jQuery qui, je pense, parle à tout le
[À Gagner] 2 places pour le forum PHP 2015
monde, se présente plus sous la forme d’une
13 novembre 2015
libraire, alors qu’AngularJS est un vrai
framework : il va structurer votre code et
vous imposer une architecture. Kaliop ouvre son premier restaurant à
Londres : L’Open Bouchon
1 avril 2014
UN PEU D’HISTOIRE
AngularJS a été créé en 2009 par Miško Hevery
(son github : https://github.com/mhevery) alors SUR TWITTER
qu’il était sur un gros projet pour Google avec
énormément de code front-end (HTML + Tweets de @Kaliop
Javascript). Il a vite vu apparaître les limites
d’un code non structuré : un manque de
réutilisabilité, un manque d’extensibilité et un
manque de testabilité. Il a donc décidé de se
pencher un peu plus sur le framework
JavaScript qu’il faisait à titre privé pour essayer
de l’implémenter. Après 3 semaines de
refactorisation, l’application avait totalement
migré sur son framework et a vu son code
passer de 17000 lignes à 1500. La simplification
était tellement notoire et le résultat concluant
qu’il décida de continuer ce framework et d’en
faire un vrai projet.
LES CONCEPTS
À la différence de jQuery, AngularJS est un
véritable framework, il “impose” donc une
certaine structure dans le code. C’est un
framework MVC (Model View Controlleur) et
aussi parfois appelé un framework MVW
(Model View Wathever), votre logique doit être
englobée dans des contrôleurs et des directives.
L’application
Une application est une collection de

contrôleurs et de directives.
Dans notre HTML, on indique à quelle

application on veut relier notre portion de
DOM (une seule déclaration d’application par
page).
<html ngapp="kaliopApp">
</html>
Et dans notre JS, on crée notre application.
var myApp = angular.module('kaliopApp',
[]);
Le contrôleur
Le contrôleur va permettre d’écrire son code et

sa logique et il est relié à une partie du DOM, et
tous les contrôleurs sont reliés à une
application.
// On ajoute à notre application un
contrôleur MyCtrl
myApp.controller('MyCtrl',
function($scope) {
});
Pour rattacher ensuite ce contrôleur au DOM,

afin de lui donner un contexte d’exécution, on
va utiliser l’attribut (en vérité, la directive : voir
plus loin) ng-controller dans notre HTML :
<div ngcontroller="MyCtrl">
</div>
En résumé :
Dans le HTML, on définit un contrôleur à l’aide

de la directive ng-controller, et dans notre
fichier JS on définit un contrôleur grâce à la
fonction controller() de notre application.
Le scope
Le scope
Quand on définit un contrôleur, on a un scope

qui est défini.
Le scope est le modèle de notre application. Il

va contenir les variables et les fonctions qui
peuvent être utilisées.
myApp.controller('MyCtrl',
function($scope) {
$scope.name = 'Kaliop';
});
Le data binding bi-directionnel
Derrière ce nom barbare se cache un concept

très pratique : quand le scope dans le JS est
modifié, le scope dans le HTML l’est également
et vice-versa. C’est une synchronisation entre le
modèle et la vue.
Dans notre exemple précédent, on va donc

pouvoir avoir :
<p>Hello {{ name }}</p>
</div>
Ce qui va nous afficher un “Hello Kaliop”, car

dans le JS nous avons initialisé la variable
name de notre scope à “Kaliop”. Maintenant, si
on modifie cette variable dans le JS, la
modification va se reporter immédiatement
dans le HTML (la vue). Si on avait relié cette
variable name à un champ <input/> pour la
variable name à un champ <input/> pour la
modifier, la modification se serait également
reportée directement dans le modèle (et donc
récupérable dans le contrôleur).
<input type="text" ngmodel="name"
/>
<p>Hello {{ name }}</p>
</div>
Ici, on va dire à notre champ input qu’il est

relié à la variable name de notre scope (grâce à
la directive ng-model). Ainsi, quand on va
modifier sa valeur, le modèle va se mettre à
jour, et la vue va récupérer cette valeur : le
“Hello Kaliop” va donc se changer en “Hello”,
suivi de ce qu’on tape dans le champ input, tout
ça en direct et sans s’occuper de rien.
Ce que ça apporte concrètement : terminé les

sélecteurs CSS dans notre code JS, c’est Angular
qui s’occupe de la cohérence du modèle entre
la vue et le contrôleur, et ça, c’est une très
bonne nouvelle !
En résumé :
Le data-binding bi-directionnel permet une

synchronisation automatique entre le modèle
et la vue.
Les directives
On en a déjà parlé tout à l’heure ; les directives,

ces attributs HTML préfixés d’un ng (pour
celles de bases), vont permettre de rendre le
code extensible et modulable. C’est un
concept assez particulier que les directives : on
va avoir dans le HTML un identifiant sous la
forme d’un attribut, d’une balise HTML ou
encore d’une classe CSS et cet identifiant va
avoir un comportement spécifique défini dans
l’application, au niveau du JS.
Il en existe déjà beaucoup de prédéfinies. C’est

le cas de ng-model vu tout à l’heure ou encore
la directive ng-show qui va permettre
d’afficher ou non un élément suivant une
condition. On peut également en rajouter.
condition. On peut également en rajouter.
Grâce aux directives, on s’affranchit également
du test pour savoir si le DOM est prêt et on peut
également facilement utiliser des plugins
jQuery sans dépendance avec le CSS, car on
peut récupérer l’élément sur lequel on a placé
la directive.
Si vous ne vous en rendez pas vraiment

compte, les directives sont un atout énorme
dans ce framework. En plus de coder plus
proprement des dépendances entre notre
code et notre HTML (et parfois avec des plugins
jQuery), je l’ai déjà dit, elles sont modulables. Et
ça, c’est un véritable avantage, car les
développeurs peuvent les partager (voir les
liens en fin d’articles), et les réutiliser de projet
en projet.
On peut imaginer maintenant que, dans une

entreprise, on ait un regroupement de toutes
les directives développées sur tous les projets et
que les développeurs n’aient qu’à piocher
dedans pour éviter de réinventer la roue.
Pour une explication concrète avec des

exemples, voir
http://docs.angularjs.org/guide/directive
En résumé :
Les directives sont la liaison entre le DOM et le

contrôleur et permettent d’identifier un
élément afin que le contrôleur y applique sa
logique.
Les services
Les services sont des singletons injectés dans

notre application grâce à l’injection de
dépendance
http://fr.wikipedia.org/wiki/Injection_de_d%C3%A9pendances
Encore une fois, il existe des services de base et

sont tous préfixés d’un $ (oui, le scope est un
service dans le contrôleur de tout à l’heure)
mais on peut également en rajouter. Ces
services peuvent avoir plusieurs utilités,
comme le service $http qui va permettre
d’exécuter des requêtes AJAX ou encore
$compile, qui permet de digérer du HTML
fraîchement ajouté pour qu’Angular le prenne
fraîchement ajouté pour qu’Angular le prenne
en compte et parse les directives (liste des
services sur http://docs.angularjs.org/api/).
En résumé :
Les services sont injectés dans des contrôleurs,

dans des directives ou même dans d’autres
services grâce à l’injection de dépendances. Ils
ont des utilités diverses : du retour simple de
variable initialisé ailleurs, au traitement
complexe avec des fonctions. Les services
permettent un partage de fonctions et de
variables entre les contrôleurs, les directives, et
les services eux-mêmes.
Les routes
AngularJS est fourni avec un système de

routing, qui permet de définir pour un certain
pattern d’URL appelé, une certaine page à
charger en AJAX et dont le résultat doit être
rajouté dans une portion du DOM, défini grâce
à la directive ng-view. On peut également y
rattacher un contrôleur.
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/test, {
templateUrl: 'partials/test',
controller: 'TestCtrl'
})
}]);
Dans cet exemple on va rajouter une

configuration sur notre application et quand on
aura dans l’URL un appel sur /test, on devra
récupérer le résultat de la page “partials/test” et
le rattacher au contrôleur TestCtrl. Il nous suffit
ensuite de définir l’endroit où on veut
compléter le résultat récupéré.
<div ngview></div>
En résumé :
Le routing est très pratique, surtout pour des

Le routing est très pratique, surtout pour des
SPA (Single Page Application) et facilite
grandement la vie quand on ne veut pas
charger toute la page quand on change de
menu. A noter également que les directives
présentes dans le résultat seront également
automatiquement compilées.
CAS D’UTILISATION
Vous avez peu de code front end ?
Si vous avez très peu de JS, je ne pense pas que

se lancer dans l’apprentissage d’Angular soit
forcément une bonne idée, vous risquez en
plus de n’être confronté qu’à des problèmes
basiques et de ne pas l’utiliser correctement.
Vous avez déjà du code JavaScript ?
Ce n’est pas un vrai problème de refactorer son

existant. Étant donné qu’Angular est
structurant et découpe bien les différentes
couches, il est assez simple de s’y retrouver et
de savoir où placer son code dans les différents
contrôleurs et directives. (Pour un
apprentissage, il est quand même conseillé de
ne pas utiliser jQuery. Angular est vraiment
une autre forme de penser une application et il
ne faut pas utiliser Angular comme une
surcouche)
Vous devez utiliser des plugins externes

avec jQuery ?
Ce n’est pas du tout un souci. Angular n’est pas

là pour remplacer jQuery (il a d’ailleurs dans
son coeur un jQuery light) et il s’associe très
bien avec ses plugins, il permet de structurer
tout le code pas toujours propre et éparpillé
qu’on doit coder pour les utiliser tout ça grâce
aux directives.
Et la compatibilité avec les navigateurs ?
Probablement le point négatif suivant

l’utilisation qu’on en a. Angular a voulu miser
sur l’avenir et ne fonctionne pas sur les
versions IE inférieures à la 8 et vivote sur cette
version (n’est plus supporté dans la version 1.3
d’AngularJS). Heureusement pour nous,
l’utilisation d’IE 8 (et inférieur) tend à être

l’utilisation d’IE 8 (et inférieur) tend à être
marginale.
QUELQUES LIENS
L’un des autres avantages d’Angular, c’est qu’il
devient de plus en plus populaire et on trouve
un support et une documentation de qualité
que ça soit en livre ou sur le net. Voici quelques
références tous supports confondus :
http://egghead.io/ : Il propose de très

courtes vidéos (en anglais) sur les
nouvelles technologies front end. Très
efficace pour un apprentissage rapide des
bases (la partie gratuite est déjà très utile)
http://books.google.fr/books/about/AngularJS.html?
id=-PvAMgEACAAJ&redir_esc=y :
AngularJS, par Brad Green aux éditions
O’Reilly. Très bon livre (en anglais) écrit
par l’un des fondateurs d’Angular et
approuvé par Miško lui-même.
http://docs.angularjs.org/api/ : l’API
officielle. Quelques lacunes et pas toujours
bien expliqué, mais ils essayent de corriger
et on y trouve quand même tout (référence
toutes les directives de base, les services,
etc.)
http://www.frangular.com/ : des articles sur

les concepts. Assez poussé, très intéressant
et en français.
http://angular-ui.github.io/ : fournis des

modules très utiles avec des directives
efficaces, tout ça sans dépendances. Le
code est très intéressant à regarder, on
apprend plein de choses.
http://angular-ui.github.io/bootstrap/ : la
même chose que précédemment, mais
orienté pour le framework Bootstrap
De plus, le support sur stackoverflow est très

actif et réactif, ce qui est un point positif non
négligeable quand on est dans une impasse !
Kaliop LABS recrute des experts
Du guru au passionné, Kaliop LABS

Du guru au passionné, Kaliop LABS
rassemble des Défricheurs.
Vous vous sentez capable de tester de

nouvelles technologies et vous êtes fier de
participer au rayonnement des
communautés Open Source ?
Rejoignez nous !
Anthony Sendra
Lead Developer au sein
de Kaliop, je travaille
maintenant au Labs sur
un projet innovant.
Toujours à la recherche
de nouvelles
technologies et
passionné par le web,
j’essaye de tester le plus
possible les solutions qui
naissent tous les jours…
et ça prend du temps.
Partager :
 39 8  
Tags: AngularJS framework Javascript
open source
PREVIOUS ARTICLE NEXT ARTICLE

Veille digitale : Faire sa veille
le top de ce sur le CXM et
début d’année échanger pour
enrichir son
expérience
RELATED POSTS
RELATED POSTS
La Mieux Supports Kaliop Labs

KaliopTeam comprendre des développe
accueille le les webinars « une
Meetup évènements Choisir son solution
Symfony Javascript CMS : eZ open-
février 24, janvier 6, Publish vs source de
Drupal » back-end as
2016 2014
septembre a service.
Rejoignez
18, 2014
l’équipe !
juin 5, 2015
3 réponses à “AngularJS est-il fait pour moi ? Les

bases”
Charles-Edouard
« Maintenant, l’internaute veut des sites web
poussés qui ressemblent à des applications
bureau ». Sources?
14 janvier 2014 à 10 h 44 min

Répondre
Anthony Sendra
Désolé, la phrase a été mal
tournée.
Ce que j’entends par là, c’est
qu’en plus des sites (avec ou
sans beaucoup de
fonctionnement JavaScript) on
voit énormément de sites qui
ressemblent de plus en plus à
des applications. Il suffit de
regarder les produits sortis par
Google, où dans notre domaine :
les éditeurs en ligne, la suite
Atlassian, les éditeurs photos en
lignes, etc.

Répondre
Charles-Edouard
D’où mon commentaire… L’article est très
intéressant mais pour avoir connu l’époque où
les graphistes nous apprenaient notre métier à
grand coup de « Flash c’est génial, la preuve…
Tous les sites sont en Flash », je ne sais pas
trop comment réagir actuellement à des
affirmations telles que « Le full-javascript c’est
cool, la preuve: Google en met partout ».
Cela dit, merci pour ce tutoriel fort intéressant

qui m’a permis d’avoir un aperçu de ce
qui m’a permis d’avoir un aperçu de ce
framework (que je ne connaissais pas, puisque
j’utilise BackboneJS)

Répondre
Laisser un commentaire
Nom (obligatoire)
Adresse de messagerie (ne sera pas publiée)

(obligatoire)
Site web
Soumettre le commentaire
Prévenez-moi de tous les nouveaux

commentaires par email.
Prévenez-moi de tous les nouveaux articles par
email.
CATÉGORIES SUIVEZ-NOUS FACEBOOK
L’ekip L’actualité de Kaliop sur

Twitter
Digital
Les slides des conférences sur
Techno Slideshare
Ecommerce Le réseau professionnel sur

LinkdIN
Tutoriaux
La communauté via Google
Events
Abonnez-vous à notre
LABS
newsletter
Agilité
Pearltrees : échangeons nos
liens
liens
Le Pinterest du pôle digital
Kaliop en live sur Instagram
Revue de Presse by Kaliop sur

Scoop.it
Le flux RSS du blog
© Copyright 2016 100% web par Kaliop. Newsroom Theme by WPBandit.
En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies Poursuivre
la
pour vous proposer des services et offres adaptés à vos centres d’intérêts En savoir + navigation

Comprendre Les Bases d'AngularJS Et Savoir Quand L'utiliser

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Comprendre Les Bases d'AngularJS Et Savoir Quand L'utiliser

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

16/06/2016 Comprendre

100% WEB PAR KALIOP Le blog des experts Français

Search on the blog...

L’EKIP DIGITAL TECHNO WEBINAR ECOMMERCE TUTORIAUX EVENTS LABS

AngularJS est-il fait pour moi ?

AngularJS fait partie de la nouvelle vague de

Une application est une collection de

Dans notre HTML, on indique à quelle

Et dans notre JS, on crée notre application.

Le contrôleur va permettre d’écrire son code et

Pour rattacher ensuite ce contrôleur au DOM,

Dans le HTML, on définit un contrôleur à l’aide

Quand on définit un contrôleur, on a un scope

Le scope est le modèle de notre application. Il

Le data binding bi-directionnel

Derrière ce nom barbare se cache un concept

Dans notre exemple précédent, on va donc

Ce qui va nous afficher un “Hello Kaliop”, car

Ici, on va dire à notre champ input qu’il est

Ce que ça apporte concrètement : terminé les

Le data-binding bi-directionnel permet une

On en a déjà parlé tout à l’heure ; les directives,

Il en existe déjà beaucoup de prédéfinies. C’est

Si vous ne vous en rendez pas vraiment

On peut imaginer maintenant que, dans une

Pour une explication concrète avec des

Les directives sont la liaison entre le DOM et le

Les services sont des singletons injectés dans

Encore une fois, il existe des services de base et

Les services sont injectés dans des contrôleurs,

AngularJS est fourni avec un système de

Dans cet exemple on va rajouter une

Le routing est très pratique, surtout pour des

Si vous avez très peu de JS, je ne pense pas que

Vous avez déjà du code JavaScript ?

Ce n’est pas un vrai problème de refactorer son

Vous devez utiliser des plugins externes

Ce n’est pas du tout un souci. Angular n’est pas

Et la compatibilité avec les navigateurs ?

Probablement le point négatif suivant

l’utilisation d’IE 8 (et inférieur) tend à être

http://egghead.io/ : Il propose de très

http://www.frangular.com/ : des articles sur

http://angular-ui.github.io/ : fournis des

De plus, le support sur stackoverflow est très

Kaliop LABS recrute des experts

Du guru au passionné, Kaliop LABS

Vous vous sentez capable de tester de

Tags: AngularJS framework Javascript

PREVIOUS ARTICLE NEXT ARTICLE

La Mieux Supports Kaliop Labs

3 réponses à “AngularJS est-il fait pour moi ? Les

14 janvier 2014 à 10 h 44 min

14 janvier 2014 à 11 h 04 min

Cela dit, merci pour ce tutoriel fort intéressant

16 janvier 2014 à 0 h 58 min

Adresse de messagerie (ne sera pas publiée)

Prévenez-moi de tous les nouveaux

CATÉGORIES SUIVEZ-NOUS FACEBOOK

L’ekip L’actualité de Kaliop sur

Ecommerce Le réseau professionnel sur

Le Pinterest du pôle digital