Devenez un ninja avecAngularJS - extrait gratuit

Ninja Squad

ii

Table of Contents ................................................................................................................................... iii1. Filtres ..................................................................................................................... 1

1.1. Principe ....................................................................................................... 11.2. Filtres disponibles ....................................................................................... 21.3. Filtre dynamique .......................................................................................... 41.4. Crer ses propres filtres ............................................................................. 6

iii

iv

Le chapitre qui suit vous donnera une ide du contenu et de la mise en forme du livre.Enjoy !

1Chapter1.Filtres

1.1.PrincipeLune des fonctionnalits les plus apprciables et mconnues dAngular rside dansles filtres disponibles. Dans toute application web, il est courant de devoir transformerdes valeurs laffichage, ou de filtrer ou rordonner une collection. Les filtres Angularrpondent ce problme et sont applicables la fois en HTML ou en JavaScript, unseul lment ou un tableau. En HTML, la syntaxe se rapproche du style Unix, o lonpeut chaner les commandes laide du pipe. Par exemple, on peut appliquer un filtrenomm 'uppercase' sur une expression de la faon suivante :

{{ expression | uppercase }}

On peut galement chaner plusieurs appels de filtre :

{{ expression | uppercase | trim }}

Certains filtres prennent des paramtres : cest le cas du filtre 'number', qui ncessitede prciser le nombre de chiffres suivant la virgule. Pour passer les paramtres aufiltre, il suffit de procder comme suit :

{{ expression | number:2 | currency:'$'}}

Si un filtre prend plusieurs paramtres, alors on les spare galement avec des :. Cestle cas du filtre 'orderBy' qui permet de trier un tableau dobjets selon un de leur champ,et dont le deuxime paramtre permet dinverser le tri.

{{ array | orderBy:'name':true }}

Il est galement possible dinvoquer les filtres depuis le code JavaScript :

var toUppercase = $filter('uppercase');

toUppercase('hello'); // HELLO

Angular va alors retrouver la fonction de filtre correspondant la chane de caractrespasse en paramtre de la mthode $filter(), que lon peut rcuprer et appliquercomme bon nous semble.

Filtres

2

1.2.Filtres disponiblesAngular propose par dfaut certains filtres communs :

number : permet de prciser le nombre de chiffres aprs la virgule afficher (arrondiau plus proche).

{{ 87.67 | number:1 }} // 87.7

{{ 87.67 | number:3 }} // 87.670

currency : permet de prciser la monnaie.

{{ 87.67 | currency:'$' }} // $87.67

date : permet de formatter laffichage des dates, en prcisant un pattern. On retrouvelcriture classique de pattern :

{{ today | date:'yyyy-MM-dd' }} // 2013-06-25

Un certain nombre de patterns sont disponibles (avec un rendu diffrent selon lalocale) :

{{ today | date:'longDate' }} // June 25, 2013

lowercase/uppercase : de faon assez vidente, ces filtres vont convertirlexpression en majuscules ou minuscules.

{{ "Cedric" | uppercase }} // CEDRIC

{{ "Cedric" | lowercase }} // cedric

json : moins connu, ce filtre permet dafficher lobjet au format JSON. Il estgalement moins utile, car, par dfaut, afficher un object avec la notation '{{ }}'convertit lobjet en JSON.

{{ person | json }} // { name: 'Cedric', company: 'Ninja Squad'}

Filtres

3

{{ person }} // { name: 'Cedric', company: 'Ninja Squad'}

limitTo : ce filtre sapplique quant lui un tableau, en crant un nouveau tableaune contenant que le nombre dlments passs en paramtre. Selon le signe delargument, les lments sont retenus depuis le dbut ou la fin du tableau.

{{ ['a','b','c'] | limitTo:2 }} // ['a','b']

{{ ['a','b','c'] | limitTo:-2 }} // ['b','c']

orderBy : l encore un filtre sappliquant un tableau. Celui-ci va trier le tableauselon laccesseur pass en paramtre. Laccesseur peut tre une chane decaractres reprsentant une proprit des objets trier ou une fonction. Laccesseursera appliqu sur chaque lment du tableau pour donner un rsultat, puis letableau de ces rsultats sera tri selon lordre dfini par les oprateurs , =. Uneproprit peut tre prcde du signe - pour indiquer que le tri doit tre invers. Ala place dune simple proprit, il est possible de passer un tableau de propritsou de fonctions (chaque proprit ou fonction supplmentaire servant affiner letri primaire). Un second paramtre, boolen, permet quant lui dindiquer si le tridoit tre invers.

var jb = {name: 'JB', gender: 'male'};

var cyril = {name: 'Cyril', gender: 'male'};

var agnes = {name: 'Agnes', gender: 'female'};

var cedric = {name: 'cedric', gender: 'male'};

$scope.ninjas = [jb, cyril, agnes, cedric];

On peut ordonner la liste par genre :

// order by the property 'gender'

{{ ninjas | orderBy:'gender'}} // Agnes,JB,Cyril,Cdric

Ou par nom :

// order by the property 'name'

{{ ninjas | orderBy:'name'}} // Agnes,Cdric,Cyril,JB

Pour faire un tri plus compliqu, il est possible de dfinir son propre comparateur :

Filtres

4

// order by a function (lowercase last)

$scope.lowercaseLast = function(elem){

return elem.name === elem.name.toLowerCase()

};

{{ ninjas | orderBy:lowercaseLast }} // Agnes,JB,Cyril,cedric

// order by an array of properties or functions

{{ ninjas | orderBy:['-gender','name'] }} // cedric,Cyril,JB,Agnes

1.3.Filtre dynamique

Nous avons vu les principaux filtres, mais il manque un qui se nomme filter. Et cestlun de nos prfrs !

Ce filtre agit sur un tableau pour en retourner un sous-ensemble correspondant lexpression passe en paramtre. Lexpression la plus simple consiste passer unechane de caractres : le filtre va alors retenir tout lment du tableau dont une propritcontient la chane de caractres en question.

Il devient alors trs simple de faire une recherche dans un tableau dans votreapplication AngularJS.

Supposons que vous ayez un liste de personnes. Au hasard une quipe de ninjas.

$scope.ninjas = [

{ 'name': 'Agnes', 'superpower': 'Java Champion', 'skills':

['Java', 'JavaEE', 'BDD']},

{ 'name': 'JB', 'superpower': 'Stack Overflow Superstar', 'skills':

['Java', 'JavaScript', 'Gradle']},

{ 'name': 'Cyril', 'superpower': 'VAT specialist' /*I'm joking

buddy*/, 'skills': ['Java', 'Play!']},

{ 'name': 'Cdric', 'superpower': 'Hype developer', 'skills':

['Java', 'JavaScript', 'Git']},

];

Maintenant vous voulez les afficher dans un tableau. Facile, un coup de 'ng-repeat' etlaffaire est plie.

Filtres

5

{{ ninja.name }}

{{ ninja.superpower }}

{{ ninja.skills.join(',') }}

Maintenant nous voulons ajouter notre filtre, qui sutilise comme les autres filtres, surnotre tableau de ninjas. Pour cela nous ajoutons le pipe suivi du filtre 'filter' avec unparamtre nomm search qui contiendra la chane de caractres rechercher dans letableau (et ne retiendra donc que les ninjas qui satisfont la recherche).

{{ ninja.name }}

{{ ninja.superpower }}

{{ ninja.skills.join(',') }}

Nous allons ajouter un input qui aura comme modle 'search' et rendra donc larecherche dynamique.

Et voil! Le tableau est filtr dynamiquement ! Essayez, on vous attend ici !1

Cest quand mme la super classe, non ?

Il est galement possible de limiter la recherche certaines proprits de lobjet, enpassant un objet au filtre plutt quune chane de caractres. Par exemple on peutchercher seulement le nom, en transformant linput comme suit :

Il est galement possible de passer une fonction valuer contre chaque lment dutableau plutt quune chane de caractres ou un objet.

Enfin, ce filtre peut prendre un deuxime paramtre, pouvant tre un boolen indiquantsi la recherche doit tre sensible la casse (par dfaut, elle ne lest pas) ou une fonctiondfinissant directement comment comparer lexpression avec les objets du tableau. Sivous voulez une recherche sensible la casse :

1 http://embed.plnkr.co/qgaSkx/

Filtres

6

{{ ninja.name }}

{{ ninja.superpower }}

{{ ninja.skills.join(',') }}

Avec une combinaison de 'filter' et de 'orderBy', vous avez toutes les cartes en mainpour faire de superbes listes ou tableaux en HTML, parfaitement dynamiques, et, vouslavez remarqu, sans crire une ligne de JavaScript !

1.4.Crer ses propres filtresIl est galement possible de crer ses propres filtres et cela peut tre parfois trs utile.Il existe une fonction pour enregistrer un nouveau filtre dans votre module (commenous lavons vu avec les controllers). Elle se nomme 'filter' et prend comme argumentle nom du filtre que vous utiliserez et une fonction. Cette fonction doit renvoyer unefonction prenant comme paramtre llment filtrer. Oui, une fonction qui retourneune fonction, quand on ne fait pas souvent de JavaScript, a fait bizarre !

Par exemple, nous utilisons souvent la librairie moment.js2 pour la gestion des datesen JavaScript. Vous ne connaissez pas ? Elle est vraiment trs bien faite, et nous estdevenue indispensable ds quun projet veut faire des choses un peu avance avecdes dates (le filtre par dfaut dAngular sur les dates est assez limit).

Nous avons donc cr un filtre 'moment' pour Angular, qui nous permet dutiliserfacilement cette librairie dans nos templates.

app.filter('moment', function() {

return function(input, format) {

format = format || 'll';

return moment(input).format(format);

}

});

Notre filtre se nomme donc 'moment' et prend 2 paramtres possibles :

un input, la date formatter (tous les filtres ont au moins ce paramtre).

un format, qui est optionnel, et est initialis 'll' (lun des formats offerts parmoment.js) si il nest pas dfini.

2 http://momentjs.com/

Filtres

7

Nous pouvons ensuite utiliser ce filtre dans nos templates :

{{ '2013-10-15' | moment }} // Oct 15 2013

{{ '2013-10-15' | moment:'LL' }} // October 15 2013

Linput est format avec 'll' par dfaut ou celui prcis, 'LL' dans le deuxime exemple.

Vous savez tout sur les filtres !

Cela vous a plu ? Achetez la suite !

Devenez un ninja avec AngularJS - extrait gratuitTable of ContentsChapter1.Filtres1.1.Principe1.2.Filtres disponibles1.3.Filtre dynamique1.4.Crer ses propres filtres