Najlepším spôsobom, ako vidieť silu aplikácie AngularJS, je vytvoriť si svoju prvú základnú aplikáciu „Hello World“ v Angular.JS.
Existuje mnoho integrovaných vývojových prostredí, ktoré môžete použiť na vývoj AngularJS, niektoré z populárnych sú spomenuté nižšie. V našom príklade používame ako svoje IDE Webstorm.
- Webstorm
- Vznešený text
- Zatmenie AngularJS
- Vizuálne štúdio
Ahoj svet, AngularJS
Nasledujúci príklad ukazuje najjednoduchší spôsob, ako vytvoriť svoju prvú aplikáciu „Hello world“ v AngularJS.
Guru99 {{message}}
Vysvetlenie kódu:
- Kľúčové slovo „ ng-app “ sa používa na označenie toho, že by sa táto aplikácia mala považovať za aplikáciu uhlového js. Tejto aplikácii je možné dať akékoľvek meno.
- Regulátor je to, čo sa používa na uchovanie obchodnej logiky. V značke h1 chceme získať prístup k radiču, ktorý bude mať logiku zobrazenia „HelloWorld“, takže môžeme povedať, že v tejto značke chceme získať prístup k radiču s názvom „HelloWorldCtrl“.
- Používame členskú premennú nazvanú „správa“, ktorá nie je ničím iným ako zástupným znakom na zobrazenie správy „Hello World“.
- „Značka skriptu“ sa používa na označenie skriptu angular.js, ktorý má všetky potrebné funkcie pre uhlové js. Bez tohto odkazu, ak sa pokúsime použiť akékoľvek funkcie AngularJS, nebudú fungovať.
- „Kontrolór“ je miesto, kde v skutočnosti vytvárame našu obchodnú logiku, ktorá je naším kontrolórom. Špecifiká každého kľúčového slova budú vysvetlené v nasledujúcich kapitolách. Je dôležité poznamenať, že definujeme metódu radiča s názvom „HelloWorldCtrl“, na ktorú sa odkazuje v kroku 2.
- Vytvárame „funkciu“, ktorá sa zavolá, keď náš kód zavolá tento radič. Objekt $ scope je špeciálny objekt v AngularJS, čo je globálny objekt používaný v Angular.js. Objekt $ scope sa používa na správu údajov medzi radičom a zobrazením.
- Vytvárame členskú premennú nazvanú „správa“, ktorej priradíme hodnotu „HelloWorld“ a pripojíme ju k objektu rozsahu.
POZNÁMKA : Direktíva ng-controller je kľúčové slovo definované v AngularJS (krok č. 2) a používa sa na definovanie ovládačov vo vašej aplikácii. Tu v našej aplikácii sme použili kľúčové slovo ng-controller na definovanie radiča s názvom „HelloWorldCtrl“. Skutočná logika pre radič sa vytvorí v (krok č. 5).
Ak je príkaz vykonaný úspešne, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Zobrazí sa správa „Hello World“.
