Mi az a szögletes JS kifejezés?
A kifejezések a kettős zárójelben {{}} definiált változók. Nagyon gyakran használják őket az Angular JS-en belül, és láthatná őket korábbi oktatóanyagainkban.
Ebben az oktatóanyagban megtanulja-
- Magyarázza példával az Angular.js kifejezéseket
- Szögletes JS számok
- SzögletesJS húrok
- AngularJS Objects
- AngularJS tömbök
- AngularJS Expression képességek és korlátozások
- A különbség a kifejezések és a $ eval között
Magyarázza meg példával az Angular.js kifejezéseket
A szögletes JS kifejezések azok, amelyeket kettős zárójelek közé írtak {{kifejezés}}.
Szintaxis:
A kifejezés egyszerű példája a {{5 + 6}}.
Az Angular.JS kifejezéseket az adatok HTML-hez kötésére használják, ugyanúgy, mint az ng-bind direktívát. Az AngularJS pontosan azon a helyen jeleníti meg az adatokat, ahová a kifejezés kerül.
Nézzünk meg egy példát az Angular.JS kifejezésekre.
Ebben a példában csak a számok egyszerű kiegészítését szeretnénk bemutatni kifejezésként.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Kód Magyarázat:
- A példánkban szereplő ng-app irányelv üres, ahogy a fenti képernyőképen látható. Ez csak azt jelenti, hogy nincs modul, amely vezérlőket, irányelveket, szolgáltatásokat rendelne a kódhoz.
- Hozzáadunk egy egyszerű kifejezést, amely 2 szám hozzáadását vizsgálja.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Látható, hogy a két 9 és 6 szám összeadása megtörténik, és megjelenik a 15 hozzáadott értéke.
Szögletes.JS számok
Kifejezések használhatók számokkal is. Nézzünk meg egy példát az Angular.JS kifejezésekre számokkal.
Ebben a példában csak 2 számváltozó egyszerű szorzását akarjuk bemutatni, az úgynevezett margin és profit nevet, és megjelenítettük szorzott értéküket.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Kód Magyarázat:
- Az ng-init direktívát az angular.js fájlban használják a változók és azok megfelelő értékeinek meghatározására magában a nézetben. Ez valamennyire hasonlít a helyi változók definiálására a kódoláshoz bármilyen programozási nyelven. Ebben az esetben 2 változót határozunk meg, az úgynevezett margin and profit, és értékeket rendelünk hozzájuk.
- Ezután felhasználjuk a 2 helyi változót, és megszorozzuk az értékeiket.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Jól látható, hogy a 2-es és a 200-as szám szorzata megtörténik, és megjelenik a 400 szorzó értéke.
SzögletesJS húrok
A kifejezéseket karakterláncokkal is lehet használni. Nézzünk meg egy példát az Angular JS kifejezésekre karakterláncokkal.
Ebben a példában megfogalmazunk 2 "firstName" és "lastName" karakterláncot, és a megfelelő kifejezésekkel jelenítjük meg őket.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Kód Magyarázat:
- Az ng-init direktíva a firstName változót definiálja a "Guru" értékkel és a lastName változót a "99" értékkel.
- Ezután a {{firstName}} és a {{lastName}} kifejezéseket használjuk, hogy hozzáférjünk a változók értékéhez, és ennek megfelelően megjelenítsük őket a nézetben.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből jól látható, hogy a keresztnév és a vezetéknév értékek megjelennek a képernyőn.
Szögletes.JS objektumok
A kifejezések használhatók JavaScript objektumokkal is.
Nézzünk meg egy példát az Angular.JS kifejezésekre javascript objektumokkal. A javascript objektum név-érték párból áll.
Az alábbiakban bemutatunk egy példát egy javascript objektum szintaxisára.
Szintaxis:
var car = {type:"Ford", model:"Explorer", color:"White"};
Ebben a példában egy objektumot fogunk definiálni személyi objektumként, amelynek két kulcsérték-párja lesz: "keresztnév" és "vezetéknév".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Kód Magyarázat:
- Az ng-init direktíva az objektum személy meghatározására szolgál, amelynek viszont a keresztnév kulcsérték párjai vannak a "Guru" értékkel és a vezetéknév változó a "99" értékkel.
- Ezután a {{person.firstName}} és a {{person.secondName}} kifejezéseket használjuk, hogy hozzáférjünk ezeknek a változóknak az értékéhez, és ennek megfelelően megjelenítsük őket a nézetben. Mivel a tényleges tagváltozók az objektumszemély részét képezik, a tényleges értékük eléréséhez a dot (.) Jelöléssel kell hozzá férniük.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Jól látható, hogy a képernyőn a "keresztnév" és a "második név" értékek jelennek meg.
AngularJS tömbök
A kifejezések tömbökkel is használhatók. Nézzünk egy példát tömbökkel ellátott szögletes JS kifejezésekre.
Ebben a példában meghatározunk egy tömböt, amely 3 tantárgy hallgatóinak jegyeit fogja megtartani. A nézetben ezeknek a jeleknek az értékét ennek megfelelően jelenítjük meg.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Kód Magyarázat:
- Az ng-init direktíva a tömböt a "jelek" névvel definiálja, 3 értékkel: 1, 15 és 19.
- Ezután a jelek [index] kifejezéseit használjuk a tömb minden eleméhez való hozzáféréshez.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből jól látható, hogy a tömbben definiált jelek megjelennek.
AngularJS Expression képességek és korlátozások
Angular.JS Expression képességek
- A szögletes kifejezések olyanok, mint a JavaScript kifejezések. Ezért ugyanaz az erő és rugalmasság.
- A JavaScript-ben, amikor megpróbálja meghatározni a nem definiált tulajdonságokat, az létrehoz egy ReferenceError-t vagy TypeError-t. A szögben az expresszió kiértékelése elnéző és meghatározatlan vagy null értéket generál.
- A kifejezéseken belüli szűrőket felhasználhatja az adatok formázására, mielőtt megjelenítenék azokat.
Szögletes JS kifejezés korlátai
- Jelenleg nem áll rendelkezésre feltételes feltételek, ciklusok vagy kivételek használata egy szögletes kifejezésben
- Nem deklarálhatja a függvényeket szögletes kifejezésben, még az ng-init irányelvben sem.
- Nem lehet szabályos kifejezéseket létrehozni egy szögletes kifejezésben. A reguláris kifejezés a szimbólumok és a karakterek kombinációja, amelyeket az olyan karakterláncok keresésére használnak, mint a. * \. Txt $. Az ilyen kifejezések nem használhatók az Angular JS kifejezéseken belül.
- Ezenkívül nem lehet használni vagy semmisíteni egy szögletes kifejezést.
Különbség a kifejezés és a $ eval között
A $ eval függvény lehetővé teszi a kifejezések kiértékelését magában a vezérlőben. Tehát míg a nézetben kifejezéseket használunk kiértékelésre, addig a $ eval a vezérlő funkcióban használatos.
Nézzünk meg egy egyszerű példát erre.
Ebben a példában
Éppen a $ eval függvényt fogjuk használni 2 szám hozzáadásához és elérhetővé tételéhez a hatókör objektumban, hogy az megjelenjen a nézetben.
Event Registration Guru99 Global Event
{{value}}
Kód Magyarázat:
- Először meghatározunk 2 „a” és „b” változót, amelyek mindegyikének értéke 1.
- A $ scope. $ Eval függvényt használjuk a 2 változó összeadásának kiértékeléséhez és hozzárendeléséhez az „value” hatókörváltozóhoz.
- Ezután csak az „érték” változó értékét jelenítjük meg a nézetben.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A fenti kimenet a kifejezés kimenetét mutatja, amelyet kiértékeltek a vezérlőben. A fenti eredmények azt mutatják, hogy a $ eval kifejezést alkalmazták a 2 „a” és „b” hatókörváltozó hozzáadásához a nézetben elküldött és megjelenített eredménnyel.
Összegzés:
- Láttuk, hogyan használhatók az Angular JS kifejezései a szokásos JavaScript-ek, például a számok egyszerű hozzáadása, kiértékelésére.
- Az ng-init direktíva használható a változók sorban történő meghatározására, amelyek felhasználhatók a nézetben.
- A kifejezéseket olyan primitív típusokkal lehet használni, mint a karakterláncok és a számok.
- A kifejezések más típusokkal is használhatók, például JavaScript objektumokkal és tömbökkel.
- A szögletes JS-ben szereplő kifejezéseknek van néhány korlátozása, például nem reguláris kifejezések, vagy függvények, ciklusok vagy feltételes utasítások használata.