AngularJS je javascriptový framework – javascriptový znamená že je především pro rychle reagující webové aplikace. Framework je zase označení pro soubor pomůcek(tříd, metod, direktiv, atd.) které pomáhají šetřit ruce tím že se nepíše stále stejný kód a výsledek je ještě mnohem lepší než při použití pouze čistého JS a vašeho umu.
Je vyvíjen a převážně stvořen lidmi z této firmy, ale do jeho zdrojových kódů může nahlédnout každý díky tomu že je open-source. Aktuálně se připravuje velký major update s číslovkou 2, který s verzí 1.x nebude v mnohem kompatibilní(beta v2 ke stažení na https://angular.io/ ). Stabilní verze 1.x je k mání na https://angularjs.org/ .
Podělím se s vámi o kód v TypeScriptu, který byl můj první skutečný počin v AngularJS a figuruje na stránce http://www.sunamo.cz/Geocaching/PublicGpxTracks.aspx?code=J1TP9upfL&userName=sunamo#.
sunamo.cz je web který obsahuje mnoho různě tematických webů, každý je ve vlastním adresáři – je to i kvůli snadnému sdílení kódu a jednotlivých webů – a stejná situace je i ve typescriptu. Proto mám soubory .ts sdílené se všemi weby a soubory které může používat jen web ke kterému patří takový soubor je vždy jen jeden pojmenovaný Shared.ts(např. v ts/GeoCaching) a pak ještě soubory které se vztahují jen ke konkrétní stránce.
Nebudu tu kopírovat zbytek kódu, jen ten co pracuje s AngularJS. Prvně tedy kód který je v Shared.ts:
var app: function($scope)
{
});
Zde mám jediný modul pro celý web geocaching.sunamo.cz. Tak je to správně ale rozhodně moduly nešetřete – optimálně na každou komponentu která se využívá na více místech viz. https://docs.angularjs.org/guide/module . K DOM modelu stránky se připojuje pomocí ng-app.
Druhý parametr je pole modulů na kterých závisí. Bez ngRoute si skoro ani neškrtnete, protože díky němu fungují direktivy(pokusím se vysvětlit níže). Pak vytvářím controller modulu. Controller je prostředník mezi modulem a pohledem (View) – přesně dle povahy MVC. Měl by se používat jen k nastavení počátečních hodnot scope a upravení jeho chování.
Nyní se podíváme do souboru PublicGpxTracks.ts:
//-Prikazu aby nejvyssi modul aplikace nacetl a pouzival modul geoPublicGpxTracksTable
app.requires.push("geoPublicGpxTracksTable");
//-Vytvorim modul, ngRoute jiz nemusim pripojovat protoze ho mam jiz z bazoveho modulu geoSunamoCz
var appPublicGpxTracks: function($scope)
{
//-Nastavim hodnoty jez jsou vychozi pro tabulku po nacteni stranky
$scope.sortType = 'firstStep'; // Nastavim vychozi sloupec, ktery bude serazeni po nacteni stranky
$scope.sortReverse = false; // Zda se ma radit sestupne
$scope.searchComment = ''; // textovy filter hledani
$scope.userId = 1;
//-Nactu objekty z klasickeho json pole [{...}, ...]
var o = $("#hfPublicGpxTracks").val();
var s = ToString(o);
var js = jQuery.parseJSON(s);
$scope.tracks = js;
});
Komentáře jsou přímo v kódu a tak není potřeba to nějak více komentovat, když uvidíte html pochopíte vše:
Hledat v názvu souboru:
Pořadí Datum První segment Poslední segment Počet segmentů Celkový čas Nejnižší bod Nejvyšší bod Nachozeno Průměrná rychlost Název souboru {{$index 1}} {{ track.date | date:'yyyy-MM-dd' }} {{ track.firstSegment | date:'HH:mm:ss' }} {{ track.lastSegment | date:'HH:mm:ss' }} {{ track.countSegment }} {{ track.time | date:'HH:mm:ss' }} {{ track.lowestPoint }} mnm {{ track.highestPoint }} mnm {{ track.km }} km {{ track.averageSpeed }} m/s {{ track.fnwoe }}
Používané direktivy:
data-ng-click – co se má stát po kliknutí na element. Nastavením jediné proměnné patřící ke $scope se aktualizují údaje v modulu
data-ng-repeat – zpracuje a dle html kódu uvnitř zobrazí každý z prvků kolekce
ng-model – jedná se o proměnnou v $scope aktuálního controlleru, na kterou je obousměrně navázána hodnota atributu nebo elementu
Používané filtry ng-repeat direktivy:
orderBy – seřadí prvky. Pracuje s libovolným standardizovaným datovým typem. Druhý parametr je bool – nepovinný a určuje zda se má řadit sestupně(DESC).
filter – nechá pouze ty filtry které obsahovaly daný objekt jakéhokoliv typu
Používané proměnné of ng-repeat direktivy:
$index – vrací index aktuální iterace počítaný od nuly
Pokud chce člověk vypsat hodnotu nějaké proměnné do html výstupu, ať jej obalí do dvojitých složených závorek(třeba {{ objekt.promenna }}. Může se to používat mimo i v xml atributy.