03/03/2016
Angular est un framework JavaScript front end qui permet de réaliser une application très fluide (basé sur l'AJAX). Ce comportement est appelé SPA pour Single Page Application, ce système est particulièrement appréciable sur mobile et donne une sensation de fluidité générale. Angular est un framework développé par les équipe de Google, et repose sur une architecture MVC (Modèle Vue Controller) c'est à dire que les elements d'une application angular sont organisés par "rôle".
Le modèle a pour objectif de récupérer des données, le controller lui fera des traitements sur ces données (c’est l’interface) et pour finir la vue s’occupera seulement de l’affichage. C’est cette séparation des tâches qui permet à notre application d’être plus facilement évolutive et maintenable.
Plongeons dans le vif du sujet :
La base : interaction HTML / AJAX / les directives
Une directive avec Angular.js est marker sur un élément HTML qui fait référence à un code JavaScript.
En fait Angular permet de lier facilement du JavaScript avec du HTML. C’est ce qui donne de super pouvoirs à nos éléments HTML
Petit exemple pour vous montrer comment angular lie du code JavaScript avec du html.
Voilà notre controller pour sa partie HTML
<!DOCTYPE html>
<html>
<body ng-controller="StoreController">
<!-- alert Hello World -->
</body>
</html>
Voilà notre controller pour sa partie JavaScript
function StoreController(){
alert('Hello World');
}
Démarer avec angular
Pour commencer, insérez le script d’Angular dans votre page :
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
Lorsque vous aurez mis en place Angular, la première chose à faire est de déclarer votre application.
Dans notre JavaScript :
var app = angular.module('store',[]);
Dans notre HTML
<!DOCTYPE html>
<html>
<body ng-app="store">
</body>
</html>
Les expressions
Les expressions avec Angular.js permettre d’insérer des valeurs dynamiques dans notre html. Ce sont un peu comme des variables. Nous pouvons même faire des opérations avec
<p>J'ai {{ 20 + 8 }} ans</p>
L’utilisation des accolades indique à Angular.js d’interpréter ces instructions. Ici angular affichera 28.
Les controllers
Les controllers nous permettent d’effectuer des opérations sur des données et les renvoyer dans notre page.
Exemple d’un controller
Voilà les infos que nous voulons afficher dans notre page (un simple objet JS)
var gem = {
name : 'Dodecahedron',
price: 2.95,
description : " ... "
}
Comment pouvons-nous transférer ces infos dans notre page ? Pour le faire, nous avons justement besoin d’un controller. Les controller sont là où nous définissions le comportement de notre application en définissant des fonctions et des valeurs.
Reprenons notre exemple de code :
(function(){
var app = angular.module('store',[]);
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name : 'Dodecahedron',
price: 2.95,
description : " Lorem ipsum dolor sit amet, consectetur adipisicing eli "
}
})();
Observons notre code, nous pouvons voir que nous sommes dans une closure, c’est une bonne pratique sur Angular et moi j’aime les bonnes pratiques 🙂
Vous remarquez aussi que le nom de notre controller (ici StoreController ) commence par une majuscule, c’est aussi une bonne pratique sur Angular.
Ensuite nous créons une propriété (this.product)à notre controller qui n’est autre que l’objet avec lequel nous pourrons communiquer dans notre page.
Ici nous assignons une valeur à notre propriété product, un simple objet contenant quelques données que nous pourrons récupérer dans notre page HTML.
Dans tous les exemples qui vont suivre, nous prendrons comme exemple un magasin qui souhaiterait vendre des produits et afficher des informations relatives à la vente de ceux-ci.
Comment afficher le contenu de notre controller dans notre page ?
Maintenant que nous avons mis en place notre controller nous aimerions bien récupérer les infos qu’il contient dans notre page. Mais comment faire ? En fait il faut que nous attachions notre controller à un élément HTML…
Pour ce faire nous devons rajouter un attribut (une directive) à notre balise HTML, l’attribut ng-controller= » »
<div ng-controller="StoreController as store">
<h1> {{store.product.name}}</h1>
<h2> {{store.product.price}}</h2>
<p> {{store.product.description}} </p>
</div>
Nous pouvons spécifier un alias avec « as » qui fait référence à notre controller
StoreController as store
Il est important de comprendre qu’il n’est pas possible d’accéder aux propriétés de notre controller en dehors de notre élément contenant la directive ng-controller associée
En effet si vous tentez de faire :
<div ng-controller="StoreController as store">
</div>
{{store.product.name}}
Cela ne fonctionnera tout simplement pas…
Les directives d’Angular.js
Imaginons que dans notre magasin nous voulions rendre certains produits disponibles et d’autres indisponibles… Pour savoir si le produit est disponible, nous avons récupéré l’info dans notre controller avec une nouvelle propriété : canPurchase.
Dans cet exemple la directive permet de tester le contenu de notre propriété.
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name : 'Dodecahedron',
price: 2.95,
description : " Lorem ipsum dolor sit amet, consectetur adipisicing eli ",
canPurchase : false,
soldOut : true
}
Afficher (ng-show) et cacher ng-hide
Avec cette information comment pouvons conditionner l’affichage de notre bouton d’achat. Cela grace à une directive qu’Angular : ng-show
Dans notre HTML il suffit donc d’utiliser cette directive avec comme attribut la valeur de la propriété que nous voulons tester. Dans notre cas la valeur est égale à false et donc ne s’affiche pas.
ng-show affichera l’élément si la valeur de l’attribut est égale à true et le cachera si c’est égale à false.
<div ng-controller="StoreController as store">
<h1> {{store.product.name}}</h1>
<h2> {{store.product.price}}</h2>
<p> {{store.product.description}} </p>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
A noter que si la propriété est absente de notre objet dans le controller ng-show l’interprètera comme false
Imaginons maintenant que notre produit est hors stock, nous voudrions peut-être ne pas l’afficher du tout.
Nous pourrions donc faire ng-show= »!store.product.soldout »
<div ng-controller="StoreController as store">
<article ng-show="!store.product.soldout">
<!-- notre content -->
</article>
</div>
Mais il existe une directive qui fait l’inverse de ng-show c’est ng-hide. Cette directive cachera l’élément si la valeur de la propriété qu’on lui soumet renvoit true.
<div ng-controller="StoreController as store">
<article ng-hide="store.product.soldout">
<!-- notre content -->
</article>
</div>
A noter que vous pouvez aussi choisir de cacher un élément si une propriété est vide
Exemple :
<div class="gallery" ng-show="{{product.images.length}}">
</div>
Utiliser des boucles
Peut être que notre magasin na va pas vendre un seul produit, il serait donc intéressant d’avoir plusieurs items dans notre controller. Ajoutons maintenant plusieurs produits dans notre controller.
app.controller('StoreController',function(){
this.products = gems;
});
var gems = [
{
name : 'Dodecahedron',
price: 2.95,
description : " Lorem ipsum dolor sit amet, consectetur adipisicing eli ",
canPurchase : true
},
{
name : 'Pentagonal Gem',
price: 5.95,
description : " Lorem ipsum dnsectetur adipisicing eli olor sit amet, co",
canPurchase : false
}
]
Voilà nous avons modifié notre controller et on a maintenant un array d’objet qui nourrit notre propriété product de notre controller. (propriété que l’on retrouvera dans notre page grâce à notre controller)
Mais comment pouvons-nous maintenant afficher le contenu de cet objet dans notre page ?
Vous l’aurez surement deviné nous allons utiliser une directive qu’il s’appelle ng-repeat
ng-repeat permet de faire une boucle comme en php avec foreach ou encore for in en JavaScript
foreach ($variable as $key ) {
# code...
}
Nous pouvons donc faire :
<div ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<h1> {{store.product.name}}</h1>
<h2> {{store.product.price}}</h2>
<p> {{store.product.description}} </p>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</div>
Jouez avec la démonstration sur code pen :
See the Pen Introduciton à Angular.js by BROSSAULT (@antoinebr) on CodePen.
Ce qu'il faut retenir / à propos d'Angular.js
Les directives
Ce sont des attributs HTML qui permettent de déclencher du code JavaScript
Les modules
C’est là où notre application évolue, son environnement.
(function(){
var app = angular.module('store',[]);
)
Les controllers
C’est là que nous effectuons nos opérations applicatives, vérifications des donnés, rearrangement…
{{Les expressions}}
Se sont des éléments entre accolades qui sont interprétés par angular pour être affiché dans la page. Ce sont comme des echo en php.
