Шта је АнгуларЈС?

АнгуларЈС је један од најпопуларнијих веб оквира заснованих на ЈаваСцрипт-у који се користи у развоју. Користи се у изради апликација за једну страницу (СПА). АнгуларЈС је оквир отвореног кода који углавном одржава Гоогле и заједница појединаца укључених у решавање проблема с којима се суочавају у развоју апликација за једну страницу. У овој теми ћемо сазнати о АнгуларЈС директивама.

АнгуларЈС није ништа друго него проширује постојећи ХТМЛ; Додато је на ХТМЛ страници са тагом. АнгуларЈС чини ХТМЛ сајт одговорнијим на радње корисника додавањем додатних атрибута лако. Најновија стабилна верзија АнгуларЈС-а је до сада 1.6.к.

Директиве АнгуларЈС

АнгуларЈС је ефикасан оквир који подржава Модел-Виев-Цонтроллер (МВЦ) архитектуру. Омогућује основне карактеристике као што су двосмерно повезивање података, контролер, услуге, директиве, предлошци, рутер, филтери, убризгавање зависности итд. Све су то главне карактеристике које колаборативно раде на ефикасности АнгуларЈС-а.

Директива је једно од веома корисних својстава у АнгуларЈС. Проширује постојећи ХТМЛ и омогућава лако развијање веб страница са новим понашањем користећи основни ЈаваСцрипт. Омогућује писање властитих прилагођених ознака и њихово мапирање у постојећи ХТМЛ. Ова функционалност даје већу слободу и омогућава програмерима велику флексибилност у креирању и коришћењу прилагођених елемената у веб апликацијама. Такође, могу да дизајнирају и сопствене директиве. У овом чланку ћемо се фокусирати углавном на АнгуларЈС директиве и покушаћемо да стекнемо знање о овој основној функцији.

Директиве нису ништа друго него маркери на ДОМ елементима у ХТМЛ-у, као што су име атрибута, име елемента, ЦСС класа или коментар. Компајлер АнгуларЈС затим том елементу веже одређено понашање. Свака директива има назив и започиње са 'нг-'. Свака директива може одлучити где се може користити у ДОМ елементима. Постоје неке постојеће директиве које су већ доступне у АнгуларЈС-у и слично можемо дефинисати и сами.

Имаћемо поглед на три главне уграђене директиве које систем АнгуларЈС деле на три главна дела.

1. нг-апп: Ова директива каже преводиоцу да је ово АнгуларЈС апликација. Директива тамо где је дефинисана у ДОМ-у постаје основни елемент апликације. На пример



АнгуларЈС је доступан као ЈаваСцрипт датотека и додаје се у ХТМЛ користећи таг. Нг-апп ат елемент каже АнгуларЈС-у да је див коријенски елемент и власник АнгуларЈС апликације. АнгуларЈС апликација почиње од тог елемента и шта год је АнгуларЈС код, пише у њему.

2. нг-модел: Ова директива веже вредност са веб странице, углавном из поља за унос у променљиву апликацију. У основи, ова директива омогућава слање података са улаза у АнгуларЈС апликацију који се могу користити негде другде. На пример

Унесите:

Директива нг-модела веже улазну вредност на променљиву апликацију која се зове "инпут". Тада ћемо видети како можемо приказати исту вредност на веб страници у следећем примеру.

3. нг-бинд: Ова директива везује вредност од АнгуларЈС апликације на веб страницу. тј. Омогућује просљеђивање података из апликације у ХТМЛ ознаке. На пример

Унесите:

Подаци које смо забележили помоћу директиве „нг-модел“ у апликацијској променљивој „улаз“ везани су за елемент тага

користећи „нг-бинд“. Сада можемо покренути ову апликацију и видети како динамички АнгуларЈС ажурира унесену вредност на страници.

Уз ове, у АнгуларЈС-у постоје неке друге директиве које су важне.

4. нг-репеат: Ова директива понавља ХТМЛ елемент и користи се за низ објеката. Ова директива је веома корисна у сценаријима попут приказивања елемената табеле на веб страници.

5. нг-инит: Ова директива се користи за иницијализацију вредности за АнгуларЈС апликацију пре него што учита веб страницу.

Стварање нових директива

можемо створити сопствене прилагођене директиве заједно са постојећим АнгуларЈС директивама. Лако је креирати нове директиве користећи само ЈаваСцрипт. Нове директиве створене су коришћењем „. функција “. На пример



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Ангулар.модуле је функција АнгуларЈС која креира модул. Направили смо прилагођену директиву под називом прилагођена директива за коју је написана функција. Кад год користимо ову директиву на нашој веб страници, ова функција ће се извршити. У овом случају, то је повратни предложак који садржи ХТМЛ код.

Док дајемо директиву о именовању, морамо користити конвенцију о именовању случаја дева и док је позивамо на њу, морамо користити „-“ одвојену конвенцију о именовању.

Постоје четири начина на која се можемо позивати на директиве,

Назив елемента

Као што је коришћено у последњем примеру:

Атрибути

Класа

Да бисмо позвали директиву користећи име класе, морамо додати ограничити својство са вредности 'Ц', док је дефинирамо.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Коментирај

Да бисмо позвали директиву користећи коментар, морамо додати својство ограничавања са вриједношћу 'М', а истовремено је дефинирати.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Својство замене: труе је обавезно и замениће оригинални коментар директивом, иначе би коментар био невидљив.

Закључак - АнгуларЈС директиве

Дакле, Директива је веома моћна карактеристика доступна у АнгуларЈС. Директива омогућава увођење нове синтаксе, налик су маркерима и омогућава нам да им придајемо посебно понашање. Постоје постојеће директиве у АнгуларЈС које су веома корисне, такође можемо дефинисати сопствене прилагођене директиве и користити их. Прилагођене директиве омогућавају програмерима велику флексибилност и слободу. Директиве додају нову функционалност постојећем ХТМЛ-у са иновативним стилом и могућностима.

Препоручени чланци

Ово је водич за АнгуларЈС директиве. Овде смо расправљали о три главне уграђене директиве које систем АнгуларЈС деле на три главна дела. Можда ћете такође погледати следеће чланке да бисте сазнали више -

  1. Версионс оф Хтмл
  2. Оквири у Јави
  3. АнгуларЈС Арцхитецтуре
  4. Стилови листе ХТМЛ

Категорија:

Развој софтвера