Apprenez à utiliser les filtres basiques du framework AngularJS avec la directive ng-bind.
Réalisez des filtres sur la monnaie, la date, les nombres, etc.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les filtres avec AngularJS ng-bind
Bonjour et bienvenu sur Développement Facile.
AngularJS – Les filtres
Ici Matthieu expert en développement applicatif. Dans cette nouvelle vidéo, dans ce nouveau cours, vous allez découvrir comment utiliser les filtres avec AngularJS.
Dans les cours précédents vous avez eu un petit aperçu des filtres, vous avez commencé petit à petit à comprendre et à utiliser le potentiel du framework AngularJS.
Dans ce cours vous allez aller un peu plus loin, de plus en plus loin au fur et à mesure des cours en découvrant comment utiliser les filtres tout simplement.
Les filtres avec AngularJS
Alors la syntaxe pour utiliser un filtre, elle est vraiment très simple, elle s’affiche sur votre écran, donc il suffit de lui donner une expression et un nom du filtre.
Pas de panique, vous allez voir comment ça fonctionne, et l’avantage avec AngularJS, c’est que c’est très simple à mettre en place. Vous pouvez utiliser la directive ng-div pour vos filtres, dans une balise span, bind, paragraphe, vous mettez l’attribut ng-bind l’expression et toujours le nom du filtre.
AngularJS possède plusieurs filtres par défaut tout en sachant que dans les prochains cours, vous allez apprendre comment créer vos propres filtres pour aller encore plus loin avec AngularJS.
Vous avez le filtre currency ça permet d’afficher un nombre au format monétaire pour afficher des montants, des totaux, dans un panier d’achat par exemple.
Date, ce filtre va formater la date dans votre application tout simplement.
Lowercase, comme son nom l’indique vous connaissez sûrement avec le PHP ou un autre langage c’est pour afficher une chaîne de caractères en minuscules.
Uppercase, l’inverse pour afficher une chaîne de caractères en majuscules.
Et number, ça formate l’affichage d’un nombre, souvent avec le nombre de décimales, les espaces des milliers.
Et json, ça va afficher un objet JavaScript sous la forme d’une chaîne de caractères au format json, donc le format json qui est interprété par AngularJS.
Alors pour afficher le montant d’une facture donc à travers un exemple et l’utilisation d’un filtre, donc toujours vous avez votre variable stop.total égal 2369,97 euros donc on va dire que c’est le tarif, pour afficher ce montant total de votre panier sur votre site internet, dans votre application AngularJS, entre une balise paragraphe vous mettez donc double cote, total, ça va afficher la variable totale mais avec le titre currency, voilà c’est est aussi simple que ça, donc ça va formater l’affichage de votre nombre.
Qu’est-ce que vous avez d’autre ?
Vous pouvez utiliser des paramètres, c’est-à-dire vous pouvez paramétrer vos filtres AngularJS donc avec votre expression, le nom du filtre, paramètre 1 paramètre 2 etc.
Pour l’affichage d’une expression vous pouvez lui appliquer plusieurs filtres qui vont s’exécuter les uns après les autres, donc c’est vraiment très puissant, donc vous pouvez passer des paramètres à votre filtre, c’est-à-dire un filtre avec un ou plusieurs paramètres et là vous ne le voyez pas sur l’écran mais comme je vous dis vous pouvez enchaîner plusieurs filtres les uns après les autres.
Vous avez l’expression le nom du filtre avec ses paramètres et vous pouvez rajouter un deuxième filtre avec encore des paramètres etc.
Vous avez le filtre number qui permet de déterminer le nombre de décimales à afficher avec la valeur un aussi, la propriété totale est affichée avec une décimale et arrondi, dans l’exemple que vous avez vous utilisez le filtre number et vous pouvez définir le nombre de décimales à afficher, 1, 2, 3 ou 4 et ça va afficher le nombre de décimales adéquates et arrondir votre nombre bien évidemment donc là il y a un exemple, le montant total que vous aviez à afficher à l’instant, là vous l’affichez avec le filtre number 1, je sais plus le montant mais au lieu d’être 2369,97 ce sera 2370 ça aurait été arrondi avec ,0 un chiffre après avec une seule décimale.
Comme je viens de vous le dire AngularJS vous permet de cumuler plusieurs filtres, vous avez votre expression et vous enchaînez filtre 1, filtre 2, filtre 3, etc. donc c’est très pratique.
Il faut savoir que les filtres s’exécutent les uns après les autres, de la gauche vers la droite. Pour les filtres. Vous avez par exemple une fonction pour afficher la date du jour donc scope.date d’achat égal new date, je vous ai mis en exemple différente façons d’afficher la date, si vous affichez date d’achat ou new date directement, ensuite vous appliquez un filtre date et ensuite dans le troisième exemple, que vous avez juste ici vous affichez votre date d’achat, vous appliquez le filtre date donc la date s’affiche et ensuite uppercase vous demandez à mettre en majuscules la date tout simplement. Vous avez enchaîné deux filtres sur la même expression donc la variable date achat.
Vous avez vu AngularJS c’est vraiment très simple à utiliser.
Vous pouvez aussi bien évidemment manipuler des listes pour par exemple les ordonner ou les filtrer dans votre application.
Vous avez un formulaire avec une liste de possibilité, vous pouvez soit les ordonner par ordre alphabétique, par l’identifiant, et même les filtrer quand utilisateur commence à taper les premiers mots d’une option vous pouvez supprimer toutes les autres options du filtre, c’est vraiment très pratique.
Donc là il suffit d’utiliser la directive ng-repeat, donc AngularJS vous propose par défaut trois filtres, pour manipuler les filtres vous avez filter ça récupère tous les éléments qui répondent à un critère, vous avez limiteTo ça récupère seulement les n premier élément ça permet de limiter le nombre d’éléments dans votre liste, si vous avez une liste avec 200 éléments autant limiter l’affichage peut être à 10, 20, 50, et orderBy ça vous permet d’organiser la liste selon un critère tout simplement.
Exemple pratique AngularJS
Alors le mieux c’est de voir ça à travers un exemple pratique et concret c’est parti.
Alors l’exemple de code source sur les filtres basiques contenus dans AngularJS, comment ça fonctionne c’est tout simple, vous définissez par exemple une valeur, donc vous définissez une valeur une valeur totale, on va rajouter 6, voilà, vous définissez une date d’achat donc new date c’est aussi simple que ça, et après là il y a une liste avec la quantité, l’ordre et des paramètres donc le contenu de la liste pour l’affichage donc c’est juste uniquement vous avez que ça à faire pour utiliser les filtres de base d’AngularJS, définir des valeurs.
Et pour appliquer les filtres c’est dans la partie vue, dans la partie html vous appelez votre variable, ça va afficher la variable, et là vous appliquez un filtre. Le filtre, la monnaie en dollars, un filtre sur le nombre de décimales arrondies avec un chiffre après la décimale et ça va arrondir automatiquement, la date d’achat normale, la date au format date, la date au format date, puis on met en majuscules, il faut bien les mettre dans l’ordre, les filtres s’exécutent de la gauche date, vers la droite tout simplement, et ensuite vous avez votre liste que vous avez déjà vue dans des tutoriels précédents, comment créer des listes, gérer des listes avec AngularJS.
Alors qu’est-ce que ça donne ?
Votre montant 2369,976 avec la monnaie 2000 la virgule qui est rajoutée, l’indicateur des milliers et l’arrondi, et là on arrondi avec un chiffre après la virgule, numbers ,60, la date d’achat au format d’origine, la date d’achat formatée, la date d’achat formatée et mise en majuscule et donc là vous avez votre liste donc ça c’est vous pouvez faire des tris automatiquement par valeur ou par ordre alphabétique, donc bien évidemment, vous pouvez faire des, voilà des tris automatiques en tapant, vous avez déjà vu ce cours sur les listes précédemment, donc je ne vais pas rentrer plus en détail là c’était vraiment les filtres basiques qui sont très simples à utiliser.
Vous définissez votre valeur et vous appliquez les filtres tout simplement, ici number currency, date, date, uppercase, c’est aussi simple que ça donc là c’est d’autres types de filtre, query, là quantity, là on boucle dans le tableau des items qui est ici, donc des éléments de la liste qui vous donne les règles d’arrondi ici en fonction si on a fait un affichage monnaie, la valeur d’origine, un affichage arrondi avec number tout simplement, et là on peut choisir le nombre, on en affiche 9 maximum, un seul, 3 maximum, on peut les trier par C avec un CSS ou cript c’est aussi simple que ça que ça.
Votre plan d’actions !
Alors maintenant c’est à vous de jouer donc, comme d’habitude vous avez le code source complet à télécharger au format zip sous cette vidéo ça vous permet de leur réutiliser, de vous en inspirer, de faire les exercices de ce cours et d’apprendre le fonctionnement des filtres.
Si vous avez des questions bien évidemment, posez-les directement sous ce cours vidéo.
Et maintenant je vous invite à vous inscrire en renseignant le formulaire juste en dessous, si vous voulez recevoir les cours sur développement facile il suffit de renseigner votre prénom et votre adresse e-mail et gratuitement, vous recevrez des cours, sur AngularJS, sur jQuery, tout un tas de cours vidéo gratuitement.
Et maintenant si vous voulez aller vraiment beaucoup plus loin, si vous voulez passer à la vitesse supérieure dans votre développement, acquérir une expertise élevée, il y a un lien qui s’affiche au-dessus de moi, vous cliquez simplement dessus vous serez redirigé dans la deuxième vidéo, et dans la deuxième vidéo, dans la deuxième page en tout cas vous allez savoir sur la création d’applications performantes avec AngularJS, le JavaScript html 5, soit pour créer des applications sur mobile, les smartphones, les tablettes ou le web, vous allez apprendre des stratégies qui ont fait leurs preuves et qui sont utilisées par moi-même, par d’autres développeurs dans le monde professionnel, par de freelances, cliquez simplement sur le lien, sur cette bannière sur cette image, là juste au-dessus.
Je vous retrouve dans la deuxième page donc dans la deuxième vidéo pour vous expliquer à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’utilisation des filtres avec AngularJS
Retrouvez le code source commenté sur l’utilisation des filtres basiques avec le framework JavaScript AngularJS
