Какво е AngularJS?

AngularJS е една от най-популярните базирани на JavaScript уеб рамки, използвани в разработването на предния край. Използва се при разработването на приложения за единични страници (SPA). AngularJS е рамка с отворен код, която се поддържа главно от Google и от общност от лица, участващи в решаването на проблеми, изправени пред разработването на приложения за една страница. В тази тема ще научим за директивите на AngularJS.

AngularJS не е нищо друго, освен това разширява съществуващия HTML; Добавя се в HTML страница с таг. AngularJS прави HTML сайта по-отзивчив към действията на потребителите, като добавя лесно допълнителни атрибути. Последната стабилна версия на AngularJS е 1.6.x към момента.

Директиви на AngularJS

AngularJS е ефективна рамка, която поддържа архитектура, базирана на Model-View-Controller (MVC). Той предлага основни функции като двупосочно свързване на данни, контролер, услуги, директиви, шаблони, рутер, филтри, инжектиране на зависимости и т.н. Това са основните характеристики, които работят съвместно, за да направят AngularJS ефективна.

Директивата е една от много полезните функции в AngularJS. Той разширява съществуващия HTML и позволява лесно да се разработят уеб страници с ново поведение, използвайки основен JavaScript. Той позволява да напишем собствени персонализирани маркери и да ги картографира в съществуващ HTML. Тази функционалност дава повече свобода и позволява на разработчиците голяма гъвкавост при създаването и съответно използването на персонализирани елементи в уеб приложения. Също така, те могат да проектират свои собствени директиви. В тази статия ще се съсредоточим главно върху директивите на AngularJS и ще се опитаме да придобием знания за тази основна характеристика.

Директивите не са нищо друго освен маркери за DOM елементи в HTML като име на атрибут, име на елемент, клас CSS или коментар. След това компилаторът на AngularJS прикрепя определеното поведение към този елемент. Всяка директива има име и започва с 'ng-'. Всяка директива може да реши къде може да се използва в DOM елементи. Има някои съществуващи директиви, които вече са достъпни в AngularJS и по подобен начин можем да определим сами.

Ще разгледаме три основни вградени директиви, които разделят рамката AngularJS на три основни части.

1. ng-app: Тази директива казва на компилатора, че това е приложението AngularJS. Директивата, където е дефинирана в DOM, става основен елемент на приложението. Напр



AngularJS е достъпен като JavaScript файл и се добавя в HTML с помощта на таг. Ng-app at element казва на AngularJS, че div е коренният елемент и собственик на AngularJS приложението. Приложението AngularJS започва от този елемент и каквото и да е AngularJS код, се пише вътре в него.

2. ng-model: Тази директива обвързва стойността от уеб страницата, най-вече от полето за въвеждане към променливата на приложението. По принцип тази директива позволява изпращане на данни от входни данни към приложението AngularJS, които могат да бъдат използвани някъде другаде. Напр

Enter:

Директивата ng-модел обвързва входната стойност към променливата на приложението, наречена „input“. След това ще видим как можем да покажем една и съща стойност на уеб страницата в следващия пример.

3. ng-bind: Тази директива обвързва стойността от AngularJS приложението към уеб страницата. т.е. позволява пренасочване на данни от приложението до HTML тагове. Напр

Enter:

Данните, които заснехме с помощта на директивата „ng-model“ в променливата на приложението „input“, са обвързани с елемент на тагове

използвайки „ng-bind“. Вече можем да стартираме това приложение и да видим как динамично AngularJS актуализира въведената стойност на страницата.

Наред с тях има някои други директиви, налични в AngularJS, които са важни.

4. ng-repe: Тази директива повтаря HTML елемент и се използва за масив от обекти. Тази директива е много полезна при сценарии като показване на елементи на таблица на уеб страница.

5. ng-init: Тази директива се използва за инициализиране на стойностите за приложението AngularJS, преди да зареди уеб страница.

Създаване на нови директиви

можем да създадем собствени персонализирани директиви заедно със съществуващите налични AngularJS директиви. Много лесно е да създавате нови директиви, като използвате само JavaScript. Новите директиви се създават с помощта на „. функция ”. Напр



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..! "
);
));

Angular.module е функция AngularJS, която създава модул. Създадохме персонализирана директива, наречена персонализирана директива, за която е написана функция. Всеки път, когато използваме тази директива на нашата уеб страница, тази функция ще бъде изпълнена. В този случай това е връщащ се шаблон, който съдържа HTML код.

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

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

Име на елемент

Както се използва в последния пример:

Атрибут

клас

За да се позовем на директива с помощта на името на клас, трябва да добавим ограничаване на свойството със стойност „C“, докато го дефинираме.

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..! "
);
));

коментар

За да се позовем на директива с помощта на коментар, трябва да добавим свойство за ограничаване със стойност „M“, докато го дефинираме.

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..! "
);
));

Свойството за замяна: true е задължително и ще замени оригиналния коментар с директива, в противен случай коментарът ще бъде невидим.

Заключение - AngularJS директиви

Така че, Директива е много мощна функция, налична в AngularJS. Директивата позволява да се въведе нов синтаксис, са като маркери и ни позволява да прикрепяме специално поведение към тях. В AngularJS съществуват налични директиви, които са много полезни, също така можем да определим собствените си персонализирани директиви и да ги използваме. Персонализираните директиви позволяват на разработчиците голяма гъвкавост и свобода. Директивите добавят нова функционалност в съществуващия HTML с иновативен стил и функции.

Препоръчителни статии

Това е ръководство за директивите на AngularJS. Тук обсъждаме трите основни вградени директиви, които разделят рамката AngularJS на три основни части. Може да разгледате и следните статии, за да научите повече -

  1. Версии на Html
  2. Рамки в Java
  3. AngularJS Архитектура
  4. HTML стилове на списък

Категория:

Разработване на софтуер