AngularJS AJAX

AJAX je krátká forma asynchronního JavaSkript a XML. AJAX byl primárně navržen pro aktualizaci částí webové stránky bez opětovného načítání celé stránky.

Důvodem návrhu této technologie bylo snížení počtu okružních cest mezi klientem a serverem a počtu obnovení celé stránky, ke kterému docházelo vždy, když uživatel požadoval určité informace.

AJAX umožňoval asynchronní aktualizaci webových stránek výměnou malého množství dat se serverem v zákulisí. To znamenalo, že bylo možné aktualizovat části webové stránky, aniž by bylo nutné znovu načítat celou stránku.

Mnoho moderních webových aplikací ve skutečnosti používá tuto techniku pro obnovení stránky nebo získávání dat ze serveru.

Interakce na vysoké úrovni se servery pomocí $resource

Angular poskytuje dvě různá rozhraní API pro zpracování požadavků Ajax. Oni jsou

$zdroj
$http

Podíváme se na vlastnost „$resource“ v Angular, která se používá k interakci se servery na vysoké úrovni.

Když mluvíme o interakci na vyšší úrovni, znamená to, že nás bude trápit pouze to, co server nabízí ohledně funkčnosti, a nikoli to, co přesně server s ohledem na tuto funkcionalitu dělá.

Pokud například server hostoval aplikaci, která uchovává informace o zaměstnancích určité společnosti, server by mohl zpřístupnit funkce klientům, jako jsou GetEmployeeDetails, SetEmployeeDetails atd.

Na vysoké úrovni tedy víme, co tyto dvě funkce dokážou, a můžeme je vyvolat pomocí vlastnosti $resource. Pak ale nevíme přesně podrobnosti o funkcích „GetEmployeeDetails“ a „SetEmployeeDetails“ a jak jsou implementovány.

Výše uvedené vysvětlení vysvětluje to, co je známé jako architektura založená na REST.

REST je známý jako Representational State Transfer, což je architektura používaná v mnoha moderních webových systémech.
To znamená, že pro práci s webovou aplikací můžete použít normální HTTP slovesa GET, POST, PUT a DELETE.

Předpokládejme tedy, že máme webovou aplikaci, která udržuje seznam Události.

Pokud bychom se chtěli dostat na seznam všech událostí,

Webová aplikace může vystavit URL jako např http://example/events si
Můžeme použít sloveso „GET“ k získání celého seznamu událostí, pokud aplikace sleduje architekturu založenou na REST.

Pokud tedy například existovala událost s ID 1, můžeme získat podrobnosti o této události prostřednictvím adresy URL. http://example/events/1

Co je objekt $resource

Objekt $resource v Angular pomáhá při práci se servery, které obsluhují aplikace na architektuře založené na REST.

Základní syntaxe příkazu @resource spolu s různými funkcemi jsou uvedeny níže

Syntaxe příkazu @resource

var resource Object = $resource(url);

Jakmile budete mít resourceObject po ruce, můžete použít níže uvedené funkce k provedení požadovaných REST volání.

1. get([params], [success], [error]) – Toto lze použít k provedení standardního volání GET.

2. save([params], postData, [success], [error]) – Toto lze použít k provedení standardního volání POST.

3. query([params], [success], [error]) – Toto lze použít k provedení standardního volání GET, ale jako součást odpovědi je vráceno pole.

4. remove([params], postData, [success], [error]) – Toto lze použít k provedení standardního volání DELETE.

Ve všech funkcích uvedených níže lze parametr 'params' použít k poskytnutí požadovaných parametrů, které je třeba předat v URL.

Například,

Předpokládejme, že předáte hodnotu Topic: 'Angular' jako 'param' ve funkci get jako
dostat('http://example/events' ,'{ Topic: 'Angular' }')
URL http://example/events?Topic=Angular se vyvolá jako součást funkce get.

Jak používat vlastnost $resource AngularJS

Chcete-li použít vlastnost $resource, je třeba provést následující kroky:

Krok 1) Soubor „angular-resource.js“ je třeba stáhnout z webu Angular.JS a umístit jej do aplikace.

Krok 2) Aplikační modul by měl deklarovat závislost na modulu „ngResource“, aby mohl používat $resource.

V následujícím příkladu voláme modul „ngResource“ z naší aplikace „DemoApp“.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Krok 3) Volání funkce $resource() s vaším koncovým bodem REST, jak je znázorněno v následujícím příkladu.

Pokud to uděláte, pak objekt $resource bude mít schopnost vyvolat potřebnou funkčnost vystavenou koncovými body REST.

Následující příklad volá adresu URL koncového bodu: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

Ve výše uvedeném příkladu se provádějí následující věci

Při definování aplikace Angular se služba vytváří pomocí příkazu 'DemoApp.services', kde DemoApp je název dané naší aplikaci Angular.
K vytvoření podrobností o této nové službě se používá metoda .factory.
'Vstup' je název, který dáváme naší službě, což může být jakýkoli název, který chcete uvést.
V této službě vytváříme funkci, která bude volat $resource API
$resource('/example/Event/:1). Funkce $resource je služba, která se používá k volání koncového bodu REST. Koncový bod REST je obvykle URL. Ve výše uvedené funkci používáme URL (/example /Event/:1) jako náš koncový bod REST. Náš koncový bod REST(/example /Event/:1) označuje, že na našem hlavním webu „příklad“ je umístěna aplikace Event. Tato aplikace událostí je vyvinuta pomocí architektury založené na REST.
Výsledkem volání funkce je objekt třídy prostředku. Objekt prostředku bude mít nyní funkce ( get() , query() , save() , remove(), delete() ), které lze vyvolat.

Krok 4) Nyní můžeme použít metody, které byly vráceny ve výše uvedeném kroku (což jsou get() , query() , save() , remove(), delete()) v našem kontroléru.

V níže uvedeném úryvku kódu jako příklad používáme funkci get().

Podívejme se na kód, který může využívat funkci get().

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

Ve výše uvedeném kroku

Funkce get() ve výše uvedeném úryvku vydá požadavek GET na / example /Event/:1.
Parametr:1 v URL je nahrazen $scope.id.
Funkce get() vrátí prázdný objekt, který se automaticky vyplní, když skutečná data přijdou ze serveru.
Druhý argument pro get() je zpětné volání, které se provede, když data dorazí ze serveru. Možným výstupem celého kódu by byl objekt JSON, který by vrátil seznam událostí vystavených z „ukázkové“ webové stránky. Příklad toho, co lze vrátit, je uveden níže
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Nízkoúrovňové interakce se serverem s $http

$http je další služba Angular JS, která se používá ke čtení dat ze vzdálených serverů. Nejoblíbenější formou dat načítaných ze serverů jsou data ve formátu JSON.

Předpokládejme, že máme a PHP strana ( http://example/angular/getTopics.PHP ), který vrací následující data JSON

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Podívejme se na kód AngularJS pomocí $http, který lze použít k získání výše uvedených dat ze serveru

<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>

Ve výše uvedeném příkladu

Do naší funkce Controller přidáváme službu $http, abychom mohli používat funkci „get“ služby $http.
Nyní používáme funkci get ze služby HTTP k získání objektů JSON z adresy URL http://example /angular/getTopics.PHP
Na základě objektu 'response' vytváříme callback funkci, která vrátí datové záznamy a následně je ukládáme do objektu $scope.
Poté můžeme použít proměnnou $scope.names z ovladače a použít ji v našem pohledu k odpovídajícímu zobrazení objektů JSON.

Jak načíst data z SQL a MySQL Server využívající AngularJS

Angular lze také použít k načítání dat ze spuštěného serveru MySQL nebo SQL.

Myšlenka je taková, že pokud máte stránku PHP připojující se k a MySQL databáze nebo an asp.net stránku připojení k MS SQL databáze serveru, pak musíte zajistit, aby stránka PHP i stránka ASP.Net vykreslovala data ve formátu JSON.

Následuje postup krok za krokem, jak načíst data z SQL a MySQL Server využívající AngularJS.

Předpokládejme, že máme stránky PHP (http://example /angular/getTopics.PHP) poskytování dat z obou a MySQL nebo SQL databáze.

Krok 1) Vezměte data z a MySQL databáze
Prvním krokem je zajistit, aby stránka PHP přebírala data z a MySQL databázi a obsluhuje data ve formátu JSON.

Krok 2) Získejte data JSON pomocí služby $http
Napište podobný kód zobrazený výše a použijte službu $http k získání dat JSON.

Podívejme se na kód AngularJS pomocí $http, který lze použít k získání výše uvedených dat ze serveru

<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>

Krok 3) Vykreslete data ve vašem zobrazení pomocí direktiva ng-repeat

Níže používáme direktivu ng-repeat k procházení každého z párů klíč-hodnota v objektech JSON vrácených metodou „get“ služby $http.

Pro každý objekt JSON zobrazujeme klíč, který je „Název“ a hodnota je „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>

Shrnutí

Plná forma AJAX je asynchronní JavaScénář a XML.
Podívali jsme se na to, co a KLIDNÝ architektura je, což není nic jiného než funkcionalita vystavená webovými aplikacemi na základě běžných HTTP sloves GET, POST, PUT a DELETE.
Objekt $resource se používá s Angular k interakci s webovými aplikacemi RESTFUL na vysoké úrovni, což znamená, že vyvoláváme pouze funkcionalitu vystavenou webovou aplikací, ale nezatěžujeme se tím, jak je funkce implementována.
Podívali jsme se také na službu $http, kterou lze použít k získání dat z webové aplikace. To je možné, protože služba $http může pracovat s webovými aplikacemi na podrobnější úrovni.
Vzhledem k výkonu služby $http to lze použít k získání dat z a MySQL nebo MS SQL Server prostřednictvím aplikace PHP. Data lze poté vykreslit v tabulce pomocí direktivy ng-repeat.

Máš rád: