Comment gérer vos listes et leur contenu avec des filtres AngularJS

Découvrez comment utiliser AngularJS et le modèle MVC sur les listes avec la notion de filtre.

Tout est dans la vidéo ci-dessous.

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

Comment gérer vos listes et leur contenu avec des filtres AngularJS

Bonjour et bienvenu sur Développement Facile.

Toujours un cours consacré au potentiel, à la puissance de framework AngularJS dans vos applications, comment utiliser le modèle de conception MVC, le modèle observer appliquer à JavaScript, HTML 5, avec AngularJS, donc là dans ce cours vous allez découvrir particulièrement les listes avec la notion de filtre, de tri, tout ce qu’il est possible de faire avec des listes et notamment l’interprétation AngularJS.

Gestion des listes avec Angular JS

Vous avez l’attribut ng-repeat qui va vous permettre d’afficher une liste qui est contenue dans votre modèle, vous avez un modèle avec un tableau, tous les éléments d’une liste, avec l’attribut ng-repeat, ça va vous permettre d’effectuer une itération sur cette collection, vous avez itérer chaque élément de la collection pour les afficher dans une liste, donc avec les balises ul et li donc vous avez ng-app pour l’application, attribut normale, ng-controler pour le contrôleur pour gérer les données simplement et ng-repeat item in items pour afficher tous les éléments de votre collection, c’est vraiment super.

Voici l’exemple du contrôleur qui va gérer votre liste avec tous les items donc le nom élément1, élément2, vous avez cinq éléments dans votre liste et ça va vous permettre de les afficher.

Ensuite sur une liste vous pouvez accéder à différentes propriétés bien évidemment, index pour accéder à l’élément courant, vous avez la propriété first pour accéder au premier élément de la liste, last pour accéder au dernier, vous avez odd pour accéder à la position de l’élément impaire, even pour accéder à la position de l’élément paire, odd et even ça doit vous rappeler quelque chose si vous suivez les cours de développement facile depuis quelques mois déjà, le Framework Bootstrap3 a aussi cette possibilité de sélectionner un élément impair ou pair avec un odd et even si vous ne savez pas à ce que c’est, je vous renvoie au cours, il y a une vingtaine de cours gratuits sur Bootstrap3, cherchez dans développement facile il y a tous les cours disponibles et donc vous pouvez également effectuer des tris sur une liste avec la possibilité de la filtrer ou de limiter le nombre d’éléments affichés en utilisant des mots-clés comme filter, orderby, limiteto.

Comment utiliser ces mots-clés ?

À chaque utilisation de l’attribue ng-repeat, AngularJS surveille automatiquement la collection il peut synchroniser des changements avec la vue s’il y a, donc si l’utilisateur met un filtre dans la liste, AngularJS va mettre automatiquement à jour l’affichage de la liste, si un élément est ajouté dans la collection la liste sera mise à jour, si au contraire un élément est supprimé de la collection, la liste sera également mise à jour donc c’est vraiment très pratique.

Exemple pratique AngularJS

On va passer tout de suite à travers un exemple pratique ou vous verrez les notions de orderby, pour filtrer la liste soit par nom, soit par une valeur d’un élément de la liste, de limiter le nombre d’éléments affichés de la liste et la notion d’ajout d’éléments dans la liste, la notion de mise à jour automatique de la liste avec la vue, si vous modifiez la vue, le modèle se met à jour, la liste sera mise à jour également automatiquement.

Alors, comment utiliser les listes avec AngularJS ?

Je ne reviens pas dessus, comme d’habitude vous incluez le framework JavaScript AngularJS, votre fichier main.js qui contiendra votre code JavaScript, on passe directement sur la liste, vous avez votre ng-controler o liste pour créer un contrôleur vous avez l’habitude, o liste, liste contrôleur voilà, c’est aussi simple que ça et ensuite et vous avez plusieurs options dans votre liste, donc un formulaire bien évidemment, avec select ng-model order et name value, donc ça, c’est pour mettre des options de tri, soit par langage, soit par valeur donc par le nom ou par la value sur votre liste, ça, c’est pour faire une recherche dans votre liste et là, vous avez la possibilité de modifier la quantité d’éléments affichés dans votre liste. Ça, c’est le petit formulaire qui vous permet de gérer votre liste en gros c’est filtré par nom, si je tape A il y a tous les langages qui commencent comme ça, assembleur ensuite vous pouvez trier par langage ordre alphabétique ou par valeur, et le nombre affiché d’éléments de la liste. Voilà ça c’est votre formulaire pour gérer votre liste et là, vous affichez la liste donc entre deux balises ul et une balise li, on va boucler dans le tableau item, le tableau item vous le construisez tout simplement ici, donc c’est des objets à chaque fois un objet, un autre objet, un autre objet et vous pouvez en mettre autant que vous voulez, comme des propriétés autant que vous voulez, moi j’ai mis propriété name pour le nom du langage, valeur pour sa valeur après vous pouvez rajouter d’autres propriétés dans votre objet autant que vous voulez, donc là c’est un tableau tout simplement, qui contient toute votre liste, quantité order, query ça correspond à order, query quantité, donc ng-model et on accède à ces valeurs avec le scope c’est aussi simple que ça, et donc vous dites répète moi donc pour chaque item ça, cette balise li en affichant le nom et la valeur, par contre j’applique des filtres sur query, la recherche tu limites la quantité, à cette valeur-là, et tu fais un ordrerby par l’ordre soit name soit value, donc soit par nom, soit par valeur, et voilà votre liste est tout simplement construite grâce à AngularJS c’est aussi simple que ça en fait, pour faire votre liste, le minimum que vous ayez besoin, c’est ça et vous pouvez rajouter des filtres derrière, tout en sachant qu’il faut que vous pensiez à construire votre tableau d’objet, d’éléments, ça peut être des éléments texte, des valeurs, ou carrément des objets dans ce cas-là c’est des objets, vous avez votre liste ici vous pouvez choisir d’afficher seulement deux éléments, l’avantage c’est qu’elle est mise à jour automatiquement, l’affichage, organiser par ordre alphabétique, HTML, effectuer des recherches moi je recherche le langage ActionScript, voilà c’est un vrai, je ne vais pas dire que c’est un jeu d’enfant mais c’est très simple de créer une liste avec AngularJS.

Votre plan d’action !

Maintenant c’est à vous de jouer, un plan d’action très simple, déjà commencez par télécharger le code source disponible sous cette vidéo il est commenté, vous pouvez le réutiliser dans vos projets, si vous avez des questions posez les également sous ce cours vidéo, l’équipe développement facile vous répondra toujours dans le détail, pour vous aider au maximum à utiliser cette fonctionnalité dans vos projets, maintenant si vous voulez recevoir les nouveaux cours développement facile, que ce soit sur AngularJS, sur le framework Phaser, et bien d’autres éléments fondamentaux du développement facile, vous avez un formulaire sous cette vidéo vous renseignez simplement votre nom votre adresse mail et vous recevrez tous les cours directement dans votre boîte mail, maintenant si vous voulez aller vraiment beaucoup plus loin dans le développement d’applications performantes, vous avez un lien qui s’affiche, une image, cliquez simplement dessus, vous serez redirigé dans une deuxième vidéo, donc vers une deuxième vidéo ou je vous explique de A à Z la méthode développement facile, comment coder, développer des application très complexes, très performantes deux à trois fois plus rapidement, comment travailler en équipe, à plusieurs sans vous gêner bien évidemment, travailler efficacement, intelligemment en équipe sur le même projet à plusieurs développeurs, comment utiliser les potentiels donc les stratégies avancées des Framework pour simplifier vraiment votre développement, vous allez apprendre à créer des Webb app, vous codez une seule fois avec des langage JavaScript HTML 5 et vous déployez sur toutes les plateformes, dans les appstore, dans les Google Play, dans les Windows store, à partir du même code, votre application en deux temps trois mouvements, elle est disponible sur les périphériques Apple, les iPhones, les iPads, disponible sur les périphériques Android, donc les Smartphones, les tablettes et même Windows phone, cliquez simplement sur l’image, le lien juste au-dessus de moi, je vous retrouve dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de gestion de liste avec AngularJS

Retrouvez le code source commenté d’une gestion de liste implémentée avec AngularJS

Quel aspect d’AngularJS souhaitez vous voir aborder dans une prochaine vidéo ?

Utilisez la zone commentaire pour poser vos questions sur ce cours vidéo et nous dire quel point vous voudriez voir approfondi sur le framework AngularJS