Какво представлява Angular JS Expressions?
Изразите са променливи, дефинирани в двойните скоби {{}}. Те се използват много често в Angular JS и ще ги видите в предишните ни уроци.
В този урок ще научите -
- Обяснете изразите на Angular.js с пример
- AngularJS номера
- AngularJS низове
- AngularJS обекти
- AngularJS масиви
- Възможности и ограничения на AngularJS Expression
- Разликата между изразите и $ eval
Обяснете изразите на Angular.js с пример
Изразите AngularJS са тези, които са написани в двойни скоби {{израз}}.
Синтаксис:
Прост пример за израз е {{5 + 6}}.
Изразите Angular.JS се използват за свързване на данни към HTML по същия начин като директивата ng-bind. AngularJS показва данните точно на мястото, където е поставен изразът.
Нека разгледаме пример за изрази Angular.JS.
В този пример просто искаме да покажем просто изразяване на числа като израз.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Обяснение на кода:
- Директивата ng-app в нашия пример е празна, както е показано на горната екранна снимка. Това означава само, че няма модул за присвояване на контролери, директиви, услуги, прикрепени към кода.
- Добавяме прост израз, който разглежда добавянето на 2 числа.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода,
- Вижда се, че се добавят двете числа 9 и 6 и се показва добавената стойност от 15.
Ъглови.JS номера
Изразите могат да се използват и за работа с числа. Нека разгледаме пример за изрази Angular.JS с числа.
В този пример просто искаме да покажем просто умножение на 2 числови променливи, наречени марж и печалба и да покажем тяхната умножена стойност.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Обяснение на кода:
- Директивата ng-init се използва в angular.js за дефиниране на променливи и съответстващите им стойности в самия изглед. Това е донякъде като дефиниране на локални променливи за кодиране на всеки език за програмиране. В този случай дефинираме 2 променливи, наречени марж и печалба и им присвояваме стойности.
- След това използваме 2-те локални променливи и умножаваме техните стойности.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода,
- Ясно се вижда, че се извършва умножението на 2 числа 2 и 200 и се показва умножената стойност от 400.
AngularJS низове
Изразите могат да се използват и за работа със низове. Нека разгледаме пример за Angular JS изрази с низове.
В този пример ще дефинираме 2 низа от "firstName" и "lastName" и ще ги покажем, като използваме съответно изрази.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Обяснение на кода:
- Използва се директивата ng-init, дефинирайте променливите firstName със стойността "Guru" и променливата lastName със стойността "99".
- След това използваме изрази на {{firstName}} и {{lastName}}, за да получим достъп до стойността на тези променливи и да ги покажем съответно в изгледа.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода може ясно да се види, че стойностите на firstName и lastName се показват на екрана.
Angular.JS обекти
Изразите могат да се използват и за работа с JavaScript обекти.
Нека разгледаме пример за изрази Angular.JS с обекти на javascript. Обектът на javascript се състои от двойка име-стойност.
По-долу е даден пример за синтаксиса на обект на javascript.
Синтаксис:
var car = {type:"Ford", model:"Explorer", color:"White"};
В този пример ще дефинираме един обект като обект човек, който ще има 2 двойки ключови стойности на "firstName" и "lastName".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Обяснение на кода:
- Директивата ng-init се използва за дефиниране на обектното лице, което от своя страна има двойки ключови стойности firstName със стойността "Guru" и променливата lastName със стойността "99".
- След това използваме изрази {{person.firstName}} и {{person.secondName}}, за да осъществим достъп до стойността на тези променливи и съответно да ги покажем в изгледа. Тъй като действителните променливи на членове са част от обектното лице, те трябва да имат достъп до него с точката (.) Нотация, за да получат достъп до тяхната действителна стойност.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода,
- Ясно се вижда, че стойностите на "firstName" и "secondName" се показват на екрана.
AngularJS масиви
Изразите могат да се използват и за работа с масиви. Нека разгледаме пример за Angular JS изрази с масиви.
В този пример ще дефинираме масив, който ще държи оценките на ученик по 3 предмета. В изгледа ще покажем съответно стойността на тези марки.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Обяснение на кода:
- Използва се директивата ng-init дефинирайте масива с името "марки" с 3 стойности 1, 15 и 19.
- След това използваме изрази на марки [index] за достъп до всеки елемент от масива.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода може да се види ясно, че показаните марки, които са дефинирани в масива.
Възможности и ограничения на AngularJS Expression
Възможности за изразяване Angular.JS
- Ъгловите изрази са като JavaScript изрази. Следователно той има същата мощност и гъвкавост.
- В JavaScript, когато се опитате да оцените недефинирани свойства, той генерира ReferenceError или TypeError. В Angular оценката на израза е прощаваща и генерира недефинирана или нула.
- Човек може да използва филтри в изразите, за да форматира данните, преди да ги покаже.
Ограничения на ъгловия JS израз
- Понастоящем няма наличност за използване на условни условия, цикли или изключения в Angular израз
- Не можете да декларирате функции в Angular израз, дори в директивата ng-init.
- Не може да се създават регулярни изрази в Angular израз. Регулярният израз е комбинация от символи и символи, които се използват за намиране на низове като. * \. Txt $. Такива изрази не могат да се използват в изрази Angular JS.
- Също така, не може да се използва или да се анулира в ъглов израз.
Разлика между израз и $ eval
Функцията $ eval позволява да се оценят изрази от самия контролер. Така че, докато изразите се използват за оценка в изгледа, $ eval се използва във функцията на контролера.
Нека разгледаме един прост пример за това.
В този пример
Просто ще използваме функцията $ eval, за да добавим 2 числа и да я направим достъпна в обекта за обхват, така че да може да бъде показана в изгледа.
Event Registration Guru99 Global Event
{{value}}
Обяснение на кода:
- Първо дефинираме 2 променливи „a“ и „b“, всяка от които съдържа стойност 1.
- Използваме функцията $ scope. $ Eval, за да оценим добавянето на 2 променливи и да я присвоим на променливата на обхвата 'value'.
- След това просто показваме стойността на променливата "стойност" в изгледа.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
Горният изход показва изхода на израза, който е оценен в контролера. Горните резултати показват, че изразът $ eval е бил използван за извършване на добавянето на 2 променливи на обхвата „a и b“ с резултата, изпратен и показан в изгледа.
Резюме:
- Видяхме как изразите в Angular JS могат да се използват за оценка на регулярни изрази като JavaScript, като простото добавяне на числа.
- Директивата ng-init може да се използва за дефиниране на променливи в реда, които могат да се използват в изгледа.
- Могат да се правят изрази за работа с примитивни типове като низове и числа.
- Изразите могат да се използват и за работа с други типове, като например JavaScript обекти и масиви.
- Изразите в Angular JS имат няколко ограничения, като например липсата на регулярни изрази или използване на функции, цикли или условни изрази.