Шта је АнгуларЈС директива?
Директива у АнгуларЈС је наредба која даје ХТМЛ нову функционалност. Када ангулар прође кроз ХТМЛ код, прво ће пронаћи директиве на страници, а затим ће рашчланити ХТМЛ страницу у складу с тим.
Једноставан пример АнгуларЈС директиве, који смо видели у ранијим поглављима, је „директива о нг-моделу“. Ова директива се користи за везивање нашег модела података за наш поглед.
Напомена: Можете да имате основни кутни код на ХТМЛ страници са директивама нг-инит, нг-репеат и нг-модел без потребе да имате контролере. Логика ових директива је у датотеци Ангулар.јс коју обезбеђује Гоогле. Контролери су конструкције угловног програмирања следећег нивоа које омогућавају пословну логику, али као што је поменуто да би апликација била угаона апликација, није обавезно имати контролер.
У овом упутству ћете научити-
- Како створити директиву
- нг-апп
- нг-инит
- нг-модел
- нг-репеат
Како створити директиву
Као што смо дефинисали у уводу, АнгуларЈС директиве су начин за проширење функционалности ХТМЛ-а.
У АнгуларЈС су дефинисане 4 директиве.
Испод је листа АнгуларЈС директива, заједно са примерима који пружају објашњење сваке од њих.
1) нг-апп
Ово се користи за иницијализацију апликације Ангулар.ЈС. Када је ова директива на месту на ХТМЛ страници, она у основи говори Ангулар-у да је ова ХТМЛ страница апликација ангулар.јс.
Пример у наставку показује како се користи директива нг-апп. У овом примеру ћемо једноставно показати како направити нормалну ХТМЛ апликацију ангуларЈС апликацијом.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Објашњење кода:
- Директива „нг-апп“ је додата у нашу див ознаку да би означила да је ова апликација апликација ангулар.јс. Имајте на уму да се директива нг-апп може применити на било коју ознаку, тако да се такође може ставити и у ознаку тела.
- Будући да смо ову апликацију дефинисали као апликацију ангулар.јс, сада можемо да користимо функцију ангулар.јс. У нашем случају користимо изразе за једноставно спајање 2 низа.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Излаз јасно показује излаз израза који је омогућен само зато што смо апликацију дефинисали као ангуларјс апликацију.
2) нг-инит
Ово се користи за иницијализацију података апликације. Понекад вам могу затребати неки локални подаци за вашу апликацију, то се може учинити помоћу нг-инит директиве.
Пример у наставку показује како се користи нг-инит директива.
У овом примеру, креираћемо променљиву која се назива „ТуториалНаме“ помоћу нг-инит директиве и приказати вредност те променљиве на страници.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Објашњење кода:
- Директива нг-инит је додата у нашу див ознаку да би дефинисала локалну променљиву која се назива „ТуториалНаме“, а вредност која јој је дата је „АнгуларЈС“.
- Користимо изразе у АнгуларЈс да прикажемо излаз имена променљиве „ТуториалНаме“ које је дефинисано у нашој нг-инит директиви.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
У излазу,
- Резултат јасно показује излаз израза који садржи низ „АнгуларЈС“. То је резултат низа „АнгуларЈС“ који је додељен променљивој „ТуториалНаме“ у одељку нг-инит.
3) нг-модел
И на крају, имамо директиву нг-модел која се користи за везивање вредности ХТМЛ контроле за податке апликације. Пример у наставку показује како се користи директива нг-модел.
У овом примеру,
- Створићемо 2 променљиве под називом „количина“ и „цена“. Ове променљиве ће бити везане за 2 контроле уноса текста.
- Затим ћемо приказати укупан износ на основу множења вредности цена и количине.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Објашњење кода:
- Директива нг-инит је додата у нашу див ознаку да дефинише 2 локалне променљиве; једно се назива „количина“, а друго „цена“.
- Сада користимо директиву нг-модел за везивање текстуалних оквира „Људи“ и „Цена регистрације“ за наше локалне променљиве „количина“ и „цена“, респективно.
- Коначно, приказујемо Тотал кроз израз, који је множење променљивих количине и цене.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
- Резултат јасно показује множење вредности за људе и цену регистрације.
Ако одете у оквире за текст и промените вредност цене Људи и регистрација, укупан број ће се аутоматски променити.
- Горњи излаз само показује снагу везивања података у ангуларЈс, што се постиже употребом директиве нг-модел.
4) нг-поновити
Ово се користи за понављање ХТМЛ елемента. Пример у наставку показује како се користи нг-репеат директива.
У овом примеру,
- Имаћемо низ имена поглавља у променљивој низа и
- затим користите директиву нг-репеат за приказ сваког елемента низа као ставке листе
Event Registration Guru99 Global Event
- {{names}}
Објашњење кода:
- Директива нг-инит је додата у нашу див ознаку да би дефинисала променљиву која се назива „поглавља“ која је променљива низа која садржи 3 низа.
- Елемент нг-репеат се користи декларисањем инлине променљиве која се назива „имена“ и проласком кроз сваки елемент у низу поглавља.
- Коначно, приказујемо вредност локалне уграђене променљиве „имена“.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
- Горњи излаз само показује да је директива нг-репеат узела сваку вредност у низу која се назива „поглавља“ и креирала ХТМЛ ставке листе за сваку ставку у низу.
Резиме
- Директиве се користе за проширење функционалности ХТМЛ-а. Ангулар пружа уграђене директиве као што су
- нг-апп - Користи се за иницијализацију угаоне апликације.
- нг-инит - Користи се за креирање променљивих апликације
- нг-модел - Користи се за везивање ХТМЛ контрола за податке апликације
- нг-репеат - Користи се за понављање елемената помоћу угаоне.