AngularJS Hello World alkalmazás: Az első példaprogram

By: James Hartman James Hartman
Hours korszerűsített

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.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. 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.

AngularJS Hello World Program

<!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:

  1. 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.
  2. 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.
  3. Egy „message” nevű tagváltozót használunk, amely nem más, mint egy helyőrző a „Hello World” üzenet megjelenítéséhez.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

AngularJS Hello World Program