Expressions AngularJS: ARRAY, objets, $ eval, chaînes (exemples)

Table des matières:

Anonim

Qu'est-ce que les expressions angulaires JS?

Les expressions sont des variables qui ont été définies entre les doubles accolades {{}}. Ils sont très couramment utilisés dans Angular JS, et vous les verrez dans nos tutoriels précédents.

Dans ce didacticiel, vous apprendrez-

  • Expliquer les expressions Angular.js avec un exemple
  • Numéros AngularJS
  • Chaînes AngularJS
  • Objets AngularJS
  • Tableaux AngularJS
  • Capacités et limitations de l'expression AngularJS
  • La différence entre les expressions et $ eval

Expliquer les expressions Angular.js avec un exemple

Les expressions AngularJS sont celles qui sont écrites entre doubles accolades {{expression}}.

Syntaxe:

Un exemple simple d'expression est {{5 + 6}}.

Les expressions Angular.JS sont utilisées pour lier des données au HTML de la même manière que la directive ng-bind. AngularJS affiche les données exactement à l'endroit où l'expression est placée.

Regardons un exemple d'expressions Angular.JS.

Dans cet exemple, nous voulons simplement montrer une simple addition de nombres en tant qu'expression.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Explication du code:

  1. La directive ng-app dans notre exemple est vide, comme indiqué dans la capture d'écran ci-dessus. Cela signifie seulement qu'il n'y a pas de module pour affecter des contrôleurs, des directives, des services attachés au code.
  2. Nous ajoutons une expression simple qui regarde l'addition de 2 nombres.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

De la sortie,

  • On voit que l'addition des deux nombres 9 et 6 a lieu et que la valeur ajoutée de 15 est affichée.

Nombres Angular.JS

Les expressions peuvent également être utilisées pour travailler avec des nombres. Regardons un exemple d'expressions Angular.JS avec des nombres.

Dans cet exemple, nous voulons simplement montrer une simple multiplication de 2 variables numériques appelées marge et profit et afficher leur valeur multipliée.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Explication du code:

  1. La directive ng-init est utilisée dans angular.js pour définir les variables et leurs valeurs correspondantes dans la vue elle-même. C'est un peu comme définir des variables locales à coder dans n'importe quel langage de programmation. Dans ce cas, nous définissons 2 variables appelées marge et profit et leur attribuons des valeurs.
  2. Nous utilisons alors les 2 variables locales et multiplions leurs valeurs.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

De la sortie,

  • On voit clairement que la multiplication des 2 nombres 2 et 200 a lieu et que la valeur multipliée de 400 est affichée.

Chaînes AngularJS

Les expressions peuvent également être utilisées pour travailler avec des chaînes. Regardons un exemple d'expressions Angular JS avec des chaînes.

Dans cet exemple, nous allons définir 2 chaînes de "firstName" et "lastName" et les afficher en utilisant des expressions en conséquence.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Explication du code:

  1. La directive ng-init est utilisée pour définir les variables firstName avec la valeur "Guru" et la variable lastName avec la valeur "99".
  2. Nous utilisons alors les expressions {{firstName}} et {{lastName}} pour accéder à la valeur de ces variables et les afficher dans la vue en conséquence.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

À partir de la sortie, on peut clairement voir que les valeurs de firstName et lastName sont affichées à l'écran.

Objets Angular.JS

Les expressions peuvent également être utilisées pour travailler avec des objets JavaScript.

Regardons un exemple d'expressions Angular.JS avec des objets javascript. Un objet javascript se compose d'une paire nom-valeur.

Voici un exemple de la syntaxe d'un objet javascript.

Syntaxe:

var car = {type:"Ford", model:"Explorer", color:"White"};

Dans cet exemple, nous allons définir un objet comme un objet personne qui aura 2 paires clé-valeur de "firstName" et "lastName".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Explication du code:

  1. La directive ng-init est utilisée pour définir l'objet personne qui à son tour a des paires clé-valeur de firstName avec la valeur "Guru" et la variable lastName avec la valeur "99".
  2. Nous utilisons ensuite les expressions {{person.firstName}} et {{person.secondName}} pour accéder à la valeur de ces variables et les afficher dans la vue en conséquence. Étant donné que les variables membres réelles font partie de l'objet personne, elles doivent y accéder avec la notation point (.) Pour accéder à leur valeur réelle.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

De la sortie,

  • On voit clairement que les valeurs de "firstName" et "secondName" sont affichées à l'écran.

Tableaux AngularJS

Les expressions peuvent également être utilisées pour travailler avec des tableaux. Regardons un exemple d'expressions Angular JS avec des tableaux.

Dans cet exemple, nous allons définir un tableau qui va contenir les notes d'un élève dans 3 matières. Dans la vue, nous afficherons la valeur de ces marques en conséquence.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Explication du code:

  1. La directive ng-init est utilisée pour définir le tableau avec le nom "marks" avec 3 valeurs de 1, 15 et 19.
  2. Nous utilisons alors des expressions de marques [index] pour accéder à chaque élément du tableau.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

À partir de la sortie, on peut clairement voir que les marques affichées, qui sont définies dans le tableau.

Capacités et limitations de l'expression AngularJS

Capacités d'expression Angular.JS

  1. Les expressions angulaires sont comme des expressions JavaScript. Par conséquent, il a le même pouvoir et la même flexibilité.
  2. En JavaScript, lorsque vous essayez d'évaluer des propriétés non définies, il génère une ReferenceError ou TypeError. Dans Angular, l'évaluation des expressions est indulgente et génère une valeur indéfinie ou nulle.
  3. On peut utiliser des filtres dans les expressions pour formater les données avant de les afficher.

Limitations de l'expression angulaire JS

  1. Il n'y a actuellement aucune disponibilité pour utiliser des conditions, des boucles ou des exceptions dans une expression angulaire
  2. Vous ne pouvez pas déclarer de fonctions dans une expression Angular, même à l'intérieur de la directive ng-init.
  3. On ne peut pas créer d'expressions régulières dans une expression angulaire. Une expression régulière est une combinaison de symboles et de caractères, qui sont utilisés pour rechercher des chaînes telles que. * \. Txt $. De telles expressions ne peuvent pas être utilisées dans les expressions Angular JS.
  4. En outre, on ne peut pas utiliser, ou vide dans une expression angulaire.

Différence entre expression et $ eval

La fonction $ eval permet d'évaluer des expressions à partir du contrôleur lui-même. Ainsi, alors que les expressions sont utilisées pour l'évaluation dans la vue, $ eval est utilisé dans la fonction de contrôleur.

Regardons un exemple simple à ce sujet.

Dans cet exemple,

Nous allons simplement utiliser la fonction $ eval pour ajouter 2 nombres et le rendre disponible dans l'objet scope afin qu'il puisse être affiché dans la vue.

Event Registration


Guru99 Global Event

{{value}}

Explication du code:

  1. Nous définissons d'abord 2 variables «a» et «b», chacune ayant une valeur de 1.
  2. Nous utilisons la fonction $ scope. $ Eval pour évaluer l'ajout des 2 variables et l'assigner à la variable scope 'value'.
  3. Nous affichons alors simplement la valeur de la variable «valeur» dans la vue.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

La sortie ci-dessus montre la sortie de l'expression qui a été évaluée dans le contrôleur. Les résultats ci-dessus montrent que l'expression $ eval a été utilisée pour effectuer l'ajout des 2 variables de portée «a et b» avec le résultat envoyé et affiché dans la vue.

Résumé:

  • Nous avons vu comment les expressions dans Angular JS peuvent être utilisées pour évaluer des expressions régulières de type JavaScript telles que la simple addition de nombres.
  • La directive ng-init peut être utilisée pour définir des variables en ligne qui peuvent être utilisées dans la vue.
  • Les expressions peuvent être conçues pour fonctionner avec des types primitifs tels que des chaînes et des nombres.
  • Les expressions peuvent également être utilisées pour travailler avec d'autres types tels que des objets JavaScript et des tableaux.
  • Les expressions dans Angular JS ont quelques limitations comme par exemple ne pas avoir d'expressions régulières ou utiliser des fonctions, des boucles ou des instructions conditionnelles.