Smernica AngularJS s príkladom: ng-init, ng-repeat, ng-app, ng-model

Obsah:

Anonim

Čo je smernica AngularJS?

Direktíva v AngularJS je príkaz, ktorý dáva HTML nové funkcie. Pri prechode kódom HTML v uhle najskôr nájde na stránke smernice a potom podľa toho analyzuje stránku HTML.

Jednoduchým príkladom smernice AngularJS, ktorú sme videli v predchádzajúcich kapitolách, je „smernica ng-model“. Táto smernica sa používa na naviazanie nášho dátového modelu na náš názor.

Poznámka: Základný uhlový kód môžete mať na stránke HTML so smernicami ng-init, ng-repeat a ng-model bez toho, aby ste museli mať ovládače. Logika týchto smerníc je v súbore Angular.js, ktorý poskytuje spoločnosť Google. Ovládače sú konštrukcie uhlového programovania ďalšej úrovne, ktoré umožňujú obchodnú logiku, ale ako už bolo spomenuté, pre aplikáciu ako uhlovú aplikáciu nie je povinné mať ovládač.

V tomto návode sa naučíte

  • Ako vytvoriť smernicu
  • ng-app
  • ng-init
  • ng-model
  • ng-opakovať

Ako vytvoriť smernicu

Ako sme definovali v úvode, smernice AngularJS sú spôsobom, ako rozšíriť funkčnosť HTML.

V AngularJS sú definované 4 smernice.

Nižšie je uvedený zoznam smerníc AngularJS spolu s príkladmi poskytnutými na vysvetlenie každej z nich.

1) ng-aplikácia

Používa sa na inicializáciu aplikácie Angular.JS. Keď je táto smernica zavedená na stránke HTML, v zásade hovorí spoločnosti Angular, že táto stránka HTML je aplikáciou angular.js.

Nasledujúci príklad ukazuje, ako používať smernicu ng-app. V tomto príklade si jednoducho ukážeme, ako urobiť z normálnej aplikácie HTML aplikáciu angularJS.

Event Registration

Guru99 Global Event


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

Vysvetlenie kódu:

  1. Do našej značky div je pridaná smernica „ng-app“, ktorá označuje, že táto aplikácia je aplikáciou angular.js. Upozorňujeme, že smernicu ng-app je možné použiť na ľubovoľnú značku, takže ju možno vložiť aj do značky body.
  2. Pretože sme túto aplikáciu definovali ako aplikáciu angular.js, môžeme teraz využívať funkcionalitu angular.js. V našom prípade používame výrazy na jednoduché zreťazenie 2 reťazcov.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Výstup zreteľne zobrazuje výstup výrazu, ktorý bol možný iba preto, že sme aplikáciu definovali ako aplikáciu angularjs.

2) ng-init

Používa sa na inicializáciu údajov aplikácie. Niekedy môžete pre svoju aplikáciu vyžadovať nejaké miestne údaje, čo je možné dosiahnuť pomocou smernice ng-init.

Nasledujúci príklad ukazuje, ako používať direktívu ng-init.

V tomto príklade vytvoríme pomocou smernice ng-init premennú nazvanú „TutorialName“ a na stránke zobrazíme hodnotu tejto premennej.

Event Registration

Guru99 Global Event


Tutorial Name : {{ TutorialName}}

Vysvetlenie kódu:

  1. Do našej značky div je pridaná smernica ng-init, ktorá definuje lokálnu premennú nazvanú „TutorialName“ a jej hodnota je „AngularJS“.
  2. V AngularJs používame výrazy na zobrazenie výstupu názvu premennej „TutorialName“, ktorá bola definovaná v našej smernici ng-init.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Vo výstupe

  • Výsledok zreteľne ukazuje výstup výrazu, ktorý obsahuje reťazec „AngularJS“. Je to dôsledok priradenia reťazca „AngularJS“ k premennej „TutorialName“ v sekcii ng-init.

3) ng-model

A nakoniec máme direktívu ng-model, ktorá slúži na naviazanie hodnoty ovládacieho prvku HTML na údaje aplikácie. Nasledujúci príklad ukazuje, ako používať smernicu ng-model.

V tomto príklade

  • Chystáme sa vytvoriť 2 premenné nazývané „množstvo“ a „cena“. Tieto premenné budú viazané na 2 ovládacie prvky vstupu textu.
  • Potom ideme zobraziť celkovú sumu na základe znásobenia hodnôt ceny a množstva.

Event Registration

Guru99 Global Event


People : Registration Price : Total : {{quantity * price}}

Vysvetlenie kódu:

  1. Do našej značky div je pridaná smernica ng-init, ktorá definuje 2 lokálne premenné; jeden sa nazýva „množstvo“ a druhý „cena“.
  2. Teraz používame direktívu ng-model na viazanie textových polí „Ľudia“ a „Registračná cena“ na naše lokálne premenné „množstvo“ a „cena“.
  3. Nakoniec ukazujeme súčet pomocou výrazu, ktorým je násobenie premenných množstva a ceny.

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 násobenie hodnôt pre cenu Ľudia a registrácia.

Teraz, ak prejdete do textových polí a zmeníte hodnotu ceny Ľudia a registrácia, suma sa automaticky zmení.

  • Vyššie uvedený výstup iba ukazuje silu dátovej väzby v angularJs, ktorá sa dosahuje použitím smernice ng-model.

4) ng-opakovať

Používa sa na opakovanie prvku HTML. Nasledujúci príklad ukazuje, ako používať direktívu ng-repeat.

V tomto príklade

  • Budeme mať pole názvov kapitol v premennej poľa a
  • potom použite direktívu ng-repeat na zobrazenie každého prvku poľa ako položky zoznamu

Event Registration

Guru99 Global Event




    

  • {{names}}
    •

Vysvetlenie kódu:

  1. Do našej značky div je pridaná smernica ng-init, ktorá definuje premennú nazvanú „chapters“, čo je premenná poľa obsahujúca 3 reťazce.
  2. Element ng-repeat sa používa na deklarovanie vloženej premennej s názvom „names“ a na prechádzanie jednotlivými prvkami v poli kapitol.
  3. Na záver uvádzame hodnotu lokálnej vloženej premennej „names“.

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 iba ukazuje, že direktíva ng-repeat zobrala každú hodnotu z poľa s názvom „kapitoly“ a pre každú položku v poli vytvorila položky zoznamu HTML.

Zhrnutie

  • Smernice sa používajú na rozšírenie funkčnosti HTML. Angular poskytuje vstavané smernice ako napr
    • ng-app - slúži na inicializáciu hranatej aplikácie.
    • ng-init - slúži na vytváranie aplikačných premenných
    • ng-model - Používa sa na naviazanie ovládacích prvkov HTML na údaje aplikácie
    • ng-repeat - Používa sa na opakovanie prvkov pomocou uhla.