Az AJAX az aszinkron JavaScript és az XML rövid formája. Az AJAX-ot elsősorban egy weboldal részének frissítésére tervezték, az egész oldal újratöltése nélkül.
Ennek a technológiának a megtervezése az volt, hogy csökkentette az ügyfél és a szerver között megtett kétirányú utak számát, valamint a teljes oldalfrissítés számát, amelyre akkor került sor, amikor a felhasználónak bizonyos információkra volt szüksége.
Az AJAX lehetővé tette a weboldalak aszinkron frissítését azáltal, hogy kis mennyiségű adatot cserélt a szerverrel a kulisszák mögé. Ez azt jelentette, hogy a weboldal egyes részeit frissíteni lehetett, az egész oldal újratöltése nélkül.
Számos mai webes alkalmazás valóban ezt a technikát követi az oldal frissítéséhez vagy az adatok kiszolgálótól való megszerzéséhez.
Ebben az oktatóanyagban megtanulja-
- Magas szintű interakciók a $ erőforrást használó szerverekkel
- Alacsony szintű szerver-interakciók a $ http-lel
- Adatok lekérése egy SQL és MySQL futtató szerverről
Magas szintű interakciók a $ erőforrást használó szerverekkel
Az Angular két különböző API-t biztosít az Ajax kérések kezelésére. Ők
- $ erőforrás
- $ http
Megnézzük az "$ resource" tulajdonságot az Angularban, amelyet a szerverekkel való magas szintű interakcióra használnak.
Ha magasabb szintű interakcióról beszélünk, az azt jelenti, hogy csak az fog minket zavarni, amit a szerver kínál a funkcionalitás tekintetében, és nem az, hogy pontosan mit csinál a szerver részletesen ennek a funkciónak a vonatkozásában.
Például, ha a kiszolgáló olyan alkalmazást tárolt, amely egy adott vállalat munkavállalói adatait tárolja, a kiszolgáló olyan funkciókat tárhat az ügyfelek elé, mint például a GetEmployeeDetails, a SetEmployeeDetails stb.
Tehát magas szinten tudjuk, hogy ez a két funkció mire képes, és meghívhatjuk őket a $ resource tulajdonság segítségével. De akkor nem tudjuk pontosan a "GetEmployeeDetails" és a "SetEmployeeDetails függvények" részleteit, valamint azok végrehajtásának módját.
A fenti magyarázat elmagyarázza az úgynevezett REST alapú architektúrát.
- A REST reprezentatív állapotátvitel néven ismert, amelyet sok modern webalapú rendszer követ.
- Ez azt jelenti, hogy a GET, POST, PUT és DELETE szokásos HTTP igéket használhatja egy webalapú alkalmazással való együttműködésre.
Tehát tegyük fel, hogy van egy webes alkalmazásunk, amely az Események listáját tartja fenn.
Ha el akarunk jutni az összes esemény listájára,
- A webalkalmazás feltárhat egy URL-t, például http: // example / events és
- A "GET" igével megkaphatjuk az események teljes listáját, ha az alkalmazás REST alapú architektúrát követ.
Tehát például, ha volt egy esemény, amelynek azonosítója 1, akkor az URL-en keresztül megismerhetjük az esemény részleteit. http: // példa / események / 1
Mi a $ erőforrás objektum
Az Angular $ resource objektum segít a kiszolgálókkal való munkában, amelyek REST alapú architektúrán szolgálják ki az alkalmazásokat.
A @resource utasítás alapszintaktikáját és a különféle funkciókat az alábbiakban adjuk meg
A @resource utasítás szintaxisa
var resource Object = $resource(url);
Ha kéznél van az resourceObject, az alábbi függvényekkel megteheti a szükséges REST hívásokat.
1. get ([paraméterek], [siker], [hiba]) - Ezzel fel lehet használni a szokásos GET hívást.
2. mentés ([paraméterek], postData, [siker], [hiba]) - Ezzel fel lehet használni a szokásos POST hívást.
3. lekérdezés ([paraméterek], [siker], [hiba]) - Ezzel fel lehet használni a szokásos GET hívást, de egy tömböt adunk vissza a válasz részeként.
4. eltávolítás ([paraméterek], postData, [siker], [hiba]) - Ezzel fel lehet használni a szokásos DELETE hívást.
Az alábbiakban megadott összes funkcióban a 'params' paraméter használható a szükséges paraméterek megadására, amelyeket át kell adni az URL-ben.
Például,
- Tegyük fel, hogy átadta a Topic: 'Angular' értékét param -ként a get függvényben as
- get (' http: // példa / események ', '{Téma:' Szögletes '}')
- Az URL : http: // example / events? Topic = Szögletes lesz meghívva a get függvény részeként.
A $ resource tulajdonság használata
A $ resource tulajdonság használatához a következő lépéseket kell végrehajtani:
1. lépés: Az "angular-resource.js" fájlt le kell tölteni az Angular.JS webhelyről, és az alkalmazásban kell elhelyeznie.
2. lépés: Az alkalmazás modulnak deklarálnia kell az "ngResource" modultól való függőséget az $ erőforrás használata érdekében.
A következő példában az "ngResource" modult hívjuk meg a "DemoApp" alkalmazásunkból.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
3. lépés: Hívja meg az $ resource () függvényt a REST végpontjával a következő példában látható módon.
Ha ezt megteszi, akkor a $ resource objektum képes lesz meghívni a REST végpontok által kitett szükséges funkciókat.
A következő példa a végpont URL-jét hívja meg: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
A fenti példában a következő dolgokat hajtjuk végre
-
Az Angular alkalmazás definiálásakor egy szolgáltatás létrehozása a „DemoApp.services” utasítás használatával történik, ahol a DemoApp az Angular alkalmazásunk neve.
-
A .factory módszerrel hozzák létre az új szolgáltatás részleteit.
-
A „bejegyzés” az a név, amelyet szolgáltatásunknak adunk, amely bármilyen név lehet, amelyet meg akar adni.
-
Ebben a szolgáltatásban létrehozunk egy függvényt, amely meghívja a $ resource API-t
-
$ erőforrás ('/ példa / Esemény /: 1).
A $ resource függvény egy szolgáltatás, amelyet a REST végpont meghívására használnak. A REST végpont általában URL. A fenti függvényben az URL-t (/ example / Event /: 1) használjuk REST végpontként. A REST végpontunk (/ példa / Esemény /: 1) azt jelzi, hogy a fő webhelyünkön egy "Esemény" alkalmazás ül. Ezt az esemény alkalmazást egy REST alapú architektúra használatával fejlesztették ki.
-
A függvényhívás eredménye egy erőforrásosztály objektum. Az erőforrásobjektumnak most megvannak a (get (), query (), save (), remove (), delete ()) függvények, amelyek meghívhatók.
4. lépés) Most már használhatjuk azokat a módszereket, amelyeket a fenti lépésben adtunk vissza (ezek a get (), a query (), a save (), a remove (), a delete ()) a vezérlőnkben.
Az alábbi kódrészletben a get () függvényt használjuk példaként
Nézzük meg azt a kódot, amely felhasználhatja a get () függvényt.
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
A fenti lépésben
- A get () függvény a fenti részletben GET-kérést ad ki a / example / Event /: 1 címre.
- Az URL-ben szereplő 1 paramétert a $ scope.id váltja fel.
- A get () függvény egy üres objektumot ad vissza, amely automatikusan kitöltődik, amikor a tényleges adatok a szerverről érkeznek.
- A get () második argumentuma egy visszahívás, amelyet akkor hajtanak végre, amikor az adatok a szerverről érkeznek. A teljes kód lehetséges kimenete egy JSON objektum lenne, amely visszaadná a "példa" weboldalról kitett események listáját.
Az alábbiakban bemutatunk egy példát arra, hogy mi adható vissza
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Alacsony szintű szerver-interakciók a $ http-lel
A $ http egy másik Angular JS szolgáltatás, amelyet a távoli szerverekről származó adatok beolvasására használnak. A szerverekről olvasott adatok legnépszerűbb formája a JSON formátumú adat.
Tegyük fel, hogy van egy PHP oldalunk ( http: //example/angular/getTopics.PHP ), amely a következő JSON adatokat adja vissza
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Nézzük meg az AngularJS kódot a $ http használatával, amely felhasználható a fenti adatok kiszolgálására
A fenti példában
- Hozzáadjuk a $ http szolgáltatást a Controller funkciónkhoz, hogy használhassuk a $ http szolgáltatás "get" funkcióját.
- Most a HTTP szolgáltatás get funkcióját használjuk a JSON-objektumok lekérésére a http: // példa /angular/getTopics.PHP URL- ből.
- A 'response' objektum alapján létrehozunk egy visszahívási függvényt, amely visszaadja az adatrekordokat, majd ezeket tároljuk a $ scope objektumban.
- Ezután használhatjuk a vezérlő vezérlőjének $ scope.names változóját, és a mi nézetünk szerint felhasználhatjuk a JSON objektumok ennek megfelelő megjelenítésére.
Adatok lekérése egy SQL és MySQL futtató szerverről
Az Angular segítségével MySQL-t vagy SQL-t futtató szerverről is lehet adatokat lekérni.
Az elképzelés az, hogy ha van egy MySQL-adatbázishoz csatlakozó PHP-oldal vagy egy MS SQL-kiszolgáló-adatbázishoz csatlakozó Asp.Net-oldal, akkor biztosítania kell, hogy mind a PHP, mind az ASP.Net oldal JSON formátumban jelenítse meg az adatokat.
Tegyük fel, hogy van egy PHP webhelyünk ( http: // example /angular/getTopics.PHP ), amely MySQL vagy SQL adatbázisból szolgáltat adatokat.
1. lépés: Az első lépés annak biztosítása, hogy a PHP oldal az adatokat egy MySQL adatbázisból vegye és JSON formátumban szolgáltassa.
2. lépés: Írja meg a fent látható hasonló kódot a $ http szolgáltatás használatához a JSON adatok megszerzéséhez.
Nézzük meg az AngularJS kódot a $ http használatával, amely felhasználható a fenti adatok kiszolgálására
3. lépés : Adja meg a nézet adatait az ng-repeat irányelv segítségével.
Az alábbiakban az ng-repeat direktívát használjuk a $ http szolgáltatás "get" metódusával visszaadott JSON objektumok mindegyik kulcsérték párjának áttekintéséhez.
Minden JSON objektumhoz megjelenítjük a "Név" kulcsot, az "Leírás" értéket.
{{x.Név}} {{x.Description}}
Összegzés:
- Megnéztük, mi az a RESTFUL architektúra, ami nem más, mint egy webalkalmazások által a GET, POST, PUT és DELETE szokásos HTTP igék alapján kitett funkció.
- A $ resource objektumot az Angularal együtt használják a RESTFUL webalkalmazásokkal való magas szintű interakcióhoz, ami azt jelenti, hogy csak a webalkalmazás által kitett funkcionalitást hívjuk meg, de nem zavarjuk a funkcionalitás megvalósítását.
- Megnéztük a $ http szolgáltatást is, amely felhasználható adatok beszerzésére egy webalkalmazásból. Ez azért lehetséges, mert a $ http szolgáltatás részletesebben képes működni a webalkalmazásokkal.
- A $ http szolgáltatás ereje miatt ez felhasználható adatok MySQL vagy MS SQL Server-ből történő megszerzésére PHP alkalmazáson keresztül. Az adatokat ezután az ng-repeat direktíva segítségével táblázatban lehet megjeleníteni.