čtvrtek 6. srpna 2015

AngularJS: co to je?

Ionic

Ionic je framework založený na Angularu. O Ionicu by se velmi zjednodušeně dalo říct, že je to (grafická) nadstavba nad Angularem.

jQuery

Stále známý a v současné době používaný způsob programování v javascriptu je s využitím knihovny jQuery. Tato knihovna řeší za programátora mnohé z toho, co by musel zdlouhavě a ručně programovat.

Angular

Je velmi populární javascriptová knihovna (framework), kterou vyvinul Američan slovenského původu Miško Hevery.

Při programování mobilních aplikací se dá použít "čistý" javascript; ovšem nevýhodou je velký rozsah kódu. Ne každý začínající programátor dokáže úspěšně vyvinout aplikaci v "čistém" javascriptu, tj. bez použití externích knihoven. Angular sníží množství programového kódu zhruba na desetinu (!).

Angular umožní ještě elegantnější způsob programování v javascriptu než s použitím jQuery. Navazuje na jQuery a podstatným způsobem řeší součinnost mezi javascriptovou částí aplikace (logika) a HTML částí aplikace (grafické rozhraní).
Výchozím webem je AngularJS (anglicky), kde je odkaz na stažení, základní informace, krátké příklady použití a rozsáhlá a dobře zpracovaná nápověda.

V současné době (srpen 2015) je aktuální verze 1.4.3, vývojový tým už dlouhou dobu pracuje na verzi 2, která se bude od současné 1.x významným způsobem lišit. Nicméně: dnes je k dispozici neuvěřitelné množství článků, návodů, tutoriálů, knih, ... o současné aktuální verzi 1.x - nevidím tedy jako problém naučit se pracovat s Angularem ve verzi 1.x (s tím, že verze 2.x bude zásadně odlišná). Nic nám totiž nebrání v používání Angularu 1.x i v příštích několika letech.

Angular, ukázka kódu


Mějme v JS části aplikace proměnnou this.name, ve které máme uloženo jméno a proměnnou this.surname, ve které je příjmení:
Obsah proměnné budeme chtít vypsat v HTML kódu. K tomu Angular používá dvojité složené závorky, do kterých umístíme název proměnné (pozor, je nutné předřadit ještě alias controlleru!):
Tohle je kód, který napíše programátor. Angular projde celý HTML kód před tím, než se poprvé zobrazí, a kde najde zápis (proměnnou, výraz, ...) ve dvojitých složených závorkách {{}}, tam zjistí (vypočítá) hodnotu a vloží ji na místo {{}}. 

Tento jednoduchý příklad použití (uvedený pro představu) sestává ze dvou souborů: index.html a app.js. Jejich obsah je následující:

Ta část, kterou "má Angular na starosti" se v HTML kódu označí direktivou (atributem) ng-controller. Uvede se název controlleru (je definován v JS části) a jeho alias. V našem případě 
je název controlleru personController a jeho alias je person. Proměnná deklarovaná v JS části (v controlleru) jako this.name se zapíše v HTML kódu do dvojitých složených závorek jako {{person.name}}. Dá se říct, že proměnná name vystupuje v JS části jako this.name a v HTML části jako person.name.

Žádné komentáře:

Okomentovat