SPA pomoću AngularJS



Ovaj post na blogu kratki je uvod u izgradnju SPA-a pomoću AngularJS-a. Pokušava vas naoružati informacijama potrebnim za ugradnju SPA komponenata u aplikacije.

Danas je AngularJS postao jedan od najpopularnijih razvojnih okvira ponajprije zbog svoje sposobnosti da programerima pomogne s lakoćom stvoriti aplikacije s jednom stranicom (SPA). U tradicionalnim web aplikacijama klijent (preglednik) započinje komunikacijski kanal s poslužiteljem zahtijevajući stranicu. Poslužitelj odgovara obrađivanjem zahtjeva i slanjem HTML-a stranice natrag klijentu. Ako korisnik zatraži novu stranicu, poslužitelj šalje drugu HTML stranicu. Čak i ako klijent zatraži malu promjenu, recimo obrazac s osnovnim pojedinostima, poslužitelj mora ponovo učitati cijelu stranicu i poslati je natrag klijentu.

HTML i Ajax zahtjevi

U aplikacijama s jednom stranicom čitava se stranica učitava u jednom kadru, a naknadnu komunikaciju vrši poslužitelj pomoću Ajax zahtjeva. Preglednik mora ažurirati samo dio stranice koji se promijenio i nema potrebe za ponovnim učitavanjem cijele stranice svaki put kada korisnik podnese novi zahtjev.
Budući da SPA pristup smanjuje vrijeme koje poslužitelju treba za odgovor na korisničke zahtjeve, web aplikacije rade brže, troše manje računske snage i dopuštaju programerima korisničkog sučelja (UI) da stvaraju atraktivnije, agilnije web stranice.





Izrada stranica školjke

'Jedna stranica' u SPA-u odnosi se na školjku koja odgovara na upite u obliku HTML-a, CSS-a ili JavaScript-a. Stranica ljuske asinkrono se prikazuje s HTML-om, eliminirajući potrebu za putovanjem prema naprijed i nazad na poslužitelj. Stranica ljuske treba samo referencu na JavaScript knjižnicu AngularJS i direktivu ng-view (virtualni spremnik koji programerima korisničkog sučelja omogućuje prebacivanje između pogleda) kako bi AngularJS rekli gdje stranice sa sadržajem trebaju biti prikazane na stranici ljuske.
Unutar iste ‘jednostruke’ stranice, AngularJS omogućuje programerima pružanje više prikaza sadržanih unutar istog URL-a. Mogu se pojaviti različiti skupovi prikaza - jedan za drugim - na istoj stranici ljuske, a svaki se prikaz dinamički učitava kada i kada korisnik pomiče stranicu.

SPA-using-AngularJS-multiple-views



Ugrađena AngularJS direktiva - ng-app - omogućuje programerima inicijalizaciju aplikacije, uz mogućnost dodavanja direktiva trećih strana. S druge strane, direktiva o ng modelu omogućuje vam dodavanje izraza koji vežu podatke u memoriju. Pogledajte ovdje:

raščlaniti xml datoteku u javi

Globalno, programeri su usvojili SPA koristeći AngularJS i po svemu sudeći, očekuje se da će ovaj trend potrajati neko vrijeme.



Imate pitanje za nas? Molimo spomenite to u odjeljku za komentare i javit ćemo vam se.

Vezane objave: Uspješna karijera web razvoja s AngularJS-om