Expressions dans AngularJS

Lorsque nous travaillons sur des modèles, nous devons souvent les rendre plus intelligents, cela signifie aller au-delà du simple affichage des données, mais cela ne devrait pas signifier que nous effectuons tout le travail dans ce qui devrait être la seule interface de sortie pour l'utilisateur.
AngularJS nous offre ce qu'on appelle expressions, qui sont des opérateurs de comparaison, logiques et arithmétiques, avec lesquels nous pouvons fournir de l'intelligence au modèle et ainsi interagir de manière plus poussée avec le contrôleur.
ExpressionsLes expressions nous permettent de créer des modèles qui peuvent être plus intelligents, avec cela nous pouvons exprimer à la fois des changements d'interface et de comportement en fonction des données que le contrôleur nous propose.
En utilisant des expressions, nous pouvons obtenir des comportements dynamiques de nos modèles, ce qui peut aider à améliorer l'expérience utilisateur et ainsi les guider sur la voie d'une bonne utilisation de notre application.
Pour ce faire, nous pouvons utiliser un certain nombre de gadgets qui, bien qu'ils ne soient pas aussi larges et profonds que JavascriptIls offrent une grande marge de manœuvre. Il est important de ne pas être tenté d'utiliser des expressions pour créer une logique dans nos modèles, car nous déformerions leur fonction et ajouterions une complexité inutile à nos applications.
Les expressions que nous pouvons utiliser sont :
ArithmétiqueTels que l'addition (+), la soustraction (-), la multiplication (*), la division (/), etc.
ComparaisonTels que supérieur (>) ou inférieur (<) à, égal (==) ou différent (! =) À, et leurs combinaisons.
LogiqueComme différent (!), Et (&&), ou (||).
AppelsAppelez les méthodes et fonctions de notre contrôleur avec $ scope ({}).
Voyons ci-dessous un petit exemple qui peut nous aider à comprendre l'utilisation des expressions dans nos templates dans une application faite avec AngularJS.

Si nous regardons l'exemple nous avons incorporé quelques expressions, par exemple nous pouvons accéder à la méthode recalculer() et son résultat ou son retour le divise par 10, puis dans une liste d'éléments on peut placer les classes CSS en validant le reste de l'index $ en le divisant par 4 ($ index% 4) puis en comparant s'il est supérieur ou égal au résultat d'une méthode appelée limite.
Comme nous pouvons le voir, ce n'est pas difficile du tout et il est très utile d'avoir ces outils, si nous inspectons l'exemple d'une meilleure manière, nous remarquerons également que notre première expression bien que techniquement valide, son existence transfère la logique métier au modèle.
L'expression {{recalculer () / 10}} Il ne doit pas être utilisé, si nous avons besoin de la valeur divisée par 10 du résultat de la méthode recalculate(), nous devons l'obtenir dans le contrôleur et non dans le modèle, nous devons donc créer une nouvelle méthode qui l'intègre et ainsi être capable de respecter la séparation des zones suggérée par MVC.
Avec cela, nous terminons le tutoriel, comme nous le voyons AngularJS Il nous donne les outils pour que nous puissions créer des applications de qualité, en tirant parti de toutes les ressources auxquelles nous pouvons penser pour créer de meilleures applications.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif