Nejlepší způsob, jak vidět sílu aplikace AngularJS, je vytvořit svou první základní aplikaci „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 uvedena níže. V našem příkladu používáme Webstorm jako naše IDE.
- Webstorm
- Vznešený text
- AngularJS Eclipse
- Vizuální studio
Ahoj světe, AngularJS
Následující příklad ukazuje nejjednodušší způsob, jak vytvořit první aplikaci „Hello world“ v AngularJS.
Guru99 {{message}}
Vysvětlení kódu:
- Klíčové slovo „ ng-app “ se používá k označení, že tato aplikace by měla být považována za úhlovou aplikaci js. Této aplikaci lze dát jakékoli jméno.
- Řadič slouží k uchovávání obchodní logiky. Ve značce h1 chceme získat přístup k řadiči, který bude mít logiku pro zobrazení „HelloWorld“, takže můžeme říci, že v této značce chceme přistupovat k řadiči s názvem „HelloWorldCtrl“.
- Používáme členskou proměnnou nazvanou „zpráva“, která není ničím jiným než zástupným symbolem pro zobrazení zprávy „Hello World“.
- „Značka skriptu“ se používá k odkazu na skript angular.js, který má všechny potřebné funkce pro úhlové js. Bez tohoto odkazu, pokud se pokusíme použít jakékoli funkce AngularJS, nebudou fungovat.
- „Správce“ je místo, kde ve skutečnosti vytváříme naši obchodní logiku, která je naším správcem. Specifika každého klíčového slova budou vysvětlena v následujících kapitolách. Je důležité si uvědomit, že definujeme metodu kontroleru nazvanou 'HelloWorldCtrl', na kterou se odkazuje v kroku 2.
- Vytváříme „funkci“, která bude volána, když náš kód zavolá tento řadič. 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 řadičem a pohledem.
- Vytváříme členskou proměnnou nazvanou „zpráva“, přiřazujeme jí hodnotu „HelloWorld“ a připojujeme členskou proměnnou k objektu oboru.
POZNÁMKA : Direktiva ng-controller je klíčové slovo definované v AngularJS (krok č. 2) a používá se k definování řadičů ve vaší aplikaci. Tady v naší aplikaci jsme použili klíčové slovo ng-controller k definování řadiče s názvem 'HelloWorldCtrl'. Skutečná logika pro řadič 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“.
