SPA käyttäen AngularJS: ää



Tämä blogikirjoitus on lyhyt esittely kylpylän rakentamisesta AngularJS: n avulla. Se yrittää asentaa sinut tarvittavilla tiedoilla, jotta SPA-komponentit voidaan sisällyttää sovelluksiin.

Nykyään AngularJS: stä on tullut yksi suosituimmista kehyskehyksistä ensisijaisesti siksi, että sillä on kyky auttaa kehittäjiä luomaan helposti yhden sivun sovelluksia. Perinteisissä verkkosovelluksissa asiakas (selain) aloittaa viestintäkanavan palvelimen kanssa pyytämällä sivua. Palvelin vastaa käsittelemällä pyynnön ja lähettämällä sivun HTML-koodin takaisin asiakkaalle. Jos käyttäjä pyytää uutta sivua, palvelin lähettää toisen HTML-sivun. Vaikka asiakas pyytää pientä muutosta, sanotaan perustiedot sisältävä lomake, palvelimen on ladattava koko sivu uudelleen ja lähetettävä takaisin asiakkaalle.

HTML- ja Ajax-pyynnöt

Yhden sivun sovelluksissa koko sivu ladataan yhdeksi otokseksi, ja palvelin suorittaa seuraavan viestinnän Ajax-pyyntöjen avulla. Selaimen on päivitettävä vain muuttunut sivun osa, eikä koko sivua tarvitse ladata joka kerta, kun käyttäjä tekee uuden pyynnön.
Koska SPA-lähestymistapa vähentää palvelimen vastausta käyttäjän pyyntöihin, web-sovellukset toimivat nopeammin, käyttävät vähemmän laskentatehoa ja antavat käyttöliittymäkehittäjille mahdollisuuden luoda houkuttelevampia ja ketterämpiä verkkosivuja.





Shell-sivujen luominen

SPA: n ”yksi sivu” viittaa kuorisivuun, joka vastaa kyselyihin HTML-, CSS- tai JavaScript-muodossa. Kuorisivu renderoidaan asynkronisesti HTML: n kanssa, jolloin ei tarvitse edestakaisin matkustaa palvelimelle. Kuorisivu tarvitsee vain viittauksen AngularJS-JavaScript-kirjastoon ja ng-view-direktiiviin (virtuaalinen säilö, jonka avulla käyttöliittymän kehittäjät voivat vaihtaa näkymien välillä) kertoa AngularJS: lle, missä sisältösivut on renderöitävä kuorisivulla.
Samalla yhden sivun sisällä AngularJS antaa kehittäjille mahdollisuuden tarjota useita näkymiä samaan URL-osoitteeseen. Eri näkymäsarjat voivat näkyä yksi toisensa jälkeen samalla kuorisivulla, ja kukin näkymä latautuu dynaamisesti, kun käyttäjä vierittää sivua.

SPA-using-AngularJS-multiple-views



Sisäänrakennettu AngularJS-direktiivi - ng-app - antaa kehittäjille mahdollisuuden alustaa sovellus ja mahdollisuus lisätä myös kolmansien osapuolten direktiivejä. Toisaalta ng-mallidirektiivin avulla voit lisätä dataa sitovia lausekkeita muistiin. Katso täältä:

miten tehdä tietokantatestaus

Maailmanlaajuisesti kehittäjät ovat ottaneet käyttöön SPA: n AngularJS: n avulla, ja todennäköisesti tämän trendin odotetaan kestävän jonkin aikaa.



Onko sinulla kysymys meille? Mainitse se kommenttiosassa ja palaamme sinuun.

Aiheeseen liittyvät julkaisut: Onnistunut Web-kehitystyö AngularJS: n kanssa