Директива AngularJS с пример: ng-init, ng-repeat, ng-app, ng-model

Какво представлява директивата AngularJS?

Директива в AngularJS е команда, която дава на HTML нова функционалност. Когато ъглово преминете през HTML кода, той първо ще намери директивите в страницата и след това ще анализира съответно HTML страницата.

Един прост пример за AngularJS директива, който видяхме в предишни глави, е "директивата ng-модел". Тази директива се използва за обвързване на нашия модел данни с нашия изглед.

Забележка: Можете да имате основен ъглов код в HTML страница с директивите ng-init, ng-repeat и ng-model, без да е необходимо да имате контролери. Логиката на тези директиви е във файла Angular.js, предоставен от Google. Контролерите са конструкции за ъглово програмиране от следващо ниво, които позволяват бизнес логика, но както е споменато, за дадено приложение е ъглово приложение, не е задължително да има контролер.

В този урок ще научите -

Как да създадете директива
ng-app
ng-init
ng-модел
ng-повторение

Как да създадете директива

Както дефинирахме във въведението, директивите на AngularJS са начин за разширяване на функционалността на HTML.

Има 4 директиви, дефинирани в AngularJS.

По-долу е даден списъкът с директивите AngularJS заедно с примери, предоставени за обяснение на всяка една от тях.

1) ng-app

Това се използва за инициализиране на приложение Angular.JS. Когато тази директива е на място в HTML страница, тя основно казва на Angular, че тази HTML страница е приложение angular.js.

Примерът по-долу показва как да използвате директивата ng-app. В този пример ние просто ще покажем как да направим нормално HTML приложение angularJS приложение.

Event Registration
Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}

Обяснение на кода:

Директивата "ng-app" се добавя към нашия div таг, за да покаже, че това приложение е приложение angular.js. Обърнете внимание, че директивата ng-app може да бъде приложена към всеки етикет, така че може да бъде поставена и в маркера на тялото.
Тъй като дефинирахме това приложение като приложение angular.js, вече можем да използваме функционалността angular.js. В нашия случай използваме изрази за просто свързване на 2 низа.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

Резултатът ясно показва изхода на израза, който беше възможен само защото дефинирахме приложението като приложение angularjs.

2) ng-init

Това се използва за инициализиране на данните на приложението. Понякога може да се наложи някои локални данни за вашето приложение, това може да се направи с директивата ng-init.

Примерът по-долу показва как да използвате директивата ng-init.

В този пример ще създадем променлива, наречена "TutorialName", използвайки директивата ng-init и ще покажем стойността на тази променлива на страницата.

Event Registration
Guru99 Global Event
Tutorial Name : {{ TutorialName}}

Обяснение на кода:

Директивата ng-init се добавя към нашия div таг за дефиниране на локална променлива, наречена "TutorialName" и стойността, дадена на това е "AngularJS".
Използваме изрази в AngularJs, за да покажем изхода на името на променливата "TutorialName", което беше дефинирано в нашата директива ng-init.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

В изхода,

Резултатът ясно показва изхода на израза, който съдържа низа "AngularJS". Това е резултат от низа „AngularJS“, който е присвоен на променливата „TutorialName“ в раздела ng-init.

3) ng-модел

И накрая, имаме директивата ng-model, която се използва за обвързване на стойността на HTML контрола с данните на приложението. Примерът по-долу показва как да използвате директивата ng-model.

В този пример

Ще създадем 2 променливи, наречени "количество" и "цена". Тези променливи ще бъдат обвързани с 2 контроли за въвеждане на текст.
След това ще покажем общата сума въз основа на умножението както на стойностите на цената, така и на количеството.

Event Registration
Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}

Обяснение на кода:

Директивата ng-init се добавя към нашия div таг, за да дефинира 2 локални променливи; едното се нарича "количество", а другото е "цена".
Сега използваме директивата ng-model, за да обвържем текстовите полета на „Хора“ и „Регистрационна цена“ съответно с нашите локални променливи „количество“ и „цена“.
И накрая, показваме Total чрез израз, който е умножението на количествените и ценовите променливи.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

Резултатът ясно показва умножението на стойностите за Хора и цена за регистрация.

Сега, ако отидете в текстовите полета и промените стойността на цената Хора и Регистрация, Общата сума ще се промени автоматично.

Горният изход просто показва силата на свързването на данни в angularJs, което се постига с използването на директивата ng-model.

4) ng-повторение

Това се използва за повтаряне на HTML елемент. Примерът по-долу показва как да използвате директивата ng-repeat.

В този пример

Ще имаме масив от имена на глави в масивна променлива и
след това използвайте директивата ng-repeat, за да покажете всеки елемент от масива като елемент от списък

Event Registration
Guru99 Global Event


{{names}}

Обяснение на кода:

Директивата ng-init се добавя към нашия div таг, за да дефинира променлива, наречена "глави", която е променлива на масив, съдържаща 3 низа.
Елементът ng-repeat се използва чрез деклариране на вградена променлива, наречена "names" и преминаване през всеки елемент в масива от глави.
И накрая, показваме стойността на локалната вградена променлива „names“.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

Горният изход просто показва, че директивата ng-repeat е взела всяка стойност в масива, наречена "глави", и е създала HTML списъчни елементи за всеки елемент в масива.

Обобщение

Директивите се използват за разширяване на функционалността на HTML. Angular осигурява вградени директиви като
- ng-app - Използва се за инициализиране на ъглово приложение.
- ng-init - Това се използва за създаване на променливи на приложението
- ng-model - Използва се за обвързване на HTML контролите с данните на приложението
- ng-repeat - Използва се за повтаряне на елементи, използващи ъглови.