SPA pomocí AngularJS



Tento příspěvek na blogu je krátkým úvodem do budování SPA pomocí AngularJS. Pokouší se vyzbrojit vás informacemi nezbytnými k začlenění komponent SPA do aplikací.

AngularJS se dnes stal jedním z nejpopulárnějších vývojových rámců především díky své schopnosti pomáhat vývojářům s lehkostí při vytváření jednostránkových aplikací (SPA). V tradičních webových aplikacích klient (prohlížeč) iniciuje komunikační kanál se serverem požadováním stránky. Server odpoví zpracováním požadavku a odesláním kódu HTML stránky zpět klientovi. Pokud uživatel požaduje novou stránku, server odešle další stránku HTML. I když klient požádá o malou změnu, řekněme formulář se základními podrobnostmi, musí server znovu načíst celou stránku a odeslat ji zpět klientovi.

Požadavky HTML a Ajax

V aplikacích s jednou stránkou je celá stránka načtena v jednom záběru a následnou komunikaci provádí server pomocí požadavků Ajaxu. Prohlížeč musí aktualizovat pouze část stránky, která se změnila, a není nutné znovu načíst celou stránku pokaždé, když uživatel zadá nový požadavek.
Vzhledem k tomu, že přístup SPA zkracuje čas, který server potřebuje k odpovědi na požadavky uživatelů, běží webové aplikace rychleji, používají méně výpočetního výkonu a umožňují vývojářům uživatelského rozhraní (UI) vytvářet atraktivnější a hbitější webové stránky.





Tvorba stránek Shell

„Jedna stránka“ v SPA označuje stránku prostředí, která odpovídá na dotazy ve formě HTML, CSS nebo JavaScriptu. Stránka shellu je asynchronně vykreslena pomocí HTML, což eliminuje potřebu cestování tam a zpět na server. Stránka prostředí potřebuje pouze odkaz na knihovnu AngularJS JavaScript a směrnici ng-view (virtuální kontejner, který umožňuje vývojářům uživatelského rozhraní přepínat mezi zobrazeními), aby řekla AngularJS, kde je třeba stránky obsahu vykreslit na stránce prostředí.
Na stejné „jediné“ stránce umožňuje AngularJS vývojářům poskytovat více pohledů obsažených na stejné adrese URL. Na stejné stránce prostředí se mohou zobrazovat různé sady pohledů - jeden po druhém - a každý pohled se dynamicky načítá, když uživatel stránku posouvá.

SPA-using-AngularJS-multiple-views



Integrovaná směrnice AngularJS - ng-app - umožňuje vývojářům inicializovat aplikaci s možností přidání také směrnic třetích stran. Směrnice ng-model vám na druhé straně umožňuje přidat výrazy datové vazby do paměti. Podívejte se zde:

co je java bufferedreader

Globálně vývojáři přijali SPA pomocí AngularJS a je pravděpodobné, že tento trend bude nějakou dobu trvat.



Máte na nás dotaz? Uveďte to prosím v sekci komentáře a my se vám ozveme.

Související příspěvky: Úspěšná kariéra při vývoji webu s AngularJS