Hvad er kantede JS-udtryk?
Udtryk er variabler, der blev defineret i de dobbelte seler {{}}. De bruges meget almindeligt i Angular JS, og du vil se dem i vores tidligere tutorials.
I denne vejledning lærer du-
- Forklar Angular.js-udtryk med eksempel
- AngularJS-numre
- AngularJS strenge
- AngularJS-objekter
- AngularJS Arrays
- AngularJS-ekspressionsfunktioner og begrænsninger
- Forskellen mellem udtryk og $ eval
Forklar Angular.js-udtryk med et eksempel
AngularJS-udtryk er de, der er skrevet inden for dobbelte seler {{expression}}.
Syntaks:
Et simpelt eksempel på et udtryk er {{5 + 6}}.
Angular.JS-udtryk bruges til at binde data til HTML på samme måde som ng-bind-direktivet. AngularJS viser dataene nøjagtigt på det sted, hvor udtrykket placeres.
Lad os se på et eksempel på Angular.JS-udtryk.
I dette eksempel vil vi bare vise en simpel tilføjelse af tal som udtryk.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Kode Forklaring:
- Direktivet om ng-app i vores eksempel er tomt som vist i ovenstående skærmbillede. Dette betyder kun, at der ikke er noget modul til at tildele controllere, direktiver, tjenester tilknyttet koden.
- Vi tilføjer et simpelt udtryk, der ser på tilføjelsen af 2 tal.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan ses, at tilføjelsen af de to tal 9 og 6 finder sted, og merværdien på 15 vises.
Angular.JS-numre
Udtryk kan også bruges til at arbejde med tal. Lad os se på et eksempel på Angular.JS-udtryk med tal.
I dette eksempel vil vi bare vise en simpel multiplikation af 2 nummervariabler kaldet margin og fortjeneste og vist deres gangede værdi.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Kode Forklaring:
- Direktivet ng-init bruges i angular.js til at definere variabler og deres tilsvarende værdier i selve visningen. Det er ligesom at definere lokale variabler til kode på ethvert programmeringssprog. I dette tilfælde definerer vi 2 variabler kaldet margin og fortjeneste og tildeler værdier til dem.
- Vi bruger derefter de to lokale variabler og multiplicerer deres værdier.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan tydeligt ses, at multiplikationen af de 2 tal 2 og 200 finder sted, og den gangede værdi på 400 vises.
AngularJS strenge
Udtryk kan også bruges til at arbejde med strenge. Lad os se på et eksempel på Angular JS-udtryk med strenge.
I dette eksempel skal vi definere 2 strenge af "fornavn" og "efternavn" og vise dem ved hjælp af udtryk i overensstemmelse hermed.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Kode Forklaring:
- Direktivet ng-init bruges til at definere variablerne firstName med værdien "Guru" og variablen lastName med værdien "99".
- Vi bruger derefter udtryk for {{firstName}} og {{lastName}} til at få adgang til værdien af disse variabler og vise dem i visningen i overensstemmelse hermed.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output kan det tydeligt ses, at værdierne fornavn og efternavn vises på skærmen.
Angular.JS objekter
Udtryk kan også bruges til at arbejde med JavaScript-objekter.
Lad os se på et eksempel på Angular.JS-udtryk med javascript-objekter. Et javascript-objekt består af et navn-værdipar.
Nedenfor er et eksempel på syntaksen for et javascript-objekt.
Syntaks:
var car = {type:"Ford", model:"Explorer", color:"White"};
I dette eksempel skal vi definere et objekt som et personobjekt, der vil have 2 nøgleværdipar af "fornavn" og "efternavn".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Kode Forklaring:
- Direktivet om ng-init bruges til at definere objektpersonen, som igen har nøgleværdipar med fornavn med værdien "Guru" og variablen efternavn med værdien "99".
- Vi bruger derefter udtryk for {{person.firstName}} og {{person.secondName}} for at få adgang til værdien af disse variabler og vise dem i visningen i overensstemmelse hermed. Da de faktiske medlemsvariabler er en del af objektpersonen, skal de få adgang til den med punktum (.) -Notationen for at få adgang til deres faktiske værdi.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan tydeligt ses, at værdierne for "firstName" og "secondName" vises på skærmen.
AngularJS Arrays
Udtryk kan også bruges til at arbejde med arrays. Lad os se på et eksempel på Angular JS-udtryk med arrays.
I dette eksempel vil vi definere en matrix, der skal indeholde karakterer for en studerende i 3 fag. I visningen viser vi værdien af disse mærker i overensstemmelse hermed.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Kode Forklaring:
- Direktivet ng-init bruges til at definere arrayet med navnet "marks" med 3 værdier på 1, 15 og 19.
- Vi bruger derefter udtryk for mærker [indeks] for at få adgang til hvert element i arrayet.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output kan det tydeligt ses, at de markeringer, der vises, og som er defineret i arrayet.
AngularJS-ekspressionsfunktioner og begrænsninger
Angular.JS-ekspressionsfunktioner
- Vinkeludtryk er som JavaScript-udtryk. Derfor har den samme kraft og fleksibilitet.
- I JavaScript, når du prøver at evaluere udefinerede egenskaber, genererer det en ReferenceError eller TypeError. I Angular er udtryksevaluering tilgivende og genererer en udefineret eller null.
- Man kan bruge filtre inden for udtryk til at formatere data, før de vises.
Kantede JS-ekspressionsbegrænsninger
- Der er i øjeblikket ingen tilgængelighed til at bruge betingede, sløjfer eller undtagelser i et vinkeludtryk
- Du kan ikke erklære funktioner i et vinkeludtryk, selv ikke inde i ng-init-direktivet.
- Man kan ikke oprette regulære udtryk i et vinkeludtryk. Et regulært udtryk er en kombination af symboler og tegn, der bruges til at finde til strenge som. * \. Txt $. Sådanne udtryk kan ikke bruges i Angular JS-udtryk.
- Man kan heller ikke bruge eller annullere et vinkeludtryk.
Forskel mellem udtryk og $ eval
$ Eval-funktionen tillader en at evaluere udtryk fra selve controlleren. Så mens udtryk bruges til evaluering i visningen, bruges $ eval i controller-funktionen.
Lad os se på et simpelt eksempel på dette.
I dette eksempel
Vi skal bare bruge $ eval-funktionen til at tilføje 2 tal og gøre det tilgængeligt i omfangsobjektet, så det kan vises i visningen.
Event Registration Guru99 Global Event
{{value}}
Kode Forklaring:
- Vi definerer først 2 variabler 'a' og 'b', som hver har en værdi på 1.
- Vi bruger $ scope. $ Eval-funktionen til at evaluere tilføjelsen af de 2 variabler og tildele den til omfangsvariablen 'værdi'.
- Vi viser så bare værdien af variablen 'værdi' i visningen.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Ovenstående output viser output for det udtryk, der blev evalueret i controlleren. Ovenstående resultater viser, at $ eval-udtrykket blev brugt til at udføre tilføjelsen af de 2 omfangsvariabler 'a og b' med resultatet sendt og vist i visningen.
Resumé:
- Vi har set, hvordan udtryk i Angular JS kan bruges til at evaluere regelmæssige JavaScript-lignende udtryk, såsom simpel tilføjelse af tal.
- Direktivet ng-init kan bruges til at definere variabler in-line, som kan bruges i visningen.
- Udtryk kan fås til at arbejde med primitive typer som strenge og tal.
- Udtryk kan også bruges til at arbejde med andre typer såsom JavaScript-objekter og arrays.
- Udtryk i Angular JS har nogle få begrænsninger som for eksempel ikke at have regelmæssige udtryk eller bruge funktioner, sløjfer eller betingede udsagn.