Vad är Angular JS-uttryck?
Uttryck är variabler som definierades i de dubbla hakparenteserna {{}}. De används mycket ofta inom Angular JS, och du skulle se dem i våra tidigare självstudier.
I den här handledningen lär du dig-
- Förklara Angular.js-uttryck med exempel
- AngularJS-nummer
- AngularJS-strängar
- AngularJS-objekt
- AngularJS Arrays
- AngularJS-uttrycksfunktioner och begränsningar
- Skillnaden mellan uttryck och $ eval
Förklara Angular.js-uttryck med ett exempel
AngularJS-uttryck är de som skrivs i dubbla hakparenteser {{expression}}.
Syntax:
Ett enkelt exempel på ett uttryck är {{5 + 6}}.
Angular.JS-uttryck används för att binda data till HTML på samma sätt som ng-bind-direktivet. AngularJS visar data exakt på den plats där uttrycket placeras.
Låt oss titta på ett exempel på Angular.JS-uttryck.
I det här exemplet vill vi bara visa ett enkelt antal siffror som ett uttryck.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Kodförklaring:
- Direktivet om ng-app i vårt exempel är tomt som visas i skärmdumpen ovan. Detta betyder bara att det inte finns någon modul för att tilldela styrenheter, direktiv, tjänster kopplade till koden.
- Vi lägger till ett enkelt uttryck som tittar på tillägget av två siffror.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan ses att tillägget av de två siffrorna 9 och 6 sker och mervärdet 15 visas.
Angular.JS-nummer
Uttryck kan också användas för att arbeta med siffror. Låt oss titta på ett exempel på Angular.JS-uttryck med siffror.
I det här exemplet vill vi bara visa en enkel multiplikation av två nummervariabler som kallas marginal och vinst och visade deras multiplicerade värde.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Kodförklaring:
- Direktivet ng-init används i angular.js för att definiera variabler och deras motsvarande värden i själva vyn. Det är ungefär som att definiera lokala variabler för att koda på vilket programmeringsspråk som helst. I det här fallet definierar vi två variabler som kallas marginal och vinst och tilldelar dem värden.
- Vi använder sedan de två lokala variablerna och multiplicerar deras värden.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan tydligt ses att multipliceringen av de 2 siffrorna 2 och 200 sker, och det multiplicerade värdet på 400 visas.
AngularJS-strängar
Uttryck kan också användas för att arbeta med strängar. Låt oss titta på ett exempel på Angular JS-uttryck med strängar.
I det här exemplet ska vi definiera två strängar av "förnamn" och "efternamn" och visa dem med hjälp av uttryck därefter.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Kodförklaring:
- Direktivet ng-init används definiera variablerna firstName med värdet "Guru" och variabeln lastName med värdet "99".
- Vi använder sedan uttryck för {{firstName}} och {{lastName}} för att komma åt värdet av dessa variabler och visa dem i vyn i enlighet därmed.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från utdata kan man tydligt se att värdena förnamn och efternamn visas på skärmen.
Angular.JS-objekt
Uttryck kan också användas för att arbeta med JavaScript-objekt.
Låt oss titta på ett exempel på Angular.JS-uttryck med javascript-objekt. Ett javascript-objekt består av ett namn-värde-par.
Nedan följer ett exempel på syntaxen för ett javascript-objekt.
Syntax:
var car = {type:"Ford", model:"Explorer", color:"White"};
I det här exemplet ska vi definiera ett objekt som ett personobjekt som kommer att ha två nyckelvärdepar av "förnamn" och "efternamn".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Kodförklaring:
- Direktivet ng-init används för att definiera objektpersonen som i sin tur har nyckelvärdepar av förnamn med värdet "Guru" och variabeln efternamn med värdet "99".
- Vi använder sedan uttryck för {{person.firstName}} och {{person.secondName}} för att komma åt värdet av dessa variabler och visa dem i vyn i enlighet därmed. Eftersom de faktiska medlemsvariablerna är en del av objektpersonen måste de komma åt den med punkten (.) För att få tillgång till deras faktiska värde.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan tydligt ses att värdena för "firstName" och "secondName" visas på skärmen.
AngularJS Arrays
Uttryck kan också användas för att arbeta med matriser. Låt oss titta på ett exempel på Angular JS-uttryck med matriser.
I det här exemplet ska vi definiera en matris som kommer att hålla studenternas betyg i 3 ämnen. I vyn visar vi värdet på dessa märken i enlighet med detta.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Kodförklaring:
- Direktivet ng-init används för att definiera matrisen med namnet "märken" med 3 värden 1, 15 och 19.
- Vi använder sedan markeringsuttryck [index] för att komma åt varje element i matrisen.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från utgången kan det tydligt ses att de markeringar som visas och som definieras i matrisen.
AngularJS-uttrycksfunktioner och begränsningar
Angular.JS-uttrycksfunktioner
- Vinkeluttryck är som JavaScript-uttryck. Därför har den samma kraft och flexibilitet.
- När du försöker utvärdera odefinierade egenskaper i JavaScript genereras en ReferenceError eller TypeError. I Angular är uttrycksvärdering förlåtande och genererar en odefinierad eller null.
- Man kan använda filter inom uttryck för att formatera data innan de visas.
Vinkeljusteringar för JS-uttryck
- Det finns för närvarande ingen tillgänglighet för att använda villkor, loopar eller undantag i ett vinkeluttryck
- Du kan inte deklarera funktioner i ett vinkeluttryck, inte ens i ng-init-direktivet.
- Man kan inte skapa reguljära uttryck i ett vinkeluttryck. Ett vanligt uttryck är en kombination av symboler och tecken som används för att hitta för strängar som. * \. Txt $. Sådana uttryck kan inte användas inom Angular JS-uttryck.
- Man kan inte heller använda eller annullera i ett vinkeluttryck.
Skillnad mellan uttryck och $ eval
Med $ eval-funktionen kan man utvärdera uttryck inifrån själva styrenheten. Så medan uttryck används för utvärdering i vyn används $ eval i kontrollerfunktionen.
Låt oss titta på ett enkelt exempel på detta.
I detta exempel,
Vi ska bara använda $ eval-funktionen för att lägga till två nummer och göra den tillgänglig i omfångsobjektet så att den kan visas i vyn.
Event Registration Guru99 Global Event
{{value}}
Kodförklaring:
- Vi definierar först två variabler 'a' och 'b', var och en har värdet 1.
- Vi använder $ scope. $ Eval-funktionen för att utvärdera tillägget av de två variablerna och tilldela den till omfångsvariabeln 'värde'.
- Vi visar då bara värdet på variabeln 'värde' i vyn.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Ovanstående utdata visar utgången för uttrycket som utvärderades i styrenheten. Ovanstående resultat visar att $ eval-uttrycket användes för att utföra tillägget av de två omfattningsvariablerna 'a och b' med resultatet skickat och visat i vyn.
Sammanfattning:
- Vi har sett hur uttryck i Angular JS kan användas för att utvärdera vanliga JavaScript-liknande uttryck, till exempel det enkla tillägget av siffror.
- Direktivet ng-init kan användas för att definiera variabler in-line som kan användas i vyn.
- Uttryck kan göras för att fungera med primitiva typer som strängar och siffror.
- Uttryck kan också användas för att arbeta med andra typer som JavaScript-objekt och matriser.
- Uttryck i Angular JS har några begränsningar som till exempel att inte ha reguljära uttryck eller använda funktioner, loopar eller villkorliga uttalanden.