Co je směrnice AngularJS?
Direktiva v AngularJS je příkaz, který dává HTML nové funkce. Při úhlovém procházení kódu HTML nejprve najde na stránce směrnice a poté odpovídajícím způsobem analyzuje stránku HTML.
Jednoduchým příkladem směrnice AngularJS, kterou jsme viděli v předchozích kapitolách, je „směrnice ng-model“. Tato směrnice se používá k vytvoření vazby našeho datového modelu s naším pohledem.
Poznámka: Základní úhlový kód můžete mít na stránce HTML se směrnicemi ng-init, ng-repeat a ng-model, aniž byste museli mít řadiče. Logika těchto směrnic je v souboru Angular.js, který poskytuje Google. Řadiče jsou konstrukce úhlového programování na další úrovni, které umožňují obchodní logiku, ale jak již bylo uvedeno, aby aplikace byla úhlovou aplikací, není povinné mít řadič.
V tomto výukovém programu se naučíte
- Jak vytvořit směrnici
- ng-aplikace
- ng-init
- ng-model
- ng-opakovat
Jak vytvořit směrnici
Jak jsme definovali v úvodu, směrnice AngularJS jsou způsob, jak rozšířit funkčnost HTML.
V AngularJS jsou definovány 4 směrnice.
Níže je uveden seznam směrnic AngularJS spolu s příklady, které vysvětlují každou z nich.
1) ng-aplikace
Používá se k inicializaci aplikace Angular.JS. Když je tato směrnice na stránce HTML, v podstatě říká Angular, že tato stránka HTML je aplikace angular.js.
Následující příklad ukazuje, jak používat direktivu ng-app. V tomto příkladu si jednoduše ukážeme, jak z normální aplikace HTML udělat aplikaci angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Vysvětlení kódu:
- Směrnice „ng-app“ je přidána do naší značky div, což naznačuje, že tato aplikace je aplikací angular.js. Všimněte si, že směrnici ng-app lze použít na libovolnou značku, takže ji lze také vložit do značky těla.
- Protože jsme tuto aplikaci definovali jako aplikaci angular.js, můžeme nyní využívat funkčnost 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ě proveden, 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 umožněn pouze proto, že jsme aplikaci definovali jako aplikaci angularjs.
2) ng-init
Slouží k inicializaci dat aplikace. Někdy můžete pro svou aplikaci vyžadovat některá místní data, což lze provést pomocí direktivy ng-init.
Níže uvedený příklad ukazuje, jak používat direktivu ng-init.
V tomto příkladu vytvoříme proměnnou nazvanou "TutorialName" pomocí direktivy ng-init a zobrazíme hodnotu této proměnné na stránce.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Vysvětlení kódu:
- Direktiva ng-init je přidána do naší značky div k definování lokální proměnné s názvem "TutorialName" a hodnota této hodnoty je "AngularJS".
- Používáme výrazy v AngularJs k zobrazení výstupu názvu proměnné „TutorialName“, který byl definován v naší směrnici ng-init.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Na výstupu
- Výsledek jasně ukazuje výstup výrazu, který obsahuje řetězec „AngularJS“. Důvodem je přiřazení řetězce „AngularJS“ k proměnné „TutorialName“ v sekci ng-init.
3) ng-model
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ásledující příklad ukazuje, jak používat direktivu ng-model.
V tomto příkladu
- Budeme vytvářet 2 proměnné zvané „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í hodnot ceny a množství.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Vysvětlení kódu:
- Směrnice ng-init je přidána do naší značky div k definování 2 lokálních proměnných; jeden se nazývá „množství“ a druhý „cena“.
- Nyní používáme direktivu ng-model ke svázání textových polí „Lidé“ a „Registrační cena“ s našimi lokálními proměnnými „množství“ a „cena“.
- Nakonec ukazujeme součet pomocí výrazu, kterým je násobení proměnných množství a ceny.
Pokud je kód úspěšně proveden, 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 cenu Lidé a registrace.
Pokud nyní přejdete do textových polí a změníte hodnotu ceny Lidé a registrace, celková částka se automaticky změní.
- Výše uvedený výstup pouze ukazuje sílu datové vazby v angularJs, čehož je dosaženo použitím direktivy ng-model.
4) ng-opakování
Používá se k opakování prvku HTML. Následující příklad ukazuje, jak používat direktivu ng-repeat.
V tomto příkladu
- Budeme mít řadu 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
Event Registration Guru99 Global Event
- {{names}}
Vysvětlení kódu:
- Směrnice ng-init je přidána do naší značky div k definování proměnné zvané „kapitoly“, což je proměnná pole obsahující 3 řetězce.
- Prvek ng-repeat se používá deklarováním vložené proměnné s názvem „names“ a procházením každého prvku v poli kapitol.
- Nakonec ukazujeme hodnotu lokální vložené proměnné „names“.
Pokud je kód úspěšně proveden, 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 ukazuje, že direktiva ng-repeat převzala každou hodnotu v poli zvaném „kapitoly“ a vytvořila položky seznamu HTML pro každou položku v poli.
souhrn
- Směrnice se používají k rozšíření funkčnosti HTML. Angular poskytuje vestavěné směrnice, jako je
- ng-app - Používá se k inicializaci úhlové aplikace.
- ng-init - Používá se k vytváření aplikačních proměnných
- 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í úhlu.