SPA pomocou AngularJS

V súčasnosti sa AngularJS stal jedným z najpopulárnejších vývojových rámcov predovšetkým kvôli svojej schopnosti pomáhať vývojárom s ľahkosťou pri vytváraní Single Page Applications (SPA). V tradičných webových aplikáciách klient (prehľadávač) inicializuje komunikačný kanál so serverom vyžiadaním stránky. Server odpovie spracovaním požiadavky a odoslaním kódu HTML stránky späť klientovi. Ak užívateľ požiada o novú stránku, server odošle ďalšiu stránku HTML. Aj keď klient požiada o malú zmenu, povedzme formulár so základnými údajmi, musí server znova načítať celú stránku a odoslať ju späť klientovi.

Žiadosti HTML a Ajax

V jednostránkových aplikáciách sa celá stránka načíta naraz a následnú komunikáciu vykonáva server pomocou požiadaviek Ajaxu. Prehliadač musí aktualizovať iba časť stránky, ktorá sa zmenila, a nie je potrebné znova načítať celú stránku zakaždým, keď používateľ zadá novú požiadavku.
Pretože prístup SPA skracuje čas, ktorý server potrebuje na odpoveď na požiadavky používateľov, webové aplikácie bežia rýchlejšie, využívajú menej výpočtového výkonu a umožňujú vývojárom používateľského rozhrania (UI) vytvárať atraktívnejšie a svižnejšie webové stránky.

Tvorba stránok Shell

„Jedna stránka“ v SPA označuje stránku shellu, ktorá reaguje na dotazy vo forme HTML, CSS alebo JavaScript. Stránka shellu je asynchrónne vykreslená pomocou kódu HTML, čo eliminuje potrebu cestovania tam a späť na server. Stránka shell potrebuje iba odkaz na knižnicu AngularJS JavaScript a smernicu ng-view (virtuálny kontajner, ktorý umožňuje vývojárom používateľského rozhrania prepínať medzi zobrazeniami), aby informovali AngularJS, kde je potrebné vykresliť stránky s obsahom na stránke shellu.
Na tej istej „jednej“ stránke umožňuje AngularJS vývojárom poskytovať viac zobrazení obsiahnutých v tej istej adrese URL. Na tej istej stránke shellu sa môžu zobrazovať rôzne sady zobrazení - jeden po druhom - a každé zobrazenie sa dynamicky načítava, keď používateľ prechádza stránkou.

Vstavaná smernica AngularJS - ng-app - umožňuje vývojárom inicializovať aplikáciu s možnosťou pridať aj smernice tretích strán. Smernica o modeli ng na druhej strane umožňuje pridávať výrazy viazania údajov do pamäte. Pozrite sa tu:

deklaruje pole objektov v jave

Globálne vývojári prijali SPA pomocou AngularJS a je pravdepodobné, že tento trend ešte chvíľu potrvá.

Máte na nás otázku? Uveďte to prosím v sekcii komentárov a my sa vám ozveme.