Čo je to colná smernica?
Vlastná smernica v Angular Js je používateľom definovaná smernica s požadovanou funkčnosťou. Aj napriek tomu, že AngularJS má veľa výkonných smerníc, niekedy sú potrebné vlastné smernice.
V tomto návode sa naučíte
- Ako vytvoriť vlastnú smernicu?
- Smernice a rozsahy AngularJs
- Používanie radičov so smernicami
- Ako vytvoriť opakovane použiteľné smernice
- Direktívy a komponenty AngularJS - ng-transclude
- Vnorené smernice
- Riešenie udalostí v smernici
Ako vytvoriť vlastnú smernicu?
Pozrime sa na príklad toho, ako môžeme vytvoriť vlastnú smernicu.
Vlastná smernica v našom prípade jednoducho vloží značku div, ktorá má na našej stránke pri volaní smernice text „AngularJS Tutorial“.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Najprv vytvárame modul pre našu uhlovú aplikáciu. Toto je potrebné na vytvorenie vlastnej smernice, pretože smernica sa vytvorí pomocou tohto modulu.
- Teraz vytvárame vlastnú smernicu s názvom „ngGuru“ a definujeme funkciu, ktorá bude mať vlastný kód pre našu smernicu.
Poznámka:-
Upozorňujeme, že pri definovaní smernice sme ju definovali ako ngGuru s veľkým písmenom „G“. A keď k nej pristupujeme z našej značky div ako smernica, pristupujeme k nej ako ng-guru. Takto Angular chápe vlastné smernice definované v aplikácii. Názov colnej smernice by mal najskôr začínať písmenami „ng“. Po druhé, symbol pomlčky „-“ by sa mal uviesť iba pri volaní smernice. A do tretice, prvé písmeno, ktoré nasleduje pri definovaní smernice za písmenom „ng“, môže byť malé alebo veľké.
- Pre vlastné smernice používame parameter šablóny, ktorý je parametrom definovaným v Angular. V tomto definujeme, že kedykoľvek sa použije táto smernica, stačí použiť hodnotu šablóny a vložiť ju do volacieho kódu.
- Tu teraz využívame našu na mieru vytvorenú smernicu „ng-guru“. Keď to urobíme, teraz sa sem vloží hodnota, ktorú sme definovali pre našu šablónu „Angular JS Tutorial“.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
- Vyššie uvedený výstup jasne ukazuje, že sa v prehliadači zobrazí naša vlastná smernica ng-guru, ktorá má definovanú šablónu na zobrazovanie vlastného textu.
Smernice a rozsahy AngularJs
Rozsah je definovaný ako lepidlo, ktoré viaže radič na pohľad spravovaním údajov medzi pohľadom a radičom.
Pri vytváraní vlastných smerníc AngularJs budú mať predvolene prístup k objektu rozsahu v nadradenom radiči.
Týmto spôsobom je pre vlastnú direktívu ľahké využiť údaje, ktoré sa odovzdávajú hlavnému radiču.
Pozrime sa na príklad toho, ako môžeme použiť rozsah nadradeného radiča v našej vlastnej smernici.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Najskôr vytvoríme radič s názvom „DemoController“. V tomto definujeme premennú nazvanú tutorialName a pripojíme ju k objektu rozsahu v jednom príkaze - $ scope.tutorialName = "AngularJS".
- V našej vlastnej smernici môžeme premennú „tutorialName“ nazvať pomocou výrazu. Táto premenná by bola prístupná, pretože je definovaná v radiči „DemoController“, ktorý by sa stal nadradeným pre túto smernicu.
- Na ovládač odkazujeme v značke div, ktorá bude fungovať ako naša nadradená značka div. Upozorňujeme, že toto je potrebné urobiť ako prvé, aby naša vlastná smernica získala prístup k premennej tutorialName.
- Na záver len pripojíme našu vlastnú smernicu „ng-guru“ k našej značke div.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
- Vyššie uvedený výstup jasne ukazuje, že naša vlastná smernica „ng-guru“ využíva v nadradenom radiči premennú rozsahu tutorialName.
Používanie radičov so smernicami
Úhlové dáva zariadeniu prístup k členskej premennej radiča priamo z vlastných smerníc bez potreby objektu rozsahu.
Toto je niekedy nevyhnutné, pretože v aplikácii môžete mať viac objektov rozsahu patriacich viacerým radičom.
Existuje teda veľká šanca, že by ste mohli urobiť chybu pri prístupe k objektu rozsahu nesprávneho radiča.
V takýchto scenároch existuje spôsob, ako z mojej smernice konkrétne spomenúť výrok „Chcem získať prístup k tomuto konkrétnemu kontrolórovi“.
Pozrime sa na príklad toho, ako to môžeme dosiahnuť.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Najskôr vytvoríme radič s názvom „DemoController“. V tomto definujeme premennú nazvanú „tutorialName“ a tentokrát ju namiesto pripojenia k objektu rozsahu pripojíme priamo k radiču.
- V našej vlastnej smernici konkrétne spomíname, že chceme použiť radič „DemoController“ pomocou kľúčového slova parametra radiča.
- Odkaz na kontrolór vytvoríme pomocou parametra „controllerAs“. Toto je definované v Angular a je to spôsob, ako odkazovať na ovládač ako na referenciu.
Poznámka: - V smernici je možné pristupovať k viacerým radičom zadaním príslušných blokov príkazov controller, controllerAs a template.
- Nakoniec v našej šablóne používame referenciu vytvorenú v kroku 3 a používame členskú premennú, ktorá bola pripojená priamo k kontroléru v kroku 1.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Výstup jasne ukazuje, že vlastná smernica osobitne pristupuje k DemoController a k nej pripojenej členskej premennej tutorialName a zobrazuje text „Angular“.
Ako vytvoriť opakovane použiteľné smernice
Už sme videli silu vlastných smerníc, ale môžeme ju posunúť na ďalšiu úroveň vytvorením našich vlastných opakovane použiteľných smerníc.
Povedzme napríklad, že sme chceli vložiť kód, ktorý by vždy zobrazoval nižšie uvedené značky HTML na viacerých obrazovkách, čo je v podstate iba vstup pre „meno“ a „vek“ používateľa.
Aby sme túto funkciu mohli opakovane použiť na viacerých obrazovkách bez zakódovania, vytvoríme hlavný ovládací prvok alebo smernicu v uhle, ktorá tieto ovládacie prvky uchová („Meno“ a „vek“ používateľa).
Takže teraz, namiesto toho, aby sme zakaždým zadávali rovnaký kód pre obrazovku nižšie, môžeme tento kód skutočne vložiť do smernice a vložiť túto smernicu kedykoľvek.
Pozrime sa na príklad toho, ako to môžeme dosiahnuť.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- V našom útržku kódu pre vlastnú smernicu sa zmení len hodnota, ktorá sa dá parametru šablóny našej vlastnej smernice.
Namiesto značky alebo textu plánu päť vlastne zadávame celý fragment 2 vstupných ovládacích prvkov pre „Meno“ a „vek“, ktoré je potrebné zobraziť na našej stránke.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z vyššie uvedeného výstupu vidíme, že sa na stránku pridá fragment kódu zo šablóny vlastnej smernice.
Direktívy a komponenty AngularJS - ng-transclude
Ako sme už spomínali, Angular má rozšíriť funkčnosť HTML. A už sme videli, ako môžeme dosiahnuť vkladanie kódu pomocou vlastných opakovane použiteľných smerníc.
Ale v modernom vývoji webových aplikácií existuje aj koncept vývoja webových komponentov. Čo v podstate znamená vytvorenie našich vlastných značiek HTML, ktoré sa dajú použiť ako komponenty v našom kóde.
Uhlová teda poskytuje ďalšiu úroveň moci pri rozširovaní značiek HTML tým, že umožňuje vkladať atribúty do samotných značiek HTML.
To sa deje pomocou značky „ ng-transclude “, ktorá je akýmsi nastavením, ktoré umožňuje uhlovému záznamu zachytiť všetko, čo je vložené do smernice v značení.
Uveďme si príklad, ako to môžeme dosiahnuť.
Event Registration Guru99 Global Event
Angular JS
Vysvetlenie kódu:
- Pomocou tejto smernice definujeme vlastnú značku HTML nazvanú „tab“ a pridávame funkciu, ktorá vloží do tejto značky vlastný kód. Vo výstupe bude naša značka vlastného panela zobrazovať text „AngularJS“ v obdĺžniku s čiernym okrajom.
- Atribút „transclude“ musí byť uvedený ako pravdivý, čo je potrebné pre uhlové použitie na vloženie tejto značky do nášho modelu DOM.
- V rozsahu definujeme atribút titulu. Atribúty sú zvyčajne definované ako páry názov / hodnota, napríklad: name = "value". V našom prípade je názov atribútu v našej značke HTML značky „title“. Symbol „@“ je požiadavka z uhla. To sa deje tak, že keď sa v kroku 5 vykoná riadok title = {{title}}, do značky HTML panela sa pridá vlastný kód pre atribút title.
- Vlastný kód pre atribúty názvu, ktorý iba vykresľuje plné čierne orámovanie pre našu kontrolu.
- Nakoniec voláme našu vlastnú značku HTML spolu s definovaným atribútom title.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
- Výstup jasne ukazuje, že atribút title značky html5 v paneli bol nastavený na vlastnú hodnotu „Angular.JS“.
Vnorené smernice
Smernice v uhle môžu byť vnorené. Rovnako ako len vnútorné moduly alebo funkcie v ľubovoľnom programovacom jazyku, možno budete musieť vložiť smernice do seba navzájom.
Môžete to lepšie pochopiť tak, že si pozriete príklad uvedený nižšie.
V tomto príklade vytvárame 2 smernice zvané „vonkajšia“ a „vnútorná“.
- Vnútorná smernica zobrazuje text s názvom „Vnútorné“.
- Zatiaľ čo vonkajšia smernica skutočne volá vnútornú smernicu, aby zobrazila text s názvom „Vnútorná“.
Guru99 Global Event