SPA med AngularJS

Det här blogginlägget är en kort introduktion till att bygga ett SPA med AngularJS. Det försöker beväpna dig med information som är nödvändig för att integrera SPA-komponenter i appar.

Idag har AngularJS blivit en av de mest populära utvecklingsramarna främst på grund av dess förmåga att enkelt hjälpa utvecklare att skapa enstaka sidapplikationer (SPA). I traditionella webbapplikationer initierar klienten (webbläsaren) en kommunikationskanal med servern genom att begära en sida. Servern svarar genom att behandla begäran och skicka sidans HTML-kod tillbaka till klienten. Om användarförfrågan om en ny sida skickar servern en annan HTML-sida. Även om klienten ber om en liten ändring, säg ett formulär med grundläggande detaljer, måste hela sidan laddas igen av servern och skickas tillbaka till klienten.



HTML & Ajax-förfrågningar

I applikationer för enstaka sidor laddas hela sidan i ett skott och efterföljande kommunikation utförs av servern med Ajax-förfrågningar. Webbläsaren behöver endast uppdatera den del av sidan som har ändrats och det finns ingen anledning att ladda om hela sidan varje gång en användare gör en ny begäran.
Eftersom SPA-tillvägagångssättet minskar den tid det tar för servern att svara på användarförfrågningar, kör webbapplikationer snabbare, använder mindre datorkraft och låter UI-utvecklare (User Interface) skapa mer attraktiva, smidiga webbsidor.



Skapande av Shell-sidor

”Enstaka sidan” i SPA hänvisar till en skal-sida som svarar på frågor i form av HTML, CSS eller JavaScript. Skalsidan återges asynkront med HTML, vilket eliminerar behovet av att resa fram och tillbaka till servern. Skalsidan behöver bara en referens till JavaScript-biblioteket AngularJS och ett direktiv om ng-view (en virtuell behållare som tillåter UI-utvecklare att växla mellan vyer) för att berätta för AngularJS var innehållssidorna måste återges på skalssidan.
Inom samma 'enda' sida tillåter AngularJS utvecklare att tillhandahålla flera visningar som finns inom samma URL. Olika uppsättningar av vyer kan visas - en efter en - inom samma skal-sida, och varje vy laddas dynamiskt när och när användaren rullar genom sidan.

SPA-using-AngularJS-multiple-views



Det inbyggda AngularJS-direktivet - ng-app - gör det möjligt för utvecklare att initiera appen med möjlighet att lägga till tredjepartsdirektiv också. Direktivet om ng-modellen låter dig däremot lägga till databindande uttryck i minnet. Ta en titt här:

apache spark vs hadoop mapreduce

Globalt har utvecklare antagit SPA med AngularJS och sannolikt förväntas denna trend vara en stund.



Har du en fråga till oss? Vänligen nämna det i kommentarfältet så återkommer vi till dig.

Relaterade inlägg: Framgångsrik karriär för webbutveckling med AngularJS