Az AngularJS alkalmazás erejének legjobb megismerése az, ha létrehozza első alapprogramját, a "Hello World" alkalmazást az Angular.JS alkalmazásban.
Az AngularJS fejlesztéséhez sok integrált fejlesztői környezet használható, amelyek közül néhányat az alábbiakban említünk. Példánkban a Webstormot használjuk IDE-ként.
- Webstorm
- Fenséges szöveg
- SzögletesJS Eclipse
- Vizuális Stúdió
Helló világ, AngularJS
Az alábbi példa bemutatja az első "Hello world" alkalmazás létrehozásának legegyszerűbb módját az AngularJS alkalmazásban.
Guru99 {{message}}
Kód Magyarázat:
- Az " ng-app " kulcsszó arra utal, hogy ezt az alkalmazást szögletes js alkalmazásnak kell tekinteni. Bármilyen név adható ennek az alkalmazásnak.
- A vezérlő az üzleti logika megtartására szolgál. A h1 tagben szeretnénk hozzáférni a vezérlőhöz, amelynek logikája lesz a "HelloWorld" megjelenítésére, tehát azt mondhatjuk, hogy ebben a tagben a "HelloWorldCtrl" nevű vezérlőhöz szeretnénk hozzáférni.
- Az "message" nevű tagváltozót használjuk, amely nem más, mint egy helyőrző a "Hello World" üzenet megjelenítésére.
- A "script tag" az angular.js parancsfájl hivatkozására szolgál, amely rendelkezik minden szükséges funkcióval a szögletes js-hez. E hivatkozás nélkül, ha bármilyen AngularJS funkciót megpróbálunk használni, azok nem fognak működni.
- A "vezérlő" az a hely, ahol valóban létrehozzuk üzleti logikánkat, amely a kontrollerünk. Az egyes kulcsszavak sajátosságait a következő fejezetekben ismertetjük. Fontos megjegyezni, hogy meghatározzuk a „HelloWorldCtrl” nevű vezérlő módszert, amelyre a 2. lépés hivatkozik.
- Létrehozunk egy "funkciót", amelyet akkor hívunk meg, amikor kódunk meghívja ezt a vezérlőt. A $ scope objektum egy speciális objektum az AngularJS-ben, amely egy globális objektum, amelyet az Angular.js fájlban használnak. A $ scope objektum az adatok kezelésére szolgál a vezérlő és a nézet között.
- Létrehozunk egy "message" nevű tagváltozót, hozzárendeljük a "HelloWorld" értékét, és a tagváltozót a hatókör objektumhoz csatoljuk.
MEGJEGYZÉS : Az ng-controller irányelv az AngularJS-ben definiált kulcsszó (2. lépés), és vezérlők definiálására szolgál az alkalmazásban. Itt az alkalmazásunkban az ng-controller kulcsszót használtuk a „HelloWorldCtrl” nevű vezérlő meghatározására. A vezérlő tényleges logikája az 5. lépésben jön létre.
A parancs sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Megjelenik a „Hello World” üzenet.
