Découvrez comment gérer l’affichage des éléments avec AngularJS.
Apprenez à utiliser les attributs ng-show et ng-hide et les fonctions associées.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment afficher et masquer des éléments avec le Framework AngularJS
Bonjour et bienvenu sur Développement Facile.
Voilà un nouveau cours Angular JS pour vous permettre à vous aussi d’utiliser tout le potentiel de ce fabuleux framework dans vos applications donc là vous allez découvrir plus particulièrement dans ce cours, la gestion, l’affichage des éléments et ce qu’il est possible de faire grâce à Angular JS sur les différents éléments de votre vue avec le modèle, avec le contrôleur, tout ce qui est possible de faire.
L’affichage des éléments avec Angular JS
Vous avez des attributs ng show et ng hide, qui vous permettent d’afficher ou de cacher suivant à l’endroit où vous mettez cet attribut dans votre div, vous pouvez cacher une zone complète de votre application en fonction d’une valeur booléenne, donc c’est vraiment très pratique dès que l’utilisateur fait une certaine action, vous mettez ce booléen à true et votre nouvelle zone apparaît avec vos valeurs du modèle, c’est vraiment génial, donc c’est un simple booléen que vous mettez à true ou false pour faire apparaître une zone, la sur la balise donc une div, une balise paragraphe par exemple, ou une image ou vous avez utilisé ces attributs ng-show et ng-hide que vous avez liés, bien évidemment, à une valeur, un booléen du modèle que vous mettez à true ou à false. Donc voici un exemple, ng show, show data si vous mettez show data à True elle va être affichée, si vous l’avez fait à false elle est cachée, tout simplement, pareil numéro vous pouvez mettre dans l’attribut ng hide des conditions, il y aura un cours dédié à tout ce qui est possible, tout ce qui est géré par Angular JS au niveau des opérateurs arithmétiques, des conditions vous mettez directement ng hide une condition numéro supérieur à 0, si la valeur de la donnée numéro de la propriété, numéro est supérieur à 0 alors la zone va s’afficher, si elle est inférieure ou égale à zéro la zone sera masquée, donc c’est encore plus puissant qu’un booléen, vous pouvez mettre des opérateurs, par exemple avec l’esperluette pour faire un é, et une autre valeur compris entre telle et telle valeur, une autre propriété pardon, compris entre telle et telle valeur, donc numéro> 0 et un fond <3, mais -2, il y aura un cours dédié à tous ce que gère les attributs Angular JS donc au niveau des conditions des opérateurs arithmétiques, en tout qu’à ça vous permet déjà de vous amuser à masquer certaines zones et en fonction des valeurs des données de les faire afficher ou des actions de l’utilisateur de les faire afficher.
Vous avez également l’attribut ng if qui permet d’afficher ou de masquer un élément en fonction d’une valeur booléenne également, donc la différence entre ng-show et ng-hide, c’est que Angular JS interprète le contenu de l’élément HTML une fois l’affichage nécessaire quand la valeur sera à true, c’est-à-dire que dans votre contenu HTML avec votre balise ng show, ng hide, toutes les propriétés qui doivent être interprétés par Angular JS ne seront interprétées que dès que la valeur booléenne est à true donc ça vous permet d’économiser énormément de ressources si vous avez une zone avec beaucoup de propriétés que Angular JS doit interpréter, renseigner, si cette zone n’est pas visible, donc le booléen est à false, ce ne sera pas interprété donc vous économisez des ressources dès que ça passe à true, ce sera interprété et affiché, c’est une astuce de plus à savoir avec Angular JS qui est très pratique donc comme ça s’affiche derrière moi, à côté de l’écran ça permet d’optimiser le chargement de vos pages en interprétant que les zones HTML devant être affichées.
Dans le code vous pouvez mettre créer un code ça affiche, par exemple sur une zone de connexion, vous avez un nom d’utilisateur, un mot de passe, et vous avez une zone avec un message vous êtes connectés vous êtes déconnectés, connectez-vous, en fonction d’un booléen connected si il est à True, l’utilisateur est connecté, donc vous affichez la zone bienvenu vous êtes connecté etc., si il est déconnecté vous affichez une autre zone, connectez vous à l’aide du formulaire ci-dessous, donc c’est ce qui s’affiche sur l’écran, ce que je vous ai expliqué c’est expliqué sur l’écran, vous pourrez le relire, en fonction de l’état de connexion d’un utilisateur sur votre interface, l’interface d’administration par exemple, de votre application, vous affichez certaines zones et d’autres non, et inversement quand il est connecté, donc c’est vraiment très puissant cette fonctionnalité avec Angular JS donc avec l’attribue ng, voyez le de code source qui s’affiche sur l’écran, connected s’il est connecté vous dites bonjour bienvenu Monsieur intel, s’il n’est pas connecté ng if, not connected, le booléen est à false, connectez-vous avec l’aide du formulaire ci-dessous, donc vous affichez bien deux zones différents en fonction de l’état de connexion de votre utilisateur. Alors vous avez également l’attribut ng switch qui est vraiment fabuleux cet attribut très génial, ça stimule l’instruction switch case en programmation, en fonction d’une valeur donc dans l’exemple de code source qui est affiché ici, ng switch en fonction de la valeur abo type, quand c’est égal à gold, si abo type est égal à gold, vous affichez la valeur gold, si c’est égal à premium vous affichez la valeur premium, et ng swith défaut vous affichez la valeur platinium, vous avez un utilisateur qui se connecte dans votre application en fonction de son niveau d’abonnement, automatiquement Angular JS va lui dire bienvenu dans la zone gold, bienvenu dans la zone premium, ou par défaut bienvenu dans votre zone platinium, donc l’attribut ng switch c’est exactement le même principe que l’instruction switch case, donc voilà avec les exemples de code source, je pense qu’il parle de lui-même si vous avez quelques notions de programmation vous pourrez utiliser l’attribut ng switch très facilement.
Voilà ça vous explique à l’écran un petit peu ce que je viens de vous dire à l’oral comme principe de fonctionnement.
Exemple pratique Angular JS
Voici un exemple pratique, vous allez découvrir ng switch ng if, tous les attributs que vous venez de voir dans ce cours vidéo, vous allez les voir à travers un exemple pratique.
Vous allez découvrir, vous les avez déjà utilisés, en tout qu’à ils étaient déjà dans le code source que je vous ai fourni dans les différents cours, par exemple ng if, if not connected, si cette valeur est à false on affiche vous n’êtes pas connecté, forcément au début quand on initialise, l’application, l’utilisateur n’est pas connecté, donc forcément qu’est-ce qui est affiché à l’écran ?
Vous n’êtes pas connectés, voici une valeur JS, c’est les anciennes choses, ça vous permet de découvrir d’autres façons différentes d’afficher des valeurs, soit de cette façon, soit avec ng bind, je vous les aient déjà expliqué pourquoi, là de la même façon, vous avez ng show ng show content qui est affiché uniquement si c’est à True show content alors est-ce que c’est à True ?
Contenu affiché selon la valeur d’une variable, oui la div est affichée show content du modèle est à True, si je passe show content à false, donc je vais le passer à false, tout simplement, donc je recharge tout simplement la page, et ce message ne sera pas affiché, c’est aussi simple que ça, vous avez vu le message a disparu, si je remets cette variable à True et que jour recharge tout simplement la page, le message apparaît bien, donc ça vous permet d’une façon extrêmement simple avec le scope show content dans le contrôleur single ici, donc le contrôleur sur o contrôleur si on regarde o contrôleur il est donc c’est ng-contrôleur qu’il faut retrouver, il doit être ici, o contrôleur il prend cette div là jusqu’ici, show content est dedans et en fonction de la valeur true ou false voilà, donc là si le solde> 0 texte masqué par défaut, le texte est bien masqué pourquoi ?
Parce que solde, la valeur solde est supérieur à 0, si de la même façon je mais leur solde négative donc <zéro à -20 et que je recharge la page, elle apparaît vous avez vu comment c’est très pratique les directives avec les attributs ng hide, vous pouvez mettre des conditions en direct si je mais même égale zéro, le message doit apparaître parce que ce n’est pas> 0 il apparaît bien, par contre si je mets 3, le message va être masquer tout simplement parce que solde est bien > 0 le message est bien masqué, et vous avez tout un tas de possibilités ça permet vraiment d’agrémenter vos applications de choses très sympas et tout ça en applications mono page, sans recharger la page, pareil type de compte, une fois qu’il va être connecté, donc je vais me connecter tout simplement, je me connecte, j’ai un type de compte Gold, comment ça se fait ?
Regardez, switch en fonction de à compte type si il est = à gold, premium, platine, ou classique donc là c’est Gold avec la majuscule et en gras, je regarde ng switch au moment où la personne se connecte, l’utilisateur se connecte et donc la valeur de la compte elle est renseignée, ici donc on remonte aux parents rappelez-vous la notion d’héritage avec Angular JS, vous remontez aux parents il est Gold, forcément Gold est reconnu si je mets prenium ici c’est aussi simple que ça, donc je recharge la page pour rappeler le formulaire de connexion. Connexion, compte de type premium, donc c’est vraiment très simple, très pratique à utiliser ce Framework Angular JS avec les switch, la connexion, si il est connecté remarquez le message bienvenu Mathieu du projet développement facile, alors que je recharge la page, ce message n’est pas affiché, vous avez tout un tas de possibilités, l’avantage de ce code source c’est qu’il est vraiment très complet pour vous aider tout simplement dans Angular JS, maintenant c’est à vous de jouer vous avez des commentaires tout ce qu’il faut pour réussir vos applications avec le Framework Angular JS.
Votre plan d’actions !
Maintenant c’est à vous de jouer donc vous retrouverez le code source en téléchargement sous ce cours vidéo, vous pouvez le télécharger il est commenté, vous pouvez le réutiliser dans vos applications, si vous avez des questions posez les directement Sous cette vidéo l’équipe développement facile vous répondra avec grand plaisir, et maintenant vous avez la possibilité de recevoir les prochains cours Angular JS, phaser, sur les prochains cours développement facile dédiés à programmation avancée d’applications HTML 5, JavaScript, CSS 3, renseignez simplement votre nom, votre adresse mail sous cette vidéo et si vous voulez aller vraiment beaucoup plus loin mais vraiment avoir un niveau d’expertise de haut vol, cliquez simplement sur l’image, sur le lien là juste au-dessus de moi vous serrez redirigé dans une deuxième vidéo ou je vous explique toute la méthode développement facile en fait, comment créer des architectures d’applications, solides, robustes et évolutives facilement maintenables dans le temps, comment créer des Webb APP vous codez une seule fois avec des langages comme JavaScript, CSS 3, HTML 5, du MySQL et vous les déployez sur toutes les plates-formes, sous forme de Webb APP donc d’applications dans l’Apple Store qui s’installe sur les iPads, les iPhones, d’applications sur Google Play qui s’installe sur les Smartphones et les tablettes Android, d’applications sur le store de Windows et tout ça en codant une seule fois vous les déployez sur toutes ces différentes plateformes, vous allez également bénéficier d’un accompagnement de première classe par l’équipe développement facile, des experts, si vous avez un exemple de code source, que vous souhaitez implémenter dans votre projet et que vous rencontrez des difficultés simplement poser votre question en joignant votre code source, un expert de l’équipe développement facile va vous répondre en corrigeant votre code source, en vous donnant des explications supplémentaires et en joignant un nouvel exemple, donc c’est super c’est un accompagnement de première classe pour vous, cliquez simplement sur le lien là, sur l’image, tout est expliqué dans la deuxième vidéo je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple de page de connexion
Retrouvez le code source commenté avec l’utilisations des attributs ng-show et ng-hide
Téléchargement du code source 07 afficher elements AngularJS
