SPA az AngularJS használatával



Ez a blogbejegyzés egy rövid bevezető a SPA építéséhez az AngularJS használatával. Megpróbálja megszerezni Önt a SPA-összetevők alkalmazásokba történő beépítéséhez szükséges információkkal.

Ma az AngularJS az egyik legnépszerűbb fejlesztési keretrendszerré vált, elsősorban azért, mert képes segíteni a fejlesztőket az Single Page Applications (SPA) könnyű létrehozásában. A hagyományos webalkalmazásokban az ügyfél (böngésző) egy oldal kérésével kezdeményez kommunikációs csatornát a szerverrel. A szerver a kérés feldolgozásával és az oldal HTML-kódjának visszaküldésével válaszol az ügyfélnek. Ha a felhasználó új oldalt kér, a szerver újabb HTML-oldalt küld. Még akkor is, ha az ügyfél kis változtatást kér, mondjon egy űrlapot, amely tartalmazza az alapvető részleteket, a szervernek újra be kell töltenie a teljes oldalt, és vissza kell küldenie az ügyfélnek.

HTML és Ajax kérések

Az Single Page Applications alkalmazásban a teljes oldal egy képben töltődik be, és a későbbi kommunikációt a szerver végzi az Ajax kérések segítségével. A böngészőnek csak az oldalnak azt a részét kell frissítenie, amely megváltozott, és nincs szükség a teljes oldal újratöltésére minden egyes alkalommal, amikor a felhasználó új kérelmet nyújt be.
Mivel a SPA megközelítés csökkenti a kiszolgáló által a felhasználói kérések megválaszolásához szükséges időt, a webalkalmazások gyorsabban futnak, kevesebb számítási energiát használnak, és lehetővé teszik a felhasználói felület (UI) fejlesztőinek, hogy vonzóbb, mozgékonyabb weboldalakat hozzanak létre.





Shell oldalak létrehozása

A SPA „egyetlen oldala” olyan héjoldalra utal, amely HTML, CSS vagy JavaScript formájában válaszol a lekérdezésekre. A shell oldalt aszinkron módon renderelik a HTML-kel, így nincs szükség oda-vissza utazásra a kiszolgálóhoz. A héjoldalnak csak hivatkozásra van szüksége az AngularJS JavaScript könyvtárra és egy ng-view irányelvre (egy virtuális tárolóra, amely lehetővé teszi a felhasználói felület fejlesztői számára a nézetek közötti váltást), hogy megmondja az AngularJS-nek, hogy a tartalmi oldalakat hol kell megjeleníteni a shell oldalon.
Ugyanazon az „egyetlen” oldalon az AngularJS lehetővé teszi a fejlesztők számára, hogy ugyanazon az URL-en belül több nézetet biztosítsanak. Különböző nézetkészletek jelenhetnek meg egymás után ugyanazon a shell oldalon, és mindegyik nézet dinamikusan betöltődik, amikor a felhasználó végiggörgeti az oldalt.

SPA-using-AngularJS-multiple-views



A beépített AngularJS irányelv - ng-app - lehetővé teszi a fejlesztők számára az alkalmazás inicializálását, lehetőséget adva harmadik féltől származó irányelvek hozzáadására is. Az ng-model direktíva viszont lehetővé teszi, hogy adatot kötő kifejezéseket adjon a memóriába. Vessen egy pillantást ide:

állítsa be a java classpath Windows 7 programot

Világszerte a fejlesztők az AngularJS használatával fogadták el a SPA-t, és minden valószínűség szerint ez a tendencia várhatóan egy ideig tart.



Van egy kérdésünk? Kérjük, említse meg a megjegyzések részben, és kapcsolatba lépünk Önnel.

Kapcsolódó hozzászólások: Sikeres webfejlesztési karrier az AngularJS segítségével