Comment créer vos propres filtres avec AngularJS filter

Dans ce nouveau cours sur les filtres d’AngularJS, apprenez à créer vos filtres personnels avec la méthode filter.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer vos propres filtres avec AngularJS filter

Bonjour et bienvenu sur Développement Facile.

AngularJS – Les filtres

Ici Mathieu expert en développement applicatif, donc dans le cours précédent dédié à AngularJS vous avez découvert l’utilisation des filtres et maintenant vous allez carrément apprendre à créer vos propres filtres.

Plutôt que d’utiliser les filtres par défaut d’AngularJS qui sont forcément un peu limités, vous allez apprendre à créer vos propres filtres qui vont correspondre pile poil aux besoins de vos applications et vous allez voir là aussi c’est très simple.

Les filtres avec AngularJS

Vous devez appeler la méthode filter sur un module pour utiliser vos propres filtres. Le premier paramètre de la méthode filter c’est le nom du filtre tout simplement et ensuite le filtre il est accessible dans les vues selon des notations suivantes, soit le nom du filtre, soit data-nom du filtre,  c’est valide HTML5, soit x-nom du filtre, c’est valide XHTML.

Je vous conseille d’utiliser data-le nom du filtre pour que ce soit valide HTML 5 ou X-nom du filtre pour appeler votre filtre, histoire que ce soit valide XHTML.

Ensuite le deuxième paramètre de la méthode filter, c’est une Factory qui représente la méthode à exécuter pour appliquer le formatage, vous allez créer une autre fonction JavaScript, Factory ce sera votre traitement à appliquer pour exécuter le filtre et vous transmettrez cette Factory en deuxième paramètre de la méthode filter. Donc cette méthode prend en entrée la donnée à formater et renvoie tout simplement la donnée formatée, c’est aussi simple que ça.

Vous pouvez également profiter des fonctionnalités d’injection de dépendances d’AngularJS dans les filtres pour ajouter des services, ça vous permet d’aller encore plus loin avec les filtres AngularJS.

Voici un exemple de code source qui s’affiche sur votre écran renvoi pour créer votre propre filtre, donc ça module, sur votre instance module, vous appliquez la méthode filter, le nom du filtre c’est show id icons, et la Factory donc c’est une fonction comme je vous l’ai dit, ou vous donnez en input la donnée à formater et vous renvoyez en sortie la donnée formatée, on fait un sweet case  en fonction de la donnée d’entrée, on va renvoyer l’URL d’une icône à afficher et dans le switch on a une icône par défaut, au cas où il y  a un petit soucis, ça permet de quand même avoir l’affichage d’une icône.

Voilà un deuxième exemple de filtre pour définir un ordre d’affichage des éléments, là c’est pour organiser des clients, l’ordre d’affichage des clients, donc vous avez un tableau en entrée de votre filtre, donc le filtre s’appelle orderClients comme vous l’avez compris, et vous faites un array.sort, donc vous organisez votre tableau en fonction du statut de l’utilisateur s’il est déconnecté ou pas vous renvoyez true ou false et à la fin renvoyez votre tableau organisé, filtré, vous allez l’afficher tout simplement.

Vous avez vu la création d’un filtre c’est très simple, vous avez vu la création de deux filtres précédemment et là comment on fait l’affichage ?

Vous utilisez une balise ul avec ng-repeat cli donc c’est le nom d’un objet, cli in aClient vous parcourez le tableau a client et pouvez lui appliquer le filtre orderClients et ça va filtrer vos clients et dans li vous allez, donc ça va organiser, ça va afficher vos clients dans l’ordre que vous avez défini dans votre filtre et pour l’affichage donc dans une balise li vous faites image avec ng-src pour récupérer l’URL de l’image à afficher, cle.statut dans votre object client à chaque fois vous parcourez votre tableau a client vous avez un objet client que vous récupérez cli.statut vous affichez le statut du client en affichant, suivant un filtre, donc le filtre show id colle et ça va vous renvoyer le filtre show id colle, l’URL de l’icône du client à afficher et en dessous vous avez cli.nom, le nom du client et le prénom du client. C’est un exemple tout bête, ça vous montre concrètement comment utiliser les filtres donc créer vos filtres et les utiliser.

Exemple pratique AngularJS

On va voir un deuxième exemple pratique, à partir du code source quel exemple écrire exactement, où ou le mettre, dans quel endroit du fichier, soit JavaScript, soit fichier HTML.

Alors comment créer vos propres filtres, c’est ce que vous allez voir tout de suite avec un exemple de code source, la partie HTML est vraiment très simple, vous parcourez votre liste de clients tableau liste de clients, un objet client, vous répétez, vous parcourez, vous appliquez le filtre order client tout simplement et pour l’URL de l’image vous récupérez client.icon, sur votre objet client son icône, URL de l’icône, et vous appliquez le filtre oClientStatutIcone:screenSize, ensuite vous affichez le prénom du client et son nom de famille.

Comment ça se passe ?

Pour créer un filtre, oModule.filter, oClientStatutIcon, donc le nom du filtre, tout simplement et vous appelez votre filtre, et là c’est iconType la taille de l’icône, screen size c’est en fait tout simplement une variable qui a été définie à 48 la taille de l’icône à afficher, et en fonction de la taille de l’icône, vous pouvez permettre de charger une icône d’une taille différente ici c’est les tailles des icônes tout simplement.

Et ensuite en fonction de l’état c’est-à-dire vous passez au client.icon, l’état c’est ici, regardez quand vous créez votre tableau, icône connexion mobile statut connecté, nom de famille prénom, là vous remplissez votre tableau de client, icône indéterminé, connexion Web, déconnecté, pareil avec le statut là vous avez rempli votre tableau avec tous vos clients et il faut les trier, votre filtre de tri va passer à l’État connecté.

Pareil  avec le statut, là vous avez rempli votre tableau avec tous vos clients, et il faut les trier, votre filtre de tri vous lui passez l’état de l’icône, connexion Web, disconnect, indéterminé, et en fonction de connectant Web, mobile disconnect, par défaut, vous allez renvoyer l’URL de l’icône à charger, c’est aussi simple que ça.

Pour le tri des clients c’est encore plus simple, regardez, orderClients vous transmettez un tableau donc le tableau client, et vous faites un tri du tableau par le statut, et le statut qu’est-ce que c’est ?

Connected, disconnect et indéterminé, c’est aussi simple que ça, et en fait dynamique sorte, c’est une fonction JavaScript qui vous permet d’effectuer un tri sur une propriété d’un objet donc là c’est sur la propriété statut et cette fonction va tout simplement vous renvoyer le tableau trié, vous obtenez au final les personnes connectées, les clients connectés, les clients déconnectés, et les clients on ne sait pas ce qu’ils font là, je change en direct, Abime et Léa je vais les connecter, donc tout simplement je vais dans mon tableau, Adeline, Léa, je vais les mettre, connexion Web non connexion mobile toutes les deux, voilà connexion, alors Léa, Adeline là, connected, connected et connected et je vais mettre en inconnu, indéterminé, tout simplement et indéterminé j’en met qu’un je recharge, Antoine Labio et bien indéterminé, Adeline et Léa sont en connexion Web, et ça je vais le mettre Matthieu en connexion Web et l’icône est changée automatiquement.

Donc ça vous permet AngularJS de créer vos propres filtres en fonction des besoins que vous avez vous dans votre application, côté HTML c’est la vue hyper simple, deux lignes de code, aussi simple que ça, côté donnée, vous définissez un objet client avec toutes les données donc chaque objet client dans un tableau, vous créez vos filtres module.filter là ça va renvoyer l’URL de l’image à charger comme icône en fonction du statut et la ça va effectuer le tri selon une propriété de votre tableau, de votre objet, voilà maintenant c’est à vous de jouer.

Votre plan d’action !

Maintenance c’est à vous de jouer donc comme d’habitude votre plan d’action c’est de faire les exercices de ce cours, à chaque fois que je vous montre un exemple c’est de reproduire l’exemple dans votre application et d’adapter cet exemple à vos applications. Vous trouverez sous ce cours vidéo le code source commenté en téléchargement, si vous avez des questions comme d’habitude posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir, et maintenant si vous voulez aller plus loin vous pouvez vous inscrire donc inscrivez-vous maintenant en renseignant le formulaire sous cette vidéo pour recevoir les prochains cours gratuitement, quand il y aura des prochains cours que ce soit sur jQuery, AngularJS, vous les recevrez gratuitement et donc vous recevrez le code source etc. comme d’habitude et si vous voulez vraiment aller beaucoup plus loin, là juste au-dessus de moi il y a une bannière, une image, cliquez dessus et dans la deuxième, vous accélérez à une deuxième page avec deuxième vidéo qui va vous expliquer en détail toutes les stratégies, les méthodes utilisées par les professionnels, des experts dans leur domaine pour créer des applications, des jeux beaucoup plus rapidement, des jeux et des applications qui soient compatibles Smartphone, tablette que ce soit l’iPad, ou Android, Windows phone, vos applications marcheront sur tous ces périphériques en les codant une seule fois c’est ça qui est très puissant.

Pas à pas vous êtes guidés pour créer ce type d’applications beaucoup plus rapidement, bien évidemment l’équipe développement facile vous accompagne individuellement.

Vous serez accompagné par l’équipe développement facile, par des experts qui ont plus de 10 ans d’expérience dans le développement avec plusieurs langages de programmation, par rapport à un exemple de code source vous avez une question, il suffira d’envoyer vos questions à l’équipe développement facile, et un des experts le plus qualifié, vous répondra directement, il peut corriger votre source, il vous dira, écoute vous vous êtes trompé ici, il suffit de mettre ça, ça, ça comme ça, pourquoi on a fait ça, parce que tac tac tac, vous aurez toutes les explications pour être à votre tour autonome.

C’est le plus important que vous acquériez des compétences élevées en développement d’applications sur mobilie, Smartphone, le Web avec JavaScript HTML 5 et surtout que vous soyez autonomes derrière donc tout est expliqué dans la deuxième vidéo cliquez simplement sur l’image, sur le lien je vous retrouve directement dans la deuxième page.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple d’utilisation des filtres avancées avec AngularJS

Retrouvez le code source commenté des exemples de filtre d’AngularJS vus dans la vidéo

Posez vos questions sur les filtres d’AngularJS

Utilisez la zone commentaire pour poser vos questions et poster vos codes sources sur les filtres d’AngularJS