Zaciname v AngularJS


AngularJS

AngularJS je javascriptovy framework – javascriptovy znamena ze je predevsim pro rychle reagujici webove aplikace. Framework je zase oznaceni pro soubor pomucek(trid, metod, direktiv, atd.) ktere pomahaji setrit ruce tim ze se nepise stale stejny kod a vysledek je jeste mnohem lepsi nez pri pouziti pouze cisteho JS a vaseho umu.

Je vyvijeny a prevazne stvoreny lidmi z teto firmy, ale do jeho zdrojovych kodu muze nahlednout kazdy diky tomu ze je open-source. Aktualne se pripravuje velky major update s cislovkou 2, ktery s verzi 1.x nebude v mnohem kompatibilni(beta v2 ke stazeni na   https://angular.io/ ). Stabilni verze 1.x je k mani na https://angularjs.org/ .

Podelim se s vami o kod v TypeScriptu, ktery byl muj prvni skutecny pocin v AngularJS a figuruje na strance   http://www.sunamo.cz/Geocaching/PublicGpxTracks.aspx?code=J1TP9upfL&userName=sunamo#.
sunamo.cz je web ktery obsahuje mnoho ruzne tematickych webu, kazdy je ve vlastnim adresari – je to i kvuli snadnemu sdileni kodu a jednotlivych webu – a stejna situace je i ve typescriptu. Proto mam soubory .ts sdilene se vsemi weby a soubory ktere muze pouzivat jen web ke kteremu patri takovy soubor je vzdy jen jeden pojmenovany Shared.ts(napr. v ts/GeoCaching) a pak jeste soubory ktere se vztahuji jen ke konkretni strance.

Nebudu tu kopirovat zbytek kodu, jen ten co pracuje s AngularJS. Prvne tedy kod ktery je v Shared.ts:

Zde mam jediny modul pro cely web geocaching.sunamo.cz. Tak je to spravne ale rozhodne moduly nesetrete – optimalne na kazdou komponentu ktera se vyuziva na vice mistech viz. https://docs.angularjs.org/guide/module . K DOM modelu stranky se pripojuje pomoci ng-app.

Druhy parametr je pole  modulu na kterych zavisi. Bez ngRoute si skoro ani neskrtnete, protoze diky nemu funguji direktivy(pokusim se vysvetlit nize). Pak vytvarim controller modulu. Controller je prostrednik mezi modulem a pohledem (View) – presne dle povahy MVC. Mel by se pouzivat jen k nastaveni pocatecnich hodnot scope a upraveni jeho chovani.

Nyni se podivame do souboru  PublicGpxTracks.ts:

Komentare jsou primo v kodu a tak neni potreba to nejak vice komentovat, kdyz uvidite html pochopite vse:

Pouzivane direktivy:

data-ng-click – co se ma stat po kliknuti na element. Nastavenim jedine promenne patrici ke $scope se aktualizuji udaje v modulu

data-ng-repeat – zpracuje a dle html kodu uvnitr zobrazi kazdy z prvku kolekce

ng-model – jedna se o promennou v $scope aktualniho controlleru, na kterou je obousmerne navazana hodnota atributu nebo elementu

 

Pouzivane filtry ng-repeat direktivy:

orderBy – seradi prvky. Pracuje s libovolnym standardizovanym datovym typem. Druhy parametr je bool – nepovinny a urcuje zda se ma radit sestupne(DESC).

filter – necha pouze ty filtry ktere obsahovali dany objekt jakehokoliv typu

 

Pouzivane promenne of ng-repeat direktivy:

$index – vraci index aktualni iretace pocitany od nuly

Pokud chce clovek vypsat hodnotu nejake promenne do html vystupu, at jej obali do dvojitych slozenych zavorek(treba {{ objekt.promenna }}. Muze se to pouzivat mimo i v xml atributy.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.