AngularJS Hello World alkalmazás: Az első példaprogram
James Hartman
Az AngularJS-alkalmazások erejének megismerésének legjobb módja az, ha létrehozza az első alapvető „Hello World” alkalmazást az Angular.JS-ben.
Számos integrált fejlesztői környezet használható az AngularJS fejlesztéshez, a legnépszerűbbek közül néhányat az alábbiakban említünk. Példánkban használjuk Webstorm mint a mi IDE-nk.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
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-ben.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Kód magyarázata:
- Azng-app” kulcsszó azt jelzi, hogy ezt az alkalmazást szögletes js-alkalmazásnak kell tekinteni. Bármilyen név megadható ennek az alkalmazásnak.
- A kontroller az, amit az üzleti logika megtartására használnak. A h1 tag-ben szeretnénk elérni a vezérlőt, aminek a logikája lesz a „HelloWorld” megjelenítéséhez, tehát mondhatjuk, hogy ebben a címkében szeretnénk elérni a „HelloWorldCtrl” nevű vezérlőt.
- Egy „message” nevű tagváltozót használunk, amely nem más, mint egy helyőrző a „Hello World” üzenet megjelenítéséhez.
- A „script tag” az angular.js szkriptre való hivatkozásra szolgál, amely rendelkezik az angular js-hez szükséges összes funkcióval. E hivatkozás nélkül, ha megpróbálunk bármilyen AngularJS függvényt használni, azok nem működnek.
- A „vezérlő” az a hely, ahol valójában létrehozzuk az üzleti logikánkat, amely a kontrollerünk. Az egyes kulcsszavak sajátosságait a következő fejezetekben ismertetjük. Fontos megjegyezni, hogy definiálunk egy 'HelloWorldCtrl' nevű vezérlő módszert, amelyre a 2. lépésben hivatkozunk.
- Létrehozunk egy „függvényt”, amelyet akkor hívunk meg, amikor a kódunk meghívja ezt a vezérlőt. A $scope objektum egy speciális objektum az AngularJS-ben, amely az Angular.js-ben használt globális objektum. A $scope objektum a vezérlő és a nézet közötti adatok kezelésére szolgál.
- Létrehozunk egy „message” nevű tagváltozót, hozzárendeljük a „HelloWorld” értékét, és csatoljuk a tagváltozót a hatókör objektumhoz.
JEGYZET: Az ng-controller direktíva egy kulcsszó, amely a következőben van definiálva AngularJS (2. lépés), és a vezérlők meghatározására szolgál az alkalmazásban. 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és) jön létre.
Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
Megjelenik a „Hello World” üzenet.
