ObrázokSPA = Single Page Application začínajú byť čím ďalej populárnejšie. SPA tiež znamená, že sa zo server-side (napr. z PHP) presúva kód na client-side (do JavaScriptu). Ak už máte väčšie množstvo kódu, čo pre SPA už nie je nič mimoriadne, tak potrebujete systém ako ho pri zmenách a ďalšom rozrastaní udržať spravovateľný. To, čo potrebujete, je vybrať si architektúru a ešte lepšie použiť knižnicu, ktorá vám ju umožní jednoducho implementovať. AngularJS je jednou z takýchto knižníc MVC vzoru pre JavaScript.

AngularJS je JavaScriptová (JS) knižnica, ktorá je vyvíjaná a udržiavaná niekoľkými zamestnancami Googlu. Je to skôr framework ako knižnica, keďže vaša aplikácia je do nej zasadená v tom zmysle, že vy doplníte správne kúsky (s business logikou) svojho kódu, ktorý je obklopený kódom AngularJS, pričom sa ten stará o to, aby to celé držalo po kope a fungovalo (je to moje osobné rozlišovanie medzi knižnicami a frameworkami 🙂 ). Na pochopenie AngularJS musíte rozumieť MVC vzoru. MVC je skratka od Model-View-Controller a je to vzor, ktorý núti programátora rozdeliť kód do menších celkov podľa oblastí, ktoré v aplikácii existujú:

Model – drží štruktúru údajov a umožňuje nimi manipulovať

Controller – riadi manipulovanie údajov, ako aj ich transformáciu pred tým, než sú zobrazené cez View

View – stará sa o zobrazenie údajov

Podobne aj AngularJS obsahuje tzv. Šablóny (Templates), ktoré predstavujú View, triedy Kontrolerov (Controllers) a tzv. Scope, ktorý je objekt reprezentujúci model. Okrem toho stoja za zmienku ešte Služby (Services), Direktívy (Directives) a Filtre (Filters). Ale poďme pekne po poriadku.

Úplne základnou dvojicou vo frameworku je šablóna a jej kontrolér (kontrolér nie je veľmi spisovné slovo, ale v kontexte programovania celkom intuitívne, preto ho budem používať). Šablóna je vlastne html stránka, ktorá v sebe obsahuje špeciálne značky začínajúce na „ng-“. Kontrolér je potom JS trieda, ktorej prislúcha riadiť toto zobrazenie údajov a interakciu používateľa so šabnou. Tieto dva objekty sú prepojené cez scope objekt (označuje sa tiež s dolárom na začiatku – teda $scope). Tento objekt si viete predstaviť ako dátový objekt, ktorý je zdieľaný medzi view a kontrolérom (scopov v skutočnosti môže byť viac, ale pre jednoduchosť zostaňme teraz pri jednom). View teda môže zobrazovať údaje zo scopu, pričom ak dochádza k interakcii (používateľ na niečo klikne), tak akciu prenecháva kontroléru, ktorý vie, čo má robiť (okrem kontroléra môže na interakciu reagovať aj direktíva, ktorá má ale v zásade tiež svoj vlastný kontrolér. Ale o tom neskôr).

Aby to celé fungovalo, musí existovať jedno hlavné-úvodné html (najčastejšie index.html), kde (väčšinou na začiatku) je jedna dôležitá značka ng-app. Práve tá povie Angularu, že toto a ďalšie html sú šablónami, a treba s nimi tak pracovať. Tie súbory sa volajú šablny preto, lebo Angular po tom, čo sa načíta do pamäte prehliadača, vykoná na základe jeho špeciálnych značiek transformáciu html do výslednej podoby. Tá je potom zobrazená prehliadačom.

Takže máme HTML šablóny, ktoré Angular transformuje na normálne HTML, ďalej kontrolér triedy, ktoré oživujú aplikáciu a nakoniec scope objekt, ktorý drží údaje (a tak ich pomáha zdieľať medzi šablónou a kontrolérom). Čo viac? Sú tu služby – services. Tie slúžia na zapuzdrenie nejakej časti logiky, ktorá sa dá potom ľahko zdieľať v kóde. Napríklad komunikácia so serverom. Služba zakrýva túto komunikáciu, a tak kontrolér len volá pripravené metódy služby. A ako sa k nim dostane? No, Angular podporuje Dependency Injection – teda vie nejakému objektu dodaťiné objekty v systéme, na ktorých závisí, a to len na základe toho, že tento objekt deklaruje, čo potrebuje. Inak povedané, ak kontrolér potrebuje použiť nejakú službu, tak len deklaruje, že ju potrebuje a Angular sa postará o to, aby ju dostal a mohol používať. Samotný Angular obsahuje množstvo služieb (v poslednej verzii sa niektoré začali presúvať do samostatných Angular modulov), ale veľmi ľahko sa dá napísať aj vlastná. Okrem MVC je to ďalší z nástrojov, ktorý umožní váš kód udržať DRY (Dont-Repeat-Yourself) a pekne rozdelený do samostatných tried. Jednou z takýchto služieb, ktorú priamo poskytuje Angular je http, pomocou ktorej viete vykonávať dotazy smerom na server.

Okrem toho tu máme direktívy. Spomínate si, ako som hovoril, že HTML šablóna obsahuje špeciálne značky. Tieto značky sú spracovávané tranformačným strojom, ktorý na vstupe dostane HTML šablónu a na výstupe odovzdá HTML súbor pripravený pre prehliadač. Tento transformačný stroj je možné rozširovať tak, aby akceptoval nové značky. A práve o tom sú direktívy. Veľmi zhruba sa dá povedať, že definujú transformačný proces pre HTML šablónu a určitú značku. Dokážu byť ale riadené samostatným kontrolérom a mať svoj scope, a teda fungovať ako malé MVC bloky vložené (a zdieľané) v šablonách.

Za zmienku stoja tiež filtre. Tie zase umožňujú automaticky transformovať údaje pri tom, ako sú zo scopu načítavané do View. Napríklad formátovanie čísel a dátumov podľa nastaveného jazyka. Angular sám o sebe obsahuje množstvo filtrov a ďalšie je možné dopĺňať. Filtre je možné reťaziť v definovanom poradí, takže hodnota sa postupne transformuje a je možné definovať osobitné reťazce filtrov pri čítaní údajov zo scope do View a pri ich zápise z View do scope.

Toto by sa dalo definovať ako stručný úvod do Angularu. To, k čomu som sa ešte nedostal je množstvo podporných modulov, ktoré uľahčujú prácu v rôznej oblasti. Napríklad ngResource umožňuje jednoducho volať sieťové služby typu REST (má ale aj alternatívy ako restangular), alebo Angular-UI, čo je balík rôznych (veľmi užitočných) modulov na písanie jednoduchších a krajších šablón. A tiež väčšina populárnych JavaScript komponentov má tiež svoj Angular wrapper, ktorý ju umožňuje ľahko použiť v Angular svete (wrapper napríklad obsahuje konfiguračnú službu, ktorú viete ľahko získať cez Dependency Injection alebo Angularovské udalosti namiesto klasických DOM udalostí).

AngularJS je jednoznačne framework, ktorý stojí za povšimnutie. Umožní vám totiž udržať aj rozrastajúcu sa aplikáciu v medziach spravovateľnosti a zároven uľahčí programovanie. Núti vás totiž deliť logiku aplikácie (zobrazovaciu, vykonávaciu) presne podľa vzoru MVC a to je smer, ktorým sa dá zájsť s projektom naozaj ďaleko.