Kas ir leņķiskās JS izteiksmes?
Izteiksmes ir mainīgie, kas tika definēti dubultās iekavās {{}}. Tos ļoti bieži izmanto Angular JS, un jūs tos redzēsit mūsu iepriekšējās apmācībās.
Šajā apmācībā jūs uzzināsiet
- Paskaidrojiet Angular.js izteiksmes ar piemēru
- StūraJS numuri
- StūrveidaJS stīgas
- AngularJS objekti
- AngularJS masīvi
- AngularJS izteiksmes iespējas un ierobežojumi
- Atšķirība starp izteiksmēm un $ eval
Paskaidrojiet Angular.js izteiksmes ar piemēru
Leņķiskās JS izteiksmes ir tās, kas ir ierakstītas dubultās iekavās {{expression}}.
Sintakse:
Vienkāršs izteiksmes piemērs ir {{5 + 6}}.
Angular.JS izteiksmes tiek izmantotas, lai datus saistītu ar HTML tāpat kā direktīva ng-bind. AngularJS datus parāda tieši vietā, kur atrodas izteiksme.
Apskatīsim Angular.JS izteicienu piemēru.
Šajā piemērā mēs vienkārši vēlamies parādīt vienkāršu skaitļu pievienošanu kā izteiksmi.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Koda skaidrojums:
- Mūsu piemērā ng-app direktīva ir tukša, kā parādīts iepriekš redzamajā ekrānuzņēmumā. Tas nozīmē tikai to, ka nav moduļa, kas piešķirtu kodam pievienotus kontrolierus, direktīvas, pakalpojumus.
- Mēs pievienojam vienkāršu izteicienu, kurā apskatīts 2 skaitļu pievienošana.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka notiek divu skaitļu 9 un 6 pievienošana un tiek parādīta pievienotā vērtība 15.
Stūra. JS numuri
Izteiksmes var izmantot arī darbam ar skaitļiem. Apskatīsim Angular.JS izteicienu ar skaitļiem piemēru.
Šajā piemērā mēs vienkārši vēlamies parādīt vienkāršu 2 skaitļu mainīgo reizinājumu, ko sauc par starpību un peļņu, un parādīja to reizināto vērtību.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Koda skaidrojums:
- Direktīva ng-init tiek izmantota angular.js, lai definētu mainīgos un tiem atbilstošās vērtības pašā skatā. Tas nedaudz līdzinās vietējo mainīgo definēšanai kodēšanai jebkurā programmēšanas valodā. Šajā gadījumā mēs definējam 2 mainīgos, kurus sauc par starpību un peļņu, un piešķiram tiem vērtības.
- Pēc tam mēs izmantojam 2 lokālos mainīgos un reizinām to vērtības.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var skaidri redzēt, ka notiek 2 skaitļu 2 un 200 reizināšana, un tiek parādīta reizinātā vērtība 400.
StūrveidaJS stīgas
Izteiksmes var izmantot arī darbam ar virknēm. Apskatīsim leņķisko JS izteicienu ar virknēm piemēru.
Šajā piemērā mēs definēsim 2 virknes "firstName" un "lastName" un attiecīgi parādīsim tos, izmantojot izteicienus.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Koda skaidrojums:
- Tiek izmantota ng-init direktīva, kas definē mainīgos firstName ar vērtību "Guru" un mainīgo lastName ar vērtību "99".
- Pēc tam mēs izmantojam {{firstName}} un {{lastName}} izteiksmes, lai piekļūtu šo mainīgo vērtībai un attiecīgi parādītu tos skatā.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Pēc izejas var skaidri redzēt, ka ekrānā tiek parādītas vārda un uzvārda vērtības.
Stūra.JS objekti
Izteiksmes var izmantot arī darbam ar JavaScript objektiem.
Apskatīsim Angular.JS izteicienu ar javascript objektiem piemēru. Javascript objekts sastāv no nosaukuma un vērtības pāra.
Zemāk ir Javascript objekta sintakses piemērs.
Sintakse:
var car = {type:"Ford", model:"Explorer", color:"White"};
Šajā piemērā mēs definēsim vienu objektu kā personas objektu, kuram būs 2 atslēgas vērtību pāri "firstName" un "lastName".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Koda skaidrojums:
- Direktīva ng-init tiek izmantota, lai definētu objekta personu, kurai savukārt ir atslēgas vērtību pāri vārdi ar vērtību "Guru" un mainīgais uzvārds ar vērtību "99".
- Pēc tam mēs izmantojam {{person.firstName}} un {{person.secondName}} izteiksmes, lai piekļūtu šo mainīgo vērtībai un attiecīgi parādītu tos skatā. Tā kā faktiskie dalībnieku mainīgie ir objekta personas daļa, viņiem ir jāpiekļūst tam ar punktu (.) Apzīmējumu, lai piekļūtu viņu faktiskajai vērtībai.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var skaidri redzēt, ka ekrānā tiek parādītas vērtības "firstName" un "secondName".
AngularJS masīvi
Izteiksmes var izmantot arī darbam ar masīviem. Apskatīsim leņķisko JS izteicienu ar masīviem piemēru.
Šajā piemērā mēs definēsim masīvu, kas saturēs studenta atzīmes 3 priekšmetos. Šajā skatā mēs attiecīgi parādīsim šo zīmju vērtību.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Koda skaidrojums:
- Tiek izmantota ng-init direktīva, kas definē masīvu ar nosaukumu "markas" ar 3 vērtībām 1, 15 un 19.
- Pēc tam mēs izmantojam zīmju izteiksmes [rādītājs], lai piekļūtu katram masīva elementam.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Pēc izejas var skaidri redzēt, ka masīvā definētās zīmes ir definētas.
AngularJS izteiksmes iespējas un ierobežojumi
Angular.JS izteiksmes iespējas
- Leņķiskās izteiksmes ir kā JavaScript izteiksmes. Tādējādi tam ir tāda pati jauda un elastība.
- JavaScript, mēģinot novērtēt nedefinētus rekvizītus, tas ģenerē ReferenceError vai TypeError. Programmā Angular izteiksmes novērtēšana ir piedodoša un rada nedefinētu vai nulles vērtību.
- Lai formatētu datus pirms to parādīšanas, izteicienos var izmantot filtrus.
Leņķiskās JS izteiksmes ierobežojumi
- Pašlaik nav iespējas izmantot nosacījumus, cilpas vai izņēmumus leņķa izteiksmē
- Jūs nevarat deklarēt funkcijas leņķa izteiksmē, pat ng-init direktīvā.
- Nevar izveidot regulāras izteiksmes leņķa izteiksmē. Regulārā izteiksme ir simbolu un rakstzīmju kombinācija, ko izmanto, lai atrastu virknes, piemēram,. * \. Txt $. Šādus izteicienus nevar izmantot Angular JS izteiksmēs.
- Arī leņķa izteiksmē nevar izmantot vai anulēt.
Atšķirība starp izteiksmi un $ eval
Funkcija $ eval ļauj novērtēt izteicienus pašā kontrolierī. Tātad, kamēr izteicieni tiek izmantoti vērtēšanai skatā, $ eval tiek izmantots kontroliera funkcijā.
Apskatīsim vienkāršu piemēru.
Šajā piemērā
Mēs tikai izmantosim funkciju $ eval, lai pievienotu 2 numurus un padarītu tos pieejamus darbības objektā, lai to varētu parādīt skatā.
Event Registration Guru99 Global Event
{{value}}
Koda skaidrojums:
- Vispirms mēs definējam 2 mainīgos “a” un “b”, kuriem katram ir vērtība 1.
- Mēs izmantojam funkciju $ scope. $ Eval, lai novērtētu 2 mainīgo pievienošanu un piešķirtu to darbības jomas mainīgajam “value”.
- Tad mēs vienkārši parādām mainīgā lieluma vērtību vērtībā.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Iepriekš minētajā izvadā parādīta kontrolierī novērtētās izteiksmes izeja. Iepriekš minētie rezultāti parāda, ka izteiksme $ eval tika izmantota, lai pievienotu 2 darbības jomas mainīgos “a un b”, rezultātam nosūtot un parādot skatā.
Kopsavilkums:
- Mēs esam redzējuši, kā izteicienus leņķiskajā JS var izmantot, lai novērtētu parastos JavaScript līdzīgos izteicienus, piemēram, vienkāršu skaitļu pievienošanu.
- Direktīvu ng-init var izmantot, lai definētu mainīgos rindā, kurus var izmantot skatā.
- Izteiksmes var izmantot, lai darbotos ar primitīviem tipiem, piemēram, virknēm un skaitļiem.
- Izteiksmes var izmantot arī darbam ar citiem veidiem, piemēram, JavaScript objektiem un masīviem.
- Izteiksmēm leņķiskajā JS ir daži ierobežojumi, piemēram, regulāru izteiksmju trūkums vai funkciju, cilpu vai nosacījumu izteikumu izmantošana.