Les directives

Les directives permettent d'augmenter les possibilités du HTML, ce sont des déclarations de fonctions Javascript. Ces fonctions ajoutent à des balises, attributs, classes et même commentaires HTML, des comportements. AngularJS possède un compilateur qui parcourt le DOM et repère les directives, il exécute alors la fonction correspondante. Nous avons déjà vu la directive ng-app qui sert à l'initialisation d'AngularJS. Nous avons également rencontré ng-bind qui a le même effet que les doubles accolades et sert donc à évaluer des expressions. AngularJS comporte de nombreuses directives, nous allons en voir quelques unes.

Directives ngClick et ngInit

La directive ngClick permet de déclencher un comportement lors d'un clic sur l'élément correspondant. La directive ngInit permet de faire des initialisations avant l'exécution des autres directives. Voici un exemple (JSFiddle) :

<div ng-app>
  <button ng-click="number = number * 2" ng-init="number=1">
Multiplier par 2</button>
  Nombre : {{number}}
</div>

On déclare une variable number et on on l'initialise à 1 avec la directive ngInit et on utilise ensuite la directive ngClick pour faire l'action "multiplier par 2".

Directives ngRepeat et ngShow

La directive ngRepeat permet de créer de nouveaux éléments du DOM. C'est une directive que vous utiliserez souvent. Voici un exemple (JSFiddle) :

<div ng-app>
  <div ng-init="voitures = [
    {marque:'Renault', couleur:'verte'},
    {marque:'Mercedes', couleur:'rouge'},
    {marque:'Rolls', couleur:'or'},
    {marque:'Ferrari', couleur:'rouge'}
  ]"> 
  J'ai {{voitures.length}} voitures :
  <ul>
    <li ng-repeat="voiture in voitures">
      Une {{voiture.marque}} {{voiture.couleur}}.
    </li>
    </ul>
  </div>
</div>

La directive ngShow permet d'afficher ou de ne pas afficher l'élément dans lequel elle est selon une valeur booléenne. Prenons le même exemple que précédemment mais en sélectionnant les voitures rouges (JSFiddle) :

<div ng-app>
  <div ng-init="voitures = [
      {marque:'Renault', couleur:'verte'},
      {marque:'Mercedes', couleur:'rouge'},
      {marque:'Rolls', couleur:'or'},
      {marque:'Ferrari', couleur:'rouge'}
    ]">
    J'ai des voitures rouges :
    <ul>
      <li ng-repeat="voiture in voitures" 
ng-show="voiture.couleur == 'rouge'">
 Une {{voiture.marque}}.
     </li>
    </ul>
  </div>
</div>

La directive ngRepeat possède quelques propriétés spéciales bien pratiques. On a par exemple la propriété $index qui donne la valeur de l'index (JSFiddle) :

<div ng-app>
  <div ng-init="voitures = [
      {marque:'Renault', couleur:'verte'},
      {marque:'Mercedes', couleur:'rouge'},
      {marque:'Rolls', couleur:'or'},
      {marque:'Ferrari', couleur:'rouge'}
    ]">
    J'ai {{voitures.length}} voitures :
    <ul>
    <li ng-repeat="voiture in voitures">
      [{{$index + 1}}] Une {{voiture.marque}} {{voiture.couleur}}.
    </li>
  </ul>
</div>

Un petit TP

On va faire un peu le point de ce qu'on a vu avec un petit exercice. Le but est de construire un tableau de courses à faire avec les noms des articles et leur prix :

J'ai 4 articles à acheter

Article	Prix
Farine	€ 2.30
Sucre	€ 1.35
Gâteaux	€ 3.90
Huile	€ 5.25

Vous avez ma solution sur ce JSFiddle.