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:
|
1 2 3 |
var app: function($scope) { }); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//-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; }); |
Komentare jsou primo v kodu a tak neni potreba to nejak vice komentovat, kdyz uvidite html pochopite vse:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div data-ng-app="geoPublicGpxTracksTable" data-ng-controller="mainController"> <input id="hfPublicGpxTracks" type="hidden" /> <input id="hfIdUser" name="hfIdUser" type="hidden" data-ng-model="userId" /> <div class="naStred" style="text-align: center;"> <div> Hledat v nazvu souboru: <div class="input-control text"><input type="text" placeholder="Nazev nebo misto" data-ng-model="searchFnwoe" /></div> </div> <table class="naStred" border="1"> <thead style="color: white; background-color: black;"> <tr> <td>Poradi</td> <td><a href="#" data-ng-click="sortType = 'date'; sortReverse = !sortReverse"> Datum</a></td> <td><a href="#" data-ng-click="sortType = 'firstSegment'; sortReverse = !sortReverse"> Prvni segment </a></td> <td><a href="#" data-ng-click="sortType = 'lastSegment'; sortReverse = !sortReverse"> Posledni segment </a></td> <td><a href="#" data-ng-click="sortType = 'countSegment'; sortReverse = !sortReverse"> Pocet segmentu </a></td> <td><a href="#" data-ng-click="sortType = 'time'; sortReverse = !sortReverse"> Celkovy cas </a></td> <td><a href="#" data-ng-click="sortType = 'lowestPoint'; sortReverse = !sortReverse"> Nejnizsi bod </a></td> <td><a href="#" data-ng-click="sortType = 'highestPoint'; sortReverse = !sortReverse"> Nejvyssi bod </a></td> <td><a href="#" data-ng-click="sortType = 'km'; sortReverse = !sortReverse"> Nachozeno </a></td> <td><a href="#" data-ng-click="sortType = 'averageSpeed'; sortReverse = !sortReverse"> Prumerna rychlost </a></td> <td><a href="#" data-ng-click="sortType = 'fnwoe'; sortReverse = !sortReverse"> Nazev souboru </a></td> </tr> </thead> <tbody> <tr data-ng-repeat="track in tracks | orderBy:sortType:sortReverse | filter:searchFnwoe"> <td><a href="http://www.for-you-the.best/GeoCaching/ShowGpxTrack.aspx?code={{track.code}}&idUser={{userId}}">{{$index 1}}</a></td> <td>{{ track.date | date:'yyyy-MM-dd' }}</td> <td>{{ track.firstSegment | date:'HH:mm:ss' }}</td> <td>{{ track.lastSegment | date:'HH:mm:ss' }}</td> <td>{{ track.countSegment }}</td> <td>{{ track.time | date:'HH:mm:ss' }}</td> <td>{{ track.lowestPoint }} mnm</td> <td>{{ track.highestPoint }} mnm</td> <td>{{ track.km }} km</td> <td>{{ track.averageSpeed }} m/s</td> <td>{{ track.fnwoe }}</td> </tr> </tbody> </table> </div> </div> |
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.