AngularJS Директиви: ng-init, ng-app, ng-model & ng-repeat

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

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

  • 🧩 Основна идея: Директивата е маркер върху HTML елемент, който казва на компилатора на AngularJS да прикачи поведение към него.
  • ???? Bootstrap Point: ng-app декларира коренния елемент и автоматично стартира AngularJS веднага щом страницата се зареди.
  • 🧮 Локални данни: ng-init присвоява начални стойности на променливите в обхвата вътре в маркировката, без да е необходим контролер.
  • 🔄 Двупосочно подвързване: ng-model свързва input, select или textarea със свойство scope, така че редакциите актуализират модела мигновено.
  • 📋 Повтарящо се маркиране: ng-repeat клонира своя хост елемент веднъж за всеки елемент в масив или обект.
  • 🎛️ Четири форми на призоваване: Свойството restrict приема E, A, C и M за синтаксис на елементи, атрибути, класове и коментари.
  • ???? По-широка библиотека: AngularJS доставя десетки вградени директиви, сред които ng-bind, ng-if, ng-show, ng-class и ng-click.
Прочетете повече

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

Какво е директива в AngularJS?

A Директива В AngularJS има команда, която дава нова функционалност на HTML. Когато AngularJS преглежда HTML кода, първо ще намери директивите в страницата и след това ще я анализира съответно. Прост пример за директива на AngularJS, която видяхме в по-ранните глави, е „директивата ng-model“. Тази директива се използва за обвързване на нашия модел данни с нашия изглед.

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

Но как в крайна сметка браузърът изпълнява такъв?

Как работят директивите на AngularJS в HTML

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

AngularJS Доставя се с десетки вградени директиви, плюс всички, които регистрирате сами. Четирите, обяснени по-долу с работещи примери, ng-app, ng-init, ng-model и ng-repeat, са тези, с които начинаещите се срещат първо. Преди тези примери, обърнете внимание на четирите начина, по които може да се напише директива.

Кои са четирите вида директиви на AngularJS?

Директивата не винаги е атрибут. Компилаторът на AngularJS може да съпостави такава по име на елемент, атрибут, име на клас или коментар, като всяка директива декларира кои форми приема чрез своите restrict свойство. Стойността по подразбиране е EA, така че синтаксисът на елемента и атрибута работи, освен ако не кажете друго. Стойността е от най-голямо значение, когато пишете своя собствена директива, защото компилаторът игнорира всяка форма, която стойността на restrict изключва.

ограничителна стойност Съвпада с Примерно маркиране Типична употреба
E Име на елемента Самостоятелни блокове, които притежават шаблон
A Атрибут Добавяне на поведение към съществуващ елемент
C Име на класа Стара маркировка, която не може да приема нови атрибути
M коментар Рядко, запазено за обратна съвместимост

💡 Съвет: Предпочитайте синтаксиса на елементите и атрибутите. официална справка за директивите на AngularJS третира формулярите за клас и коментар като остарели опции. Всички примери по-долу използват синтаксис на атрибути.

СВЪРЗАНИ СТАТИИ

ng-приложение в AngularJS

Това се използва за инициализиране на AngularJS приложение. Когато тази директива е налична в HTML страница, тя по същество казва на AngularJS, че тази HTML страница е AngularJS приложение.

Пример за ng-приложение

Примерът по-долу показва как да превърнете обикновено HTML приложение в AngularJS приложение.

ng-приложение в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Внимание: Обявата запазва оригинала chrset="UTF 8", точно както е публикувано. Правилният атрибут е charset="UTF-8".

Code Обяснение:

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

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

Изход:

ng-приложение в AngularJS

Резултатът ясно показва резултата от израза, което е възможно само защото дефинирахме приложението като AngularJS приложение. Следващата директива предоставя неговите данни.

ng-init в AngularJS

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

Пример за ng-init

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

ng-init в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Обяснение:

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

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

Изход:

ng-init в AngularJS

В изхода,

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

Следващата директива изпраща данни обратно от екрана в модела.

ng-модел в AngularJS

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

Пример за ng-модел

В този пример,

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

ng-модел в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Обяснение:

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

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

Изход:

ng-модел в AngularJS

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

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

ng-модел в AngularJS

  • Горният резултат показва силата на обвързването на данни в AngularJS, което се постига с използването на директива ng-model.

Последният от четирите обработва много стойности едновременно.

ng-повтаряне в AngularJS

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

Пример за ng-repeat

В този пример,

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

ng-повтаряне в AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Обяснение:

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

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

Изход:

ng-повтаряне в AngularJS

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

Тези четири обхващат стартиране, данни, свързване и повторение. Списъкът по-долу показва какво следва.

Други често използвани вградени AngularJS директиви

Четирите директиви по-горе са началният набор, а не цялата библиотека. Всеки запис по-долу е атрибут, който поставяте директно върху елемента, който той контролира.

  • ng-bind: Записва стойност от обхвата в текста на елемента, без за кратко да показва сурови скоби при зареждане.
  • ng-if: Премахва елемента от DOM, когато изразът му е неверен, и го изгражда отново, когато е истина.
  • ng-показване и ng-скриване: Togglвидимост с CSS. Елементът остава в DOM, така че многократните превключвания струват по-малко.
  • ng-клас: Добавя или премахва CSS класове от израз, позволявайки стилизирането да следва модела.
  • ng-щракване: Изпълнява израз или функция за обхват, когато потребителят щракне върху елемента.
  • ng-контролер: Прикачва контролер към блок от маркировка, след като страницата надхвърли ng-init.
  • ng-деактивиран и ng-само за четене: Задайте атрибута на съвпадащата форма, когато изразът им е true.

Често задаваните въпроси по-долу отговарят на въпросите, които най-често се задават след този списък.

Въпроси и Отговори

AngularJS нормализира имената на атрибутите, преди да ги съпостави. Той премахва всички префикси x- или data-, след което преобразува разделителите тирета, двоеточия или долна черта в разделители с регистър (camel case). Ето защо data-ng-app, x-ng-app и ng:app се разрешават в една и съща директива ngApp.

И двата отпечатват стойност на обхвата. Интерполационният израз може за кратко да покаже суровите си скоби, преди AngularJS да завърши зареждането, докато ng-bind оставя елемента празен, докато компилацията не завърши. Предпочитайте ng-bind за текст, който се показва над сгъвката.

Не. Официалната поддръжка за AngularJS приключи през януари 2022 г., така че не се издават други корекции. Съществуващите страници продължават да работят, но новите проекти трябва да започнат на модерен Angular, където тези директиви стават компоненти и структурни директиви като *ngIf и *ngFor.

Частично. Асистенти като Копилот на GitHub Пренапишете ng-repeat като *ngFor и ng-if като *ngIf надеждно. Наследяването на обхват, двупосочните обвързвания и персонализираните функции за свързване все още се нуждаят от човешка проверка, преди мигрираният код да бъде пуснат в продажба.

Поставете маркировката, декларацията на модула и конзолния изход в ChatGPT и пита коя директива не е съвпаднала. Обикновено забелязва липсващ ng-app, неправилно изписан атрибут или restrict стойност, която блокира избрания от вас синтаксис.

Обобщете тази публикация с: