03. Les principaux filtres et directives

Nous avons abordé quelques directives; continuons d'expérimenter ce qu’Angular nous fournit avant d'avancer davantage dans notre projet. Nous découvrirons également l'utilisation des filtres.

Nommage des directives

Vous pouvez retrouver la liste exhaustive des directives inclus dans Angular en consultant la documentation de l’API.

Mais, je voulais auparavant faire un aparté sur le nommage des directives qui diffère ente la déclaration et l’utilisation. En effet, lorsqu’on utilise une directive dans le HTML, il convient de respecter les conventions de nommage en remplaçant les majuscules par une minuscule précédé d’un tiret. Ainsi, lorsqu' une directive se nomme ngClass, cela devient dans le HTML ng-class.

Les directives les plus courantes

• ngApp déclarer une application Angular dans le HTML
• ngController brancher un controller dans une portion de HTML
• ngClass appliquer dynamiquement des class CSS à un élément
• ngClick faire une action au click sur un élément
• ngIf enlever ou inclure une portion de HTML en fonction de condition
• ngShow afficher ou cacher une portion de HTML en fonction de condition
• ngModel lier un champ avec une propriété du modèle
• ngRepeat boucler sur une propriété du modèle

Les filtres

Les filtres, nous ne l'avons pas encore abordé, permettent de modifier des données principalement dans un template. Ils s’appliquent par l’intermédiaire du pipe | . Il peut y en avoir plusieurs. Si le filtre prend des options, elles seront après son nom, séparées par un :. Ci-après quelques exemples, mais comme pour les directives, il est possible de créer ses propres filtres en plus de ceux disponibles.

<div>
    Je m'appelle {{user.nom | uppercase}} <!-- filtre simple qui met en majuscule la valeur --> 
    et je suis né le  {user.date |  date:'dd/MM/yyyy'}} <!-- filtre avec option qui formate une date -->
</div>

Les filtres dans les controllers

A savoir, que même si cette pratique est moins courante, les filtres peuvent également être appelés dans les controller en injectant le service $filter.

var moi = {
    nom:'manu',
    age:25
};

app.controller('MainController', ['$filter', function($filter){
    var vm = this;
    vm.user = moi;

    // récupération du filtre 'uppercase' par l'intermédiaire du service $filter: retourne une fonction
    var uppercaseFilter = $filter('uppercase');

    // appel de la fonction sur la valeur
    vm.user.nom = uppercaseFilter(vm.user.nom); 

}]);