AngularJS AJAX

Az AJAX az Asynchronous rövid formája JavaSzkript és XML. Az AJAX-ot elsősorban a weboldal egyes részeinek frissítésére tervezték, a teljes oldal újratöltése nélkül.

A technológia megtervezésének oka az volt, hogy csökkentsék a kliens és a szerver között megtett oda-vissza utak számát, valamint a teljes oldalfrissítések 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 kis mennyiségű adatcserével a színfalak mögötti szerverrel. Ez azt jelentette, hogy a weboldal egyes részeit frissíteni lehetett anélkül, hogy az egész oldalt újra kellett volna tölteni.

Sok modern webalkalmazás ezt a technikát követi az oldal frissítéséhez vagy a szerverről való adatok lekéréséhez.

Magas szintű interakciók a kiszolgálókkal a $ erőforrás használatával

Az Angular két különböző API-t biztosít az Ajax kérések kezelésére. Ők

$forrás
$http

Megvizsgáljuk az Angular „$resource” tulajdonságát, amely a szerverekkel való magas szintű interakcióra szolgál.

Ha magasabb szintű interakcióról beszélünk, az azt jelenti, hogy csak az fog minket zavarni, hogy a szerver mit tud nyújtani a funkcionalitás tekintetében, és nem az, hogy pontosan mit csinál a szerver ezzel a funkcióval kapcsolatban.

Például, ha a kiszolgáló egy olyan alkalmazást üzemeltetett, amely egy bizonyos vállalat munkavállalói adatait karbantartja, a szerver olyan funkciókat tárhat fel az ügyfelek számára, mint a GetEmployeeDetails, SetEmployeeDetails stb.

Tehát magas szinten tudjuk, hogy ez a két függvény mire képes, és a $resource tulajdonság segítségével hívhatjuk meg őket. De akkor még nem ismerjük pontosan a „GetEmployeeDetails” és a „SetEmployeeDetails függvények” részleteit, illetve a megvalósítás módját.

A fenti magyarázat megmagyarázza az úgynevezett REST-alapú architektúrát.

A REST Representational State Transfer néven ismert, amely egy olyan architektúra, amelyet számos modern web-alapú rendszer követ.
Ez azt jelenti, hogy használhatja a normál HTTP igéket: GET, POST, PUT és DELETE egy webalapú alkalmazáshoz.

Tételezzük fel tehát, hogy van egy webalkalmazásunk, amely egy listát karbantart Események.

Ha el akarunk jutni az összes esemény listájához,

A webalkalmazás felfedhet egy URL-t, mint pl http://example/events és a
Használhatjuk a „GET” igét az események teljes listájának lekéréséhez, ha az alkalmazás REST alapú architektúrát követ.

Így például, ha volt egy esemény 1-es azonosítóval, akkor ennek az eseménynek a részleteit az URL-en keresztül kaphatjuk meg. http://example/events/1

Mi az a $resource objektum

Az Angular $resource objektuma segít a REST alapú architektúrán lévő alkalmazásokat kiszolgáló szerverekkel való együttműködésben.

A @resource utasítás alapvető szintaxisa, valamint a különböző függvények az alábbiakban találhatók

A @resource utasítás szintaxisa

var resource Object = $resource(url);

Miután kéznél van a resourceObject, az alábbi függvényekkel indíthatja el a szükséges REST-hívásokat.

1. get([params], [siker], [hiba]) – Ezzel a szabványos GET hívást lehet indítani.

2. save([params], postData, [success], [error]) – Ezzel a szabványos POST hívást lehet végrehajtani.

3. query([paraméterek], [siker], [hiba]) – Ezzel a szabványos GET-hívást lehet indítani, de a válasz részeként egy tömb kerül visszaadásra.

4. remove([params], postData, [success], [error]) – Ezzel a szabványos DELETE hívást lehet végrehajtani.

Az alább megadott összes függvényben 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 átadja a Topic: "Angular" értékét "param"-ként a get függvényben, mint
kap('http://example/events' ,'{ Téma: 'Szögletes' }')
Az URL http://example/events?Topic=Angular a get függvény részeként meghívódik.

Az AngularJS $resource tulajdonság használata

A $resource tulajdonság használatához a következő lépéseket kell végrehajtani:

Step 1) Az „angular-resource.js” fájlt le kell tölteni az Angular.JS webhelyről, és el kell helyezni az alkalmazásban.

Step 2) Az alkalmazásmodulnak deklarálnia kell az „ngResource” modultól való függőséget a $erőforrás használatához.

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

Step 3) A $resource() függvény meghívása a REST végponttal, a következő példában látható módon.

Ha ezt megteszi, akkor a $resource objektum képes lesz a REST végpontok által kiadott szükséges funkciók meghívására.

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ő műveletek zajlanak

Az Angular alkalmazás definiálásakor egy szolgáltatás jön létre a „DemoApp.services” utasítás használatával, ahol a DemoApp az Angular alkalmazásunk neve.
A .factory metódus az új szolgáltatás részleteinek létrehozására szolgál.
Az „Entry” az a név, amelyet szolgáltatásunknak adunk, amely bármilyen név lehet, amelyet megadni szeretne.
Ebben a szolgáltatásban létrehozunk egy függvényt, amely meghívja a $resource API-t
$resource('/example/Event/:1).A $resource függvény egy REST végpont meghívására szolgáló szolgáltatás. A REST végpont általában egy URL. A fenti függvényben az URL-t (/example /Event/:1) használjuk REST végpontként. A REST végpontunk (/example /Event/:1) azt jelzi, hogy van egy eseményalkalmazás a fő webhelyünkön „example”. Ezt az eseményalkalmazást REST-alapú architektúra használatával fejlesztették ki.
A függvényhívás eredménye egy erőforrás osztály objektum. Az erőforrás objektum mostantól a meghívható függvényekkel rendelkezik ( get() , query() , save() , remove(), delete() ).

Step 4) Most már használhatjuk a fenti lépésben visszaadott metódusokat (ezek a get() , query() , save() , remove(), delete() ) a vezérlőnkban.

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 képes használni 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 fenti részletben található get() függvény GET kérést küld a / example /Event/:1 címre.
Az URL-ben szereplő:1 paraméter helyére a $scope.id.
A get() függvény egy üres objektumot ad vissza, amely automatikusan feltöltődik, amikor a tényleges adatok a szervertől származnak.
A get() második argumentuma egy visszahívás, amely akkor fut le, amikor az adatok megérkeznek a szerverről. A teljes kód lehetséges kimenete egy JSON-objektum lenne, amely visszaadná a „példa” webhelyről közzétett események listáját. Alább látható egy példa arra, hogy mit lehet visszaadni.
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Alacsony szintű szerver interakciók a $http-vel

A $http egy másik Angular JS szolgáltatás, amelyet távoli szerverekről származó adatok olvasására használnak. A szerverekről beolvasott adatok legnépszerűbb formája a JSON formátumú adat.

Tegyük fel, hogy van a PHP oldal ( 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, amivel a fenti adatokat lekérhetjük a szerverről

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

A fenti példában

Vezérlő funkciónkhoz hozzáadjuk a $http szolgáltatást, hogy a $http szolgáltatás „get” funkcióját tudjuk használni.
Most a HTTP szolgáltatás get függvényét használjuk a JSON-objektumok URL-ből való lekéréséhez http://example /angular/getTopics.PHP
A 'response' objektum alapján létrehozunk egy visszahívási függvényt, amely visszaadja az adatrekordokat, majd a $scope objektumban tároljuk.
Ezután használhatjuk a $scope.names változót a vezérlőből, és használhatjuk nézetünkben a JSON-objektumok megfelelő megjelenítéséhez.

Hogyan lehet adatokat lekérni SQL-ből és MySQL AngularJS-t használó szerver

Az Angular használható adatok lekérésére is egy futó szerverről MySQL vagy SQL.

Az ötlet az, hogy ha van egy PHP oldala, amely a MySQL adatbázis vagy egy Asp.Net MS-hez csatlakozó oldal SQL szerver adatbázis, akkor gondoskodnia kell arról, hogy a PHP és az ASP.Net oldal is JSON formátumban jelenítse meg az adatokat.

Az alábbiakban lépésről lépésre bemutatjuk, hogyan lehet adatokat lekérni SQL-ből és MySQL AngularJS-t használó szerver.

Tegyük fel, hogy van egy PHP oldalunk (http://example /angular/getTopics.PHP) adatszolgáltatás akár a MySQL vagy SQL adatbázis.

Step 1) Adatok vétele a MySQL adatbázis
Az első lépés annak biztosítása, hogy a PHP oldal az adatokat a MySQL adatbázist, és JSON formátumban szolgálja ki az adatokat.

Step 2) Szerezze be a JSON-adatokat a $http szolgáltatás használatával
Írja be a fent látható hasonló kódot a $http szolgáltatás használatához a JSON adatok lekéréséhez.

Nézzük meg az AngularJS kódot a $http használatával, amellyel a fenti adatok lekérhetők a szerverről

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Step 3) Az adatok megjelenítése a nézetben a ng-repeat direktíva

Az alábbiakban az ng-repeat direktívát használjuk a $http szolgáltatás „get” metódusa által visszaadott JSON-objektumok mindegyik kulcs-érték páron való áthaladására.

Minden JSON-objektumhoz megjelenítjük a kulcsot, amely „Név” és értéke „Description".

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Összegzésként

Az AJAX teljes formája az Asynchronous JavaForgatókönyv és XML.
Megnéztük, mi a NYUGALMAS az architektúra, ami nem más, mint a webalkalmazások által feltárt funkcionalitás, amely a GET, POST, PUT és DELETE normál HTTP igéken alapul.
A $resource objektumot az Angular-ral használják a RESTFUL webalkalmazásokkal való magas szintű interakcióhoz, ami azt jelenti, hogy csak a webalkalmazás által elérhető funkciókat hívjuk meg, de nem foglalkozunk azzal, hogyan valósul meg a funkcionalitás.
Megnéztük a $http szolgáltatást is, amellyel egy webalkalmazásból lehet adatokat szerezni. Ez azért lehetséges, mert a $http szolgáltatás részletesebb szinten tud dolgozni webes alkalmazásokkal.
A $http szolgáltatás ereje miatt ez felhasználható adatok lekérésére a MySQL vagy MS SQL Server PHP alkalmazáson keresztül. Az adatok ezután táblázatban jeleníthetők meg az ng-repeat direktíva segítségével.