AJAX este forma scurtă a JavaScript și XML asincron. AJAX a fost conceput în principal pentru actualizarea părților unei pagini web, fără a reîncărca întreaga pagină.
Motivul pentru proiectarea acestei tehnologii a fost reducerea numărului de călătorii dus-întors care au fost făcute între client și server și numărul de reîmprospătare a întregii pagini care a avut loc ori de câte ori un utilizator a cerut anumite informații.
AJAX a permis actualizarea asincronă a paginilor web prin schimbul unor cantități mici de date cu serverul din culise. Aceasta însemna că era posibil să actualizați părți ale unei pagini web, fără a reîncărca întreaga pagină.
Multe aplicații web moderne folosesc de fapt această tehnică pentru reîmprospătarea paginii sau obținerea de date de la server.
În acest tutorial, veți învăța-
- Interacțiuni la nivel înalt cu servere care utilizează resurse $
- Interacțiuni de nivel scăzut cu serverul $ $
- Preluarea datelor de pe un server care rulează SQL și MySQL
Interacțiuni la nivel înalt cu servere care utilizează resurse $
Angular oferă două API-uri diferite pentru a gestiona cererile Ajax. Sunt
- $ resursa
- $ http
Ne vom uita la proprietatea „$ resource” din Angular, care este utilizată pentru a interacționa cu servere la un nivel înalt.
Când vorbim despre interacțiunea la un nivel superior, înseamnă că vom fi deranjați doar de ceea ce are de oferit serverul în ceea ce privește funcționalitatea și nu despre ceea ce face serverul în detaliu cu privire la această funcționalitate.
De exemplu, dacă serverul găzduiește o aplicație care menține informațiile despre angajați ale unei anumite companii, serverul ar putea expune funcționalitatea clienților precum GetEmployeeDetails, SetEmployeeDetails etc.
Deci, la un nivel înalt, știm ce pot face aceste două funcții și le putem invoca folosind proprietatea $ resource. Dar apoi nu știm exact detaliile „GetEmployeeDetails” și „SetEmployeeDetails funcții” și cum este implementat.
Explicația de mai sus explică ceea ce este cunoscut ca o arhitectură bazată pe REST.
- REST este cunoscut sub numele de Representational State Transfer, care este o arhitectură urmată de multe sisteme moderne bazate pe web.
- Înseamnă că puteți utiliza verbele HTTP normale GET, POST, PUT și DELETE pentru a lucra cu o aplicație bazată pe web.
Deci, să presupunem că avem o aplicație web care menține o listă de evenimente.
Dacă am fi vrut să ajungem la lista tuturor evenimentelor,
- Aplicația web poate expune o adresă URL, cum ar fi http: // exemplu / evenimente și
- Putem folosi verbul „GET” pentru a obține întreaga listă de evenimente dacă aplicația urmărește o arhitectură bazată pe REST.
De exemplu, dacă a existat un eveniment cu ID-ul 1, atunci putem obține detaliile acestui eveniment prin adresa URL. http: // exemplu / evenimente / 1
Care este obiectul $ resource
Obiectul $ resource din Angular vă ajută să lucrați cu servere care deservesc aplicații pe o arhitectură bazată pe REST.
Sintaxa de bază a instrucțiunii @resource împreună cu diferitele funcții sunt date mai jos
Sintaxa declarației @resource
var resource Object = $resource(url);
După ce aveți la îndemână resourceObject, puteți utiliza funcțiile de mai jos pentru a efectua apelurile REST necesare.
1. get ([params], [success], [error]) - Acesta poate fi folosit pentru a efectua apelul GET standard.
2. save ([params], postData, [success], [error]) - Aceasta poate fi utilizată pentru a efectua apelul POST standard.
3. interogare ([params], [succes], [eroare]) - Aceasta poate fi utilizată pentru a efectua apelul GET standard, dar o matrice este returnată ca parte a răspunsului.
4. remove ([params], postData, [success], [error]) - Aceasta poate fi utilizată pentru a efectua apelul DELETE standard.
În toate funcțiile date mai jos, parametrul „params” poate fi utilizat pentru a furniza parametrii necesari, care trebuie trecuți în URL.
De exemplu,
- Să presupunem că treceți o valoare a Subiectului: „Angular” ca „param” în funcția get ca
- get (' http: // exemplu / evenimente ', '{Subiect:' Angular '}')
- Adresa URL http: // example / events? Topic = Angular este invocată ca parte a funcției get.
Cum se folosește proprietatea $ resource
Pentru a utiliza proprietatea $ resource, trebuie urmați următorii pași:
Pasul 1) Fișierul „angular-resource.js” trebuie descărcat de pe site-ul Angular.JS și trebuie plasat în aplicație.
Pasul 2) Modulul aplicației ar trebui să declare o dependență de modulul "ngResource" pentru a utiliza resursa $.
În exemplul următor, apelăm modulul „ngResource” din aplicația noastră „DemoApp”.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Pasul 3) Apelarea funcției $ resource () cu punctul final REST, așa cum se arată în exemplul următor.
Dacă faceți acest lucru, atunci obiectul $ resource va avea capacitatea de a invoca funcționalitatea necesară expusă de punctele finale REST.
Următorul exemplu apelează adresa URL a punctului final: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
În exemplul de mai sus se fac următoarele lucruri
-
La definirea aplicației Angular, se creează un serviciu utilizând declarația „DemoApp.services” unde DemoApp este numele dat aplicației noastre Angular.
-
Metoda .factory este utilizată pentru a crea detaliile acestui nou serviciu.
-
„Intrare” este numele pe care îl oferim serviciului nostru, care poate fi orice nume pe care doriți să îl furnizați.
-
În acest serviciu, creăm o funcție care va apela $ resource API
-
$ resursă ('/ exemplu / Eveniment /: 1).
Funcția $ resource este un serviciu care este utilizat pentru a apela un punct final REST. Punctul final REST este în mod normal o adresă URL. În funcția de mai sus, folosim URL-ul (/ exemplu / Eveniment /: 1) ca punct final REST. Punctul nostru final REST (/ exemplu / Eveniment /: 1) denotă că există o aplicație pentru eveniment pe site-ul nostru principal „exemplu”. Această aplicație Event este dezvoltată utilizând o arhitectură bazată pe REST.
-
Rezultatul apelului funcțional este un obiect de clasă resursă. Obiectul resursă va avea acum funcțiile (get (), query (), save (), remove (), delete ()) care pot fi invocate.
Pasul 4) Acum putem folosi metodele care au fost returnate în pasul de mai sus (care sunt get (), interogare (), save (), remove (), delete ()) în controlerul nostru.
În fragmentul de cod de mai jos, folosim funcția get () ca exemplu
Să ne uităm la codul care poate folosi funcția 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);});
În pasul de mai sus,
- Funcția get () din fragmentul de mai sus emite o solicitare GET către / example / Event /: 1.
- Parametrul: 1 din adresa URL este înlocuit cu $ scope.id.
- Funcția get () va returna un obiect gol care este completat automat atunci când datele reale provin de la server.
- Al doilea argument pentru a obține () este un callback care se execută atunci când datele sosesc de la server. Posibila ieșire a întregului cod ar fi un obiect JSON care ar returna lista evenimentelor expuse de pe site-ul web „exemplu”.
Un exemplu de ceea ce poate fi returnat este prezentat mai jos
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Interacțiuni de nivel scăzut cu serverul $ $
$ Http este un alt serviciu Angular JS care este utilizat pentru a citi date de pe servere la distanță. Cea mai populară formă de date care este citită de pe servere este datele în format JSON.
Să presupunem că avem o pagină PHP ( http: //example/angular/getTopics.PHP ) care returnează următoarele date JSON
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Să ne uităm la codul AngularJS folosind $ http, care poate fi folosit pentru a obține datele de mai sus de pe server
În exemplul de mai sus
- Adăugăm serviciul $ http la funcția de controler, astfel încât să putem utiliza funcția „obține” a serviciului $ http.
- Acum folosim funcția get din serviciul HTTP pentru a obține obiectele JSON de la adresa URL http: // example /angular/getTopics.PHP
- Pe baza obiectului „răspuns”, creăm o funcție de apel invers care va returna înregistrările de date și ulterior le stocăm în obiectul $ scope.
- Putem apoi folosi variabila $ scope.names din controler și o putem folosi în vizualizarea noastră pentru a afișa obiectele JSON în consecință.
Preluarea datelor de pe un server care rulează SQL și MySQL
Angular poate fi, de asemenea, utilizat pentru a prelua date de pe un server care rulează MySQL sau SQL.
Ideea este că, dacă aveți o pagină PHP care se conectează la o bază de date MySQL sau o pagină Asp.Net care se conectează la o bază de date server SQL, atunci trebuie să vă asigurați că atât pagina PHP, cât și pagina ASP.Net redă datele în format JSON.
Să presupunem că avem un site PHP ( http: // example /angular/getTopics.PHP ) care servește date dintr-o bază de date MySQL sau SQL.
Pasul 1) Primul pas este să vă asigurați că pagina PHP preia datele dintr-o bază de date MySQL și servește datele în format JSON.
Pasul 2) Scrieți codul similar prezentat mai sus pentru a utiliza serviciul $ http pentru a obține datele JSON.
Să ne uităm la codul AngularJS folosind $ http care poate fi folosit pentru a obține datele de mai sus de pe server
Pasul 3) Redați datele din vizualizarea dvs. folosind directiva ng-repeat.
Mai jos utilizăm directiva ng-repeat pentru a parcurge fiecare dintre perechile cheie-valoare din obiectele JSON returnate prin metoda „get” a serviciului $ http.
Pentru fiecare obiect JSON, afișăm cheia care este „Nume”, iar valoarea este „Descriere”.
{{x.Name}} {{x.Description}}
Rezumat:
- Am aruncat o privire asupra a ceea ce este o arhitectură RESTFUL, care nu este altceva decât o funcționalitate expusă de aplicațiile web bazate pe verbele HTTP normale de GET, POST, PUT și DELETE.
- Obiectul $ resource este utilizat cu Angular pentru a interacționa cu aplicațiile web RESTFUL la un nivel ridicat, ceea ce înseamnă că invocăm doar funcționalitatea expusă de aplicația web, dar nu ne deranjăm modul în care funcționalitatea este implementată.
- De asemenea, ne-am uitat la serviciul $ http care poate fi utilizat pentru a obține date dintr-o aplicație web. Acest lucru este posibil deoarece serviciul $ http poate funcționa cu aplicații web la un nivel mai detaliat.
- Datorită puterii serviciului $ http, acesta poate fi utilizat pentru a obține date de la MySQL sau MS SQL Server printr-o aplicație PHP. Datele pot fi apoi redate într-un tabel folosind directiva ng-repeat.