Kas yra kampinės JS išraiškos?
Išraiškos yra kintamieji, kurie buvo apibrėžti dvigubose petnešose {{}}. Jie labai dažnai naudojami „Angular JS“, ir juos pamatysite ankstesnėse mūsų pamokose.
Šioje pamokoje sužinosite
- Paaiškinkite „Angular.js“ išraiškas pavyzdžiu
- Kampiniai JS skaičiai
- Kampinės JS stygos
- KampiniaiJS objektai
- Kampiniai JS masyvai
- „AngularJS Expression“ galimybės ir apribojimai
- Išraiškų ir $ eval skirtumas
Paaiškinkite „Angular.js“ išraiškas pavyzdžiu
Kampinės JS išraiškos yra tos, kurios parašytos dvigubų petnešų {{expression}} viduje.
Sintaksė:
Paprastas išraiškos pavyzdys yra {{5 + 6}}.
Angular.JS išraiškos naudojamos duomenims susieti su HTML taip pat, kaip direktyva ng-bind. „AngularJS“ rodo duomenis tiksliai toje vietoje, kur dedama išraiška.
Pažvelkime į „Angular.JS“ posakių pavyzdį.
Šiame pavyzdyje mes tiesiog norime parodyti paprastą skaičių kaip išraiškos pridėjimą.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Kodo paaiškinimas:
- Mūsų pavyzdžio „ng-app“ direktyva yra tuščia, kaip parodyta aukščiau pateiktoje ekrano kopijoje. Tai reiškia tik tai, kad nėra prie modulio priskirtų valdiklių, direktyvų, paslaugų, pridedamų prie kodo.
- Pridedame paprastą išraišką, kurioje žiūrima į 2 skaičių pridėjimą.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Matyti, kad pridedami du skaičiai 9 ir 6 ir rodoma pridėtinė vertė 15.
Kampinis. JS skaičiai
Išraiškos gali būti naudojamos ir dirbant su skaičiais. Pažvelkime į „Angular.JS“ išraiškas su skaičiais.
Šiame pavyzdyje mes tiesiog norime parodyti paprastą 2 skaičių kintamųjų, vadinamų marža ir pelnas, dauginimą ir parodyti jų padaugintą vertę.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Kodo paaiškinimas:
- „Ng-init“ direktyva naudojama angular.js, kad apibrėžtų kintamuosius ir atitinkamas jų reikšmes pačiame rodinyje. Tai panašu į vietinių kintamųjų apibrėžimą koduoti bet kuria programavimo kalba. Šiuo atveju mes apibrėžiame 2 kintamuosius, vadinamus marža ir pelnas, ir priskiriame jiems vertes.
- Tada mes naudojame 2 vietinius kintamuosius ir padauginame jų vertes.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Aiškiai matoma, kad vyksta 2 skaičių 2 ir 200 dauginimasis ir rodoma padauginta 400 vertė.
Kampinės JS stygos
Išraiškos gali būti naudojamos ir dirbant su stygomis. Pažvelkime į kampinių JS išraiškų su eilutėmis pavyzdį.
Šiame pavyzdyje mes ketiname apibrėžti 2 eilutes „firstName“ ir „lastName“ ir atitinkamai jas rodyti naudodami išraiškas.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Kodo paaiškinimas:
- Naudojama ng-init direktyva, apibrėžianti kintamuosius firstName su reikšme „Guru“ ir kintamąjį lastName su reikšme „99“.
- Tada naudojame {{firstName}} ir {{lastName}} išraiškas, kad galėtume pasiekti šių kintamųjų vertę ir atitinkamai juos rodyti rodinyje.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties aiškiai matyti, kad ekrane rodomos vardo ir pavardės reikšmės.
Kampiniai.JS objektai
Išraiškos gali būti naudojamos ir dirbant su „JavaScript“ objektais.
Pažvelkime į „Angular.JS“ išraiškų su „javascript“ objektais pavyzdį. „Javascript“ objektą sudaro vardo ir vertės pora.
Žemiau pateikiamas „javascript“ objekto sintaksės pavyzdys.
Sintaksė:
var car = {type:"Ford", model:"Explorer", color:"White"};
Šiame pavyzdyje mes ketiname apibrėžti vieną objektą kaip asmens objektą, kuriame bus 2 pagrindinių reikšmių poros „firstName“ ir „lastName“.
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Kodo paaiškinimas:
- „Ng-init“ direktyva naudojama apibrėžti objekto asmenį, kuris savo ruožtu turi pagrindinių reikšmių poras firstName su verte „Guru“ ir kintamąjį lastName su reikšme „99“.
- Tada mes naudojame {{asmuo.priekinis vardas}} ir {{asmuo.secondName}} išraiškas, kad galėtume pasiekti šių kintamųjų vertę ir atitinkamai juos rodyti rodinyje. Kadangi tikrieji narių kintamieji yra objekto asmens dalis, jie turi prieiti prie taško (.) Žymėjimo, kad pasiektų savo tikrąją vertę.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Aiškiai matyti, kad ekrane rodomos „firstName“ ir „secondName“ reikšmės.
Kampiniai JS masyvai
Išraiškos gali būti naudojamos ir su masyvais. Pažvelkime į kampinių JS išraiškų su masyvais pavyzdį.
Šiame pavyzdyje mes apibrėžsime masyvą, kuris turės mokinio žymes 3 dalykuose. Rodinyje mes atitinkamai parodysime šių ženklų vertę.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Kodo paaiškinimas:
- Naudojama ng-init direktyva, apibrėžianti masyvą su pavadinimu „ženklai“ su 3 reikšmėmis 1, 15 ir 19.
- Tada mes naudojame ženklų [rodyklės] išraiškas, kad galėtume pasiekti kiekvieną masyvo elementą.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties galima aiškiai matyti, kad rodomi ženklai yra apibrėžti masyve.
„AngularJS Expression“ galimybės ir apribojimai
„Angular.JS Expression“ galimybės
- Kampinės išraiškos yra tarsi „JavaScript“ išraiškos. Taigi jis turi tą pačią galią ir lankstumą.
- „JavaScript“ bandant įvertinti neapibrėžtas ypatybes, jis sukuria „ReferenceError“ arba „TypeError“. Kalbant apie kampą, išraiškos vertinimas yra atlaidus ir sukuria neapibrėžtą arba nulinę vertę.
- Išraiškose galima naudoti filtrus duomenims formatuoti prieš juos rodant.
Kampinio JS išraiškos apribojimai
- Šiuo metu nėra galimybės naudoti sąlyginių, kilpų ar išimčių kampinėje išraiškoje
- Negalite deklaruoti funkcijų kampine išraiška, net ng-init direktyvos viduje.
- Negalima kurti reguliarių išraiškų kampine išraiška. Reguliarioji išraiška yra simbolių ir simbolių derinys, naudojamas surandant tokias eilutes kaip. * \. Txt $. Tokių posakių negalima naudoti „Angular JS“ išraiškose.
- Be to, negalima naudoti arba anuliuoti kampinės išraiškos.
Išraiškos ir $ eval skirtumas
Funkcija $ eval leidžia įvertinti išraiškas iš paties valdiklio. Taigi, jei rodinyje vertinimui naudojamos išraiškos, valdiklio funkcijoje naudojamas $ eval.
Pažvelkime į tai paprastą pavyzdį.
Šiame pavyzdyje
Mes tiesiog naudosime funkciją $ eval, norėdami pridėti 2 numerius ir padaryti juos prieinamus objekto taikymo srityje, kad jį būtų galima rodyti rodinyje.
Event Registration Guru99 Global Event
{{value}}
Kodo paaiškinimas:
- Pirmiausia apibrėžiame 2 kintamuosius „a“ ir „b“, kurių kiekvieno vertė yra 1.
- Mes naudojame funkciją $ scope. $ Eval, kad įvertintume 2 kintamųjų pridėjimą ir priskirtume jį srities kintamajam „value“.
- Tada mes tiesiog rodome kintamojo „value“ vertę rodinyje.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Pirmiau pateiktoje išvestyje rodoma valdiklio įvertintos išraiškos išvestis. Pirmiau pateikti rezultatai rodo, kad išraiška $ eval buvo naudojama norint pridėti 2 apimties kintamuosius „a ir b“, rezultatui išsiunčiant ir rodant rodinyje.
Santrauka:
- Mes matėme, kaip „Angular JS“ išraiškos gali būti naudojamos vertinant įprastas „JavaScript“ išraiškas, tokias kaip paprastas skaičių pridėjimas.
- „Ng-init“ direktyva gali būti naudojama apibrėžiant kintamuosius tiesiogiai, kurie gali būti naudojami rodinyje.
- Išraiškos gali būti naudojamos su primityviais tipais, tokiais kaip eilutės ir skaičiai.
- Išraiškos taip pat gali būti naudojamos dirbant su kitais tipais, tokiais kaip „JavaScript“ objektai ir masyvai.
- Išraiškos kampiniame JS turi keletą apribojimų, pavyzdžiui, nėra reguliarių išraiškų ar naudoti funkcijas, kilpas ar sąlyginius sakinius.