Classes et styles dans AngularJS

La façon dont nous pouvons travailler nos applications et son interface utilisateur peut impliquer des changements dans les styles, ces changements se reflètent principalement dans les applications les plus modernes avec des changements dans le cours CSS des éléments, avec cela nous pouvons réussir à placer des couleurs, changer la disposition, etc., nos éléments HTML.
AngularJS nous permet d'effectuer ces changements de manière dynamique lorsque le modèle change, afin que nous puissions lier l'apparence de l'application dans son ensemble à son fonctionnement, pour cela nous avons deux façons, l'une utilisant l'interpolation et la seconde avec la directive ng-classe.
Dans ce cas, imaginons que nous ayons un classe CSS, si nous voulons l'appliquer à notre élément à un certain moment ou action, nous pouvons utiliser la notation d'interpolation de Angulaire {{}} afin que vous puissiez appliquer le changement avec une fonction qui s'exécute sur le $ portée manette.
Par exemple nous avons une classe qui affiche un élément en gris pour montrer qu'il n'est pas actif :

 .menu-disabled-true {couleur : gris; } 

Si nous voulons l'appliquer à notre application, nous savons que nous pouvons faire prendre à notre élément l'état de ses directives comme nous l'observons :

Désactiver

Maintenant, nous faisons le contenu de notre Javascript, ici nous allons changer la propriété est désactivé à chaque fois que nous cliquons sur notre élément :

 function MenuController ($ scope) {$ scope.isDisabled = false; $ portée. disable = function () {$ scope.isDisabled = 'true'; }; } 

Maintenant, nous voyons à quoi cela ressemble au démarrage de l'application :

Et maintenant, lorsque vous cliquez sur désactiver :

Nous avons pu observer comment il y a eu le changement de la classe CSS d'une manière simple et que le contrôleur gérait tout.
Une autre façon d'appliquer les changements de style est avec la directive ng-classe, cela nous permet un peu plus de flexibilité puisque nous pouvons profiter de la façon dont cela fonctionne AngularJS ainsi nous pouvons arriver à évaluer les conditions et selon leur accomplissement nous pouvons montrer une classe ou une autre.
Voyons dans l'exemple suivant que nous voulons avoir une classe d'avertissement et une classe d'erreur, avec cela nous pouvons même afficher différents messages afin que l'utilisateur puisse être au courant de ce qui se passe. Nous avons les classes CSS que nous utiliserons :

 .error {couleur de fond : rouge; } .warning {couleur de fond : jaune ; } 

Nous allons maintenant générer le HTML, nous utiliserons dans la directive ng-classe quelques propriétés erreur : isError Oui avertissement : isWarningCes évaluations sont celles qui nous permettent de choisir une classe ou une autre parmi celles que nous avons définies dans le CSS.
Ensuite, nous avons un {{message}} qui affichera la valeur correspondante que nous placerons dans le contrôleur :

{{message}}Simuler l'erreur Simuler l'avertissement

Enfin on fait le travail en Javascript :

 function ClassesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Ceci est une erreur !'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Juste un avertissement.'; $ scope.isWarning = true; $ scope.isError = false; }; } 

Avec cela, nous obtiendrons alors un résultat comme le suivant dans notre navigateur :

AGRANDIR

Nous regardons la console dans l'image qui nous fait un ng-liaison avec la classe d'avertissement qui est celle que nous avons définie pour les avertissements, si nous cliquons sur Simuler l'erreur puis faites de même avec la classe d'erreur. Avec cela nous terminons ce tutoriel, nous avons déjà appris à lier les styles et les classes CSS avec nos applications made in AngularJS.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif