Směrnice AngularJS: ng-init, ng-app, ng-model & ng-repeat
James Hartman
Co je směrnice v AngularJS?
A Směrnice v AngularJS je příkaz, který dává HTML nové funkce. Když Angular prochází kód HTML, nejprve najde direktivy na stránce a poté odpovídajícím způsobem analyzuje stránku HTML. Jednoduchý příklad direktivy AngularJS, kterou jsme viděli v předchozích kapitolách, je „směrnice ng-model“. Tato směrnice se používá k propojení našeho datového modelu s naším pohledem.
Poznámka: Základní úhlový kód můžete mít na stránce HTML s direktivami ng-init, ng-repeat a ng-model, aniž byste museli mít řadiče. Logika těchto direktiv je v souboru Angular.js, který poskytuje Google. Ovladače jsou konstrukty úhlového programování další úrovně, které umožňují obchodní logiku, ale jak již bylo zmíněno pro aplikaci, která má být úhlovou aplikací, není povinné mít řadič.
Jak vytvořit směrnice v AngularJS
Jak jsme definovali v úvodu, direktivy AngularJS představují způsob, jak rozšířit funkčnost HTML.
Jsou zde definovány 4 směrnice AngularJS.
Níže je uveden seznam direktiv AngularJS spolu s příklady poskytnutými k vysvětlení každé z nich.
ng-app v AngularJS
To se používá k inicializaci aplikace Angular.JS. Když je tato direktiva umístěna na stránce HTML, v podstatě říká Angularu, že tato stránka HTML je aplikace angular.js.
Příklad aplikace np
Níže uvedený příklad ukazuje, jak používat direktivu ng-app. V tomto příkladu jednoduše ukážeme, jak udělat z normální HTML aplikace aplikaci 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>
Code Vysvětlení:
- Direktiva „ng-app“ je přidána do naší značky div, která označuje, že tato aplikace je aplikací angular.js. Všimněte si, že direktivu ng-app lze použít na jakoukoli značku, takže ji lze také vložit do značky body.
- Protože jsme tuto aplikaci definovali jako aplikaci angular.js, můžeme nyní využívat funkcionalitu angular.js. V našem případě používáme výrazy k jednoduchému zřetězení 2 řetězců.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Výstup jasně ukazuje výstup výrazu, který byl možný pouze díky tomu, že jsme aplikaci definovali jako aplikaci angularjs.
ng-init v AngularJS
To se používá k inicializaci dat aplikace. Někdy můžete vyžadovat nějaká místní data pro vaši aplikaci, to lze provést pomocí direktivy ng-init.
Příklad ng-init
Níže uvedený příklad ukazuje, jak používat direktivu ng-init.
V tomto příkladu vytvoříme proměnnou s názvem „TutorialName“ pomocí direktivy ng-init a zobrazíme hodnotu této proměnné na stránce.
<!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 Vysvětlení:
- Direktiva ng-init je přidána k naší značce div, která definuje lokální proměnnou nazvanou „TutorialName“ a hodnota je „AngularJS“.
- Výrazy v AngularJs používáme k zobrazení výstupu názvu proměnné „TutorialName“, který byl definován v naší direktivě ng-init.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
ve výstupu,
- Výsledek jasně ukazuje výstup výrazu, který obsahuje řetězec „AngularJS“. Je to důsledek přiřazení řetězce „AngularJS“ k proměnné „TutorialName“ v sekci ng-init.
ng-model v AngularJS
A konečně máme direktivu ng-model, která se používá k navázání hodnoty ovládacího prvku HTML na data aplikace. Níže uvedený příklad ukazuje, jak používat direktivu ng-model.
Příklad ng-modelu
V tomto příkladu
- Vytvoříme 2 proměnné nazvané „množství“ a „cena“. Tyto proměnné budou vázány na 2 ovládací prvky pro zadávání textu.
- Poté zobrazíme celkovou částku na základě násobení hodnoty ceny a množství.
<!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 Vysvětlení:
- Direktiva ng-init je přidána do našeho tagu div pro definování 2 lokálních proměnných; jeden se nazývá „množství“ a druhý je „cena“.
- Nyní používáme direktivu ng-model k propojení textových polí „People“ a „Registrační cena“ s našimi místními proměnnými „množství“ a „cena“.
- Nakonec zobrazujeme Total prostřednictvím výrazu, což je násobení proměnných množství a ceny.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
- Výstup jasně ukazuje násobení hodnot pro osoby a Registrační cenu.
Pokud nyní přejdete do textových polí a změníte hodnotu ceny za osoby a registraci, celková částka se automaticky změní.
- Výše uvedený výstup jen ukazuje sílu datové vazby v angularJs, které je dosaženo pomocí ng-model směrnice.
ng-repeat v AngularJS
To se používá k opakování prvku HTML. Níže uvedený příklad ukazuje, jak používat direktiva ng-repeat.
Příklad ng-repeat
V tomto příkladu
- Budeme mít pole názvů kapitol v proměnné pole a
- pak použijte direktivu ng-repeat k zobrazení každého prvku pole jako položky seznamu
<!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 Vysvětlení:
- Direktiva ng-init je přidána do našeho tagu div, aby definovala proměnnou nazvanou „kapitoly“, což je proměnná pole obsahující 3 řetězce.
- Prvek ng-repeat se používá při deklarování vložené proměnné nazvané „names“ a procházení každého prvku v poli Chapters.
- Nakonec ukazujeme hodnotu místní vložené proměnné 'names'.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
- Výše uvedený výstup jen ukazuje, že direktiva ng-repeat vzala každou hodnotu v poli zvaném „kapitoly“ a vytvořila položky seznamu HTML pro každou položku v poli.
Shrnutí
- Direktivy se používají k rozšíření funkčnosti HTML. Angular poskytuje vestavěné směrnice, jako např
- ng-app – Používá se k inicializaci úhlové aplikace.
- ng-init – Používá se k vytváření proměnných aplikace
- ng-model – Používá se k navázání ovládacích prvků HTML na data aplikace
- ng-repeat – Používá se k opakování prvků pomocí úhlových.
