Aplikace AngularJS Hello World: Váš první příklad programu

Od: James Hartman James Hartman
Hours aktualizováno

Nejlepší způsob, jak vidět sílu aplikace AngularJS, je vytvořit si svůj první základní program „Hello World“ v Angular.JS.

Existuje mnoho integrovaných vývojových prostředí, která můžete použít pro vývoj AngularJS, některá z populárních jsou zmíněna níže. V našem příkladu používáme Webstorm jako naše IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Ahoj světe, AngularJS

Níže uvedený příklad ukazuje nejjednodušší způsob, jak vytvořit svou první aplikaci „Hello world“ v AngularJS.

Program AngularJS Hello World

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

Vysvětlení kódu:

  1. "ng-appKlíčové slovo ” se používá k označení, že tato aplikace by měla být považována za aplikaci Angular js. Této aplikaci lze přiřadit jakýkoli název.
  2. Řadič je to, co se používá k udržení obchodní logiky. V tagu h1 chceme přistupovat k ovladači, který bude mít logiku pro zobrazení „HelloWorld“, takže můžeme říci, že v tomto tagu chceme přistupovat k ovladači s názvem „HelloWorldCtrl“.
  3. Používáme členskou proměnnou nazvanou „zpráva“, která není ničím jiným než zástupným symbolem pro zobrazení zprávy „Ahoj světe“.
  4. Značka „script“ se používá k odkazování na skript angular.js, který má všechny potřebné funkce pro angular js. Bez tohoto odkazu, pokud se pokusíme použít jakékoli funkce AngularJS, nebudou fungovat.
  5. „Controller“ je místo, kde ve skutečnosti vytváříme naši obchodní logiku, což je náš kontrolor. Specifika každého klíčového slova budou vysvětlena v následujících kapitolách. Co je důležité poznamenat, že definujeme metodu ovladače nazvanou 'HelloWorldCtrl', na kterou odkazuje Krok 2.
  6. Vytváříme „funkci“, která bude volána, když náš kód zavolá tento ovladač. Objekt $scope je speciální objekt v AngularJS, což je globální objekt používaný v Angular.js. Objekt $scope se používá ke správě dat mezi ovladačem a pohledem.
  7. Vytváříme členskou proměnnou s názvem „message“, přiřazujeme jí hodnotu „HelloWorld“ a připojujeme členskou proměnnou k objektu scope.

POZNÁMKA: Direktiva ng-controller je klíčové slovo definované v AngularJS (krok č. 2) a používá se k definování ovladačů ve vaší aplikaci. Zde v naší aplikaci jsme použili klíčové slovo ng-controller k definování řadiče s názvem 'HelloWorldCtrl'. Skutečná logika pro regulátor bude vytvořena v (krok #5).

Pokud je příkaz úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Zobrazí se zpráva 'Hello World'.

Program AngularJS Hello World