AJAX yra trumpa asinchroninio „JavaScript“ ir XML forma. „AJAX“ pirmiausia buvo skirta atnaujinti tinklalapio dalis, neperkraunant viso puslapio.
Šios technologijos sukūrimo priežastis buvo sumažinti pirmyn ir atgal tarp kliento ir serverio skaičių ir viso puslapio atnaujinimo skaičių, kuris anksčiau vykdavo, kai vartotojui reikėdavo tam tikros informacijos.
AJAX leido tinklalapius atnaujinti asinchroniškai keičiantis nedideliais duomenų kiekiais su serveriu užkulisiuose. Tai reiškė, kad buvo galima atnaujinti tinklalapio dalis, neperkraunant viso puslapio.
Daugelis šių dienų žiniatinklio programų iš tikrųjų taiko šią metodą atnaujindamos puslapį ar gaudamos duomenis iš serverio.
Šioje pamokoje sužinosite
- Aukšto lygio sąveika su serveriais, naudojant $ resursą
- Žemo lygio serverio sąveika su $ http
- Gaunami duomenys iš serverio, kuriame veikia SQL ir MySQL
Aukšto lygio sąveika su serveriais, naudojant $ resursą
„Angular“ teikia dvi skirtingas API, skirtas „Ajax“ užklausoms tvarkyti. Jie yra
- $ resursas
- $ http
Mes pažvelgsime į „$ resource“ ypatybę „Angular“, kuri naudojama sąveikauti su serveriais aukštu lygiu.
Kai kalbame apie bendravimą aukštesniu lygiu, tai reiškia, kad mus jaudins tik tai, ką serveris gali pasiūlyti dėl funkcionalumo, o ne tai, ką tiksliai serveris daro išsamiai kalbėdamas apie šią funkciją.
Pavyzdžiui, jei serveris talpino programą, kurioje saugoma tam tikros įmonės darbuotojų informacija, serveris gali atskleisti tokias funkcijas kaip „GetEmployeeDetails“, „SetEmployeeDetails“ ir kt.
Taigi aukštu lygiu mes žinome, ką šios dvi funkcijos gali padaryti, ir galime jas iškviesti naudodamiesi nuosavybe $ resursas. Bet tada mes tiksliai nežinome „GetEmployeeDetails“ ir „SetEmployeeDetails funkcijų“ detalių ir jų įgyvendinimo.
Pirmiau pateiktame paaiškinime paaiškinama vadinamoji REST architektūra.
- REST yra žinomas kaip „Reprezentacinis valstybės perkėlimas“, kuris yra architektūra, kurios laikomasi daugelyje šiuolaikinių internetinių sistemų.
- Tai reiškia, kad dirbdami su žiniatinklio programa galite naudoti įprastus HTTP veiksmažodžius GET, POST, PUT ir DELETE.
Tarkime, kad turime žiniatinklio programą, kuri tvarko įvykių sąrašą.
Jei norėtume patekti į visų įvykių sąrašą,
- Žiniatinklio programa gali parodyti URL, pvz., Http: // pavyzdys / įvykiai ir
- Mes galime naudoti veiksmažodį „GET“, kad gautume visą įvykių sąrašą, jei programa naudoja REST pagrindu pagrįstą architektūrą.
Pavyzdžiui, jei įvykis buvo su 1 ID, tada išsamią informaciją apie įvykį galime gauti per URL. http: // pavyzdys / įvykiai / 1
Kas yra $ resursų objektas
Kampinis „$ resource“ objektas padeda dirbti su serveriais, kurie aptarnauja programas REST pagrindu.
Pagrindinė „@resource“ sakinio sintaksė kartu su įvairiomis funkcijomis pateikiama žemiau
@Resource sakinio sintaksė
var resource Object = $resource(url);
Kai turėsite „resourceObject“ po ranka, galėsite naudoti toliau nurodytas funkcijas norimiems REST skambučiams atlikti.
1. get ([params], [success], [error]) - tai gali būti naudojama standartiniam GET skambučiui atlikti.
2. išsaugoti ([params], postData, [sėkmė], [klaida]) - tai gali būti naudojama atliekant standartinį POST skambutį.
3. užklausa ([parametrai], [sėkmė], [klaida]) - tai gali būti naudojama standartiniam GET skambučiui atlikti, tačiau masyvas grąžinamas kaip atsakymo dalis.
4. pašalinti ([params], postData, [sėkmė], [klaida]) - tai gali būti naudojama atliekant standartinį DELETE skambutį.
Visose žemiau pateiktose funkcijose parametrą „params“ galima naudoti norint pateikti reikiamus parametrus, kuriuos reikia perduoti URL.
Pavyzdžiui,
- Tarkime, kad jūs perduodate temos reikšmę: „Kampinis“ kaip „param“ gavimo funkcijoje kaip
- gauti (' http: // pavyzdys / įvykiai ', '{tema:' Kampinis '}')
- URL http: // example / events? Topic = Kampinis iškviečiamas kaip funkcijos get dalis.
Kaip naudoti nuosavybę „$ resource“
Norint naudoti nuosavybę „$ resource“, reikia atlikti šiuos veiksmus:
1 žingsnis) Failą „angular-resource.js“ reikia atsisiųsti iš „Angular.JS“ svetainės ir jis turi būti įdėtas į programą.
2 žingsnis . Programos modulis turėtų deklaruoti priklausomybę nuo „ngResource“ modulio, kad būtų naudojamas $ šaltinis.
Šiame pavyzdyje mes vadiname „ngResource“ modulį iš savo programos „DemoApp“.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
3 žingsnis. Iškvieskite funkciją $ resursas () su savo REST galiniu tašku, kaip parodyta šiame pavyzdyje.
Jei tai padarysite, tada „$ resource“ objektas turės galimybę iškviesti reikiamą funkciją, kurią atskleidžia REST galiniai taškai.
Šis pavyzdys iškviečia galutinį URL: http: // example / events / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
Aukščiau pateiktame pavyzdyje atliekami šie dalykai
-
Apibrėžiant „Angular“ programą, paslauga kuriama naudojant teiginį „DemoApp.services“, kur „DemoApp“ yra mūsų „Angular“ programos pavadinimas.
-
Kuriant šios naujos paslaugos detales, naudojamas .factory metodas.
-
„Įėjimas“ yra vardas, kurį suteikiame mūsų paslaugai. Tai gali būti bet koks vardas, kurį norite pateikti.
-
Šioje paslaugoje kuriame funkciją, kuri iškvies $ resursų API
-
$ resursas ('/ example / Event /: 1).
Funkcija $ resursas yra paslauga, naudojama norint iškviesti REST galinį tašką. REST pabaigos taškas paprastai yra URL. Pirmiau pateiktoje funkcijoje mes naudojame URL (/ example / Event /: 1) kaip savo REST galinį tašką. Mūsų REST galinis taškas (/ example / Event /: 1) reiškia, kad mūsų pagrindinėje svetainėje yra „Event“ programa. Ši renginio programa sukurta naudojant REST pagrindu pagrįstą architektūrą.
-
Funkcijos iškvietimo rezultatas yra išteklių klasės objektas. Ištekliaus objektas dabar turės funkcijas (get (), query (), save (), remove (), delete ()), kurias galima iškviesti.
4 žingsnis) Dabar mes galime naudoti metodus, kurie buvo grąžinti per pirmiau nurodytą veiksmą (tai yra get (), query (), save (), remove (), delete ()) mūsų valdiklyje.
Žemiau pateiktame kodo fragmente kaip pavyzdį naudojame funkciją get ()
Pažvelkime į kodą, kuris gali naudoti funkciją 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);});
Atlikdami pirmiau nurodytą veiksmą,
- Ankstesnio fragmento funkcija get () pateikia GET užklausą / example / Event /: 1.
- Parametras: 1 URL pakeičiamas „$ scope.id“.
- Funkcija get () grąžins tuščią objektą, kuris bus užpildytas automatiškai, kai tikrieji duomenys gaunami iš serverio.
- Antrasis argumentas gauti () yra atgalinis skambutis, kuris vykdomas, kai duomenys gaunami iš serverio. Galima viso kodo išvestis būtų JSON objektas, kuris grąžintų įvykių, pateiktų iš „pavyzdžio“ svetainės, sąrašą.
Žemiau pateiktas pavyzdys, ką galima grąžinti
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Žemo lygio serverio sąveika su $ http
$ Http yra dar viena „Angular JS“ paslauga, naudojama duomenims nuskaityti iš nuotolinių serverių. Populiariausia duomenų iš serverių forma yra JSON formato duomenys.
Tarkime, kad turime PHP puslapį ( http: //example/angular/getTopics.PHP ), kuris pateikia šiuos JSON duomenis
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Pažvelkime į „AngularJS“ kodą naudodami $ http, kurį galima naudoti norint gauti aukščiau nurodytus duomenis iš serverio
Aukščiau pateiktame pavyzdyje
- Prie „Controller“ funkcijos pridedame paslaugą $ http, kad galėtume naudoti paslaugos „get“ funkciją.
- Dabar mes naudojame funkciją „get“ iš HTTP paslaugos, kad gautume JSON objektus iš URL : http: // example /angular/getTopics.PHP
- Remdamiesi „response“ objektu, mes kuriame atgalinio ryšio funkciją, kuri grąžins duomenų įrašus, o vėliau juos saugome objekte $ scope.
- Tada galime naudoti valdiklio kintamąjį $ scope.names ir naudoti jį mūsų požiūriu, kad atitinkamai būtų rodomi JSON objektai.
Gaunami duomenys iš serverio, kuriame veikia SQL ir MySQL
„Angular“ taip pat gali būti naudojamas duomenims gauti iš serverio, kuriame veikia „MySQL“ arba „SQL“.
Idėja yra ta, kad jei turite PHP puslapį, jungiantį prie „MySQL“ duomenų bazės, arba „Asp.Net“ puslapį, jungiantį prie MS SQL serverio duomenų bazės, turite užtikrinti, kad tiek PHP, tiek ASP.Net puslapis duomenis pateiktų JSON formatu.
Tarkime, kad mes turime PHP svetainę ( http: // example /angular/getTopics.PHP ), teikiančią duomenis iš „MySQL“ arba „SQL“ duomenų bazės.
1 žingsnis . Pirmiausia reikia užtikrinti, kad PHP puslapis paimtų duomenis iš „MySQL“ duomenų bazės ir pateiktų duomenis JSON formatu.
2 žingsnis. Parašykite panašų kodą, parodytą aukščiau, jei norite naudoti $ http paslaugą JSON duomenims gauti.
Pažvelkime į „AngularJS“ kodą naudodami $ http, kurį galima naudoti norint gauti aukščiau nurodytus duomenis iš serverio
3 žingsnis . Pateikite duomenis savo rodinyje naudodami direktyvą „ng-pakartoti“.
Žemiau mes naudojame „ng-repeat“ direktyvą, kad galėtume pereiti kiekvieną raktų reikšmių porą JSON objektuose, kuriuos grąžino „$ http“ paslaugos „get“ metodas.
Kiekvienam JSON objektui pateikiame raktą, kuris yra „Pavadinimas“, o vertė - „Aprašymas“.
{{x.Name}} {{x.Description}}
Santrauka:
- Mes pažvelgėme į tai, kas yra RESTFUL architektūra, kuri yra ne kas kita, o funkcija, kurią atskleidžia žiniatinklio programos, pagrįstos įprastais HTTP veiksmažodžiais GET, POST, PUT ir DELETE.
- Objektas $ resursas naudojamas kartu su Angular, norint sąveikauti su RESTFUL interneto programomis aukštu lygiu, o tai reiškia, kad mes naudojame tik žiniatinklio programos veikiamas funkcijas, bet nesijaudiname, kaip ši funkcija įgyvendinama.
- Mes taip pat peržiūrėjome $ http paslaugą, kurią galima naudoti norint gauti duomenis iš žiniatinklio programos. Tai įmanoma, nes „$ http“ paslauga gali veikti su interneto programomis išsamiau.
- Dėl „$ http“ paslaugos galios tai galima naudoti norint gauti duomenis iš „MySQL“ arba „MS SQL Server“ per PHP programą. Tada duomenys gali būti pateikiami lentelėje, naudojant „ng-repeat“ direktyvą.