AngularJS AJAX zvans, izmantojot resursu $ resurss, $ http (piemērs)

Satura rādītājs:

Anonim

AJAX ir asinhronā JavaScript un XML īsā forma. AJAX galvenokārt bija paredzēts tīmekļa lapas daļu atjaunināšanai, nepārlādējot visu lapu.

Šīs tehnoloģijas izstrādes iemesls bija samazināt turp un atpakaļ starp klientu un serveri veikto braucienu skaitu un visu lapu atsvaidzināšanas skaitu, kas notika vienmēr, kad lietotājam bija nepieciešama noteikta informācija.

AJAX ļāva tīmekļa lapas atjaunināt asinhroni, aizkulisēs apmainoties ar nelielu datu daudzumu ar serveri. Tas nozīmēja, ka bija iespējams atjaunināt Web lapas daļas, nepārlādējot visu lapu.

Daudzas mūsdienu tīmekļa lietojumprogrammas faktiski izmanto šo paņēmienu, lai atsvaidzinātu lapu vai iegūtu datus no servera.

Šajā apmācībā jūs uzzināsiet

  • Augsta līmeņa mijiedarbība ar serveriem, izmantojot resursu $
  • Zema līmeņa serveru mijiedarbība ar $ http
  • Datu iegūšana no servera, kurā darbojas SQL un MySQL

Augsta līmeņa mijiedarbība ar serveriem, izmantojot resursu $

Angular nodrošina divas dažādas API, lai apstrādātu Ajax pieprasījumus. Viņi ir

  • $ resurss
  • $ http

Mēs aplūkosim īpašumu "$ resurss" Angular, kas tiek izmantots, lai mijiedarbotos ar serveriem augstā līmenī.

Kad mēs runājam par mijiedarbību augstākā līmenī, tas nozīmē, ka mūs uztrauc tikai tas, ko serveris piedāvā attiecībā uz funkcionalitāti, nevis par to, ko tieši serveris detalizēti dara saistībā ar šo funkcionalitāti.

Piemēram, ja serveris mitināja lietojumprogrammu, kurā tiek glabāta noteikta uzņēmuma darbinieku informācija, serveris, iespējams, pakļauj funkcionalitāti klientiem, piemēram, GetEmployeeDetails, SetEmployeeDetails utt.

Tātad augstā līmenī mēs zinām, ko šīs divas funkcijas var darīt, un varam tās izsaukt, izmantojot rekvizītu $ resurss. Bet tad mēs precīzi nezinām "GetEmployeeDetails" un "SetEmployeeDetails funkcijas" detaļas un to, kā tās tiek īstenotas.

Iepriekš sniegtais skaidrojums izskaidro to, kas ir pazīstams kā uz REST balstīta arhitektūra.

  • REST ir pazīstams kā Reprezentatīvā stāvokļa pārsūtīšana, kas ir arhitektūra, kuru ievēro daudzas mūsdienu tīmekļa sistēmas.
  • Tas nozīmē, ka jūs varat izmantot parastos HTTP darbības vārdus GET, POST, PUT un DELETE, lai strādātu ar tīmekļa lietojumprogrammu.

Pieņemsim, ka mums ir tīmekļa lietojumprogramma, kas uztur notikumu sarakstu.

Ja mēs vēlētos nokļūt visu notikumu sarakstā,

  • Tīmekļa lietojumprogramma var atklāt URL, piemēram, http: // piemērs / notikumi un
  • Mēs varam izmantot darbības vārdu "GET", lai iegūtu visu notikumu sarakstu, ja lietojumprogramma izmanto REST balstītu arhitektūru.

Piemēram, ja notika notikums ar ID 1, tad detalizētu informāciju par šo notikumu varam iegūt, izmantojot vietrādi URL. http: // piemērs / notikumi / 1

Kāds ir objekta $ resurss

$ Resursa objekts leņķī palīdz darbā ar serveriem, kas apkalpo lietojumprogrammas uz REST balstītas arhitektūras.

@Resource paziņojuma pamata sintakse kopā ar dažādām funkcijām ir sniegta zemāk

@Resource paziņojuma sintakse

var resource Object = $resource(url);

Kad resurss resurss ir pie rokas, varat izmantot tālāk norādītās funkcijas, lai veiktu nepieciešamos REST zvanus.

1. get ([params], [panākumi], [kļūda]) - to var izmantot, lai veiktu standarta GET zvanu.

2. saglabāt ([params], postData, [panākumi], [kļūda]) - to var izmantot, lai veiktu standarta POST zvanu.

3. vaicājums ([params], [panākumi], [kļūda]) - to var izmantot, lai veiktu standarta GET zvanu, bet masīvs tiek atgriezts kā daļa no atbildes.

4. noņemt ([params], postData, [panākumi], [kļūda]) - to var izmantot, lai veiktu standarta DELETE zvanu.

Visās zemāk norādītajās funkcijās parametru “params” var izmantot, lai nodrošinātu nepieciešamos parametrus, kas jānodod URL.

Piemēram,

  • Pieņemsim, ka jūs nododat tēmas vērtību: 'leņķiskais' kā 'param' get funkcijā kā
  • get (' http: // example / events ', '{Topic:' Angular '}')
  • URL http: // piemērs / notikumi? Tēma = Leņķiskais tiek izsaukts kā daļa no funkcijas get.

Kā izmantot īpašumu $ resurss

Lai izmantotu rekvizītu $ resurss, ir jāveic šādas darbības:

1. solis) Fails "angular-resource.js" ir jālejupielādē no vietnes Angular.JS, un tas ir jāievieto lietojumprogrammā.

2. solis . Lai izmantotu resursu $, lietojumprogrammas modulim jāpaziņo atkarība no moduļa "ngResource".

Šajā piemērā mēs izsaucam moduli "ngResource" no mūsu lietojumprogrammas "DemoApp".

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

3. solis. Funkcijas $ resurss ( ) izsaukšana ar REST galapunktu, kā parādīts nākamajā piemērā.

Ja jūs to izdarīsit, objektam $ resurss būs iespēja izsaukt nepieciešamo funkcionalitāti, kas pakļauta REST galapunktiem.

Šis piemērs izsauc galapunkta URL: http: // example / events / 1

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

Iepriekš minētajā piemērā tiek veiktas šādas darbības

  1. Definējot lietojumprogrammu Angular, pakalpojums tiek veidots, izmantojot paziņojumu “DemoApp.services”, kur DemoApp ir nosaukums, kas piešķirts mūsu Angular lietojumprogrammai.

  2. Šī rūpnīcas metode tiek izmantota, lai izveidotu šī jaunā pakalpojuma detaļas.

  3. 'Ieraksts' ir nosaukums, ko mēs piešķiram mūsu pakalpojumam, un tas var būt jebkurš nosaukums, kuru vēlaties norādīt.

  4. Šajā pakalpojumā mēs izveidojam funkciju, kas izsauks $ resurss API

  5. $ resurss ('/ example / Event /: 1).

    Funkcija $ resurss ir pakalpojums, ko izmanto, lai izsauktu REST galapunktu. REST galapunkts parasti ir URL. Iepriekš minētajā funkcijā mēs izmantojam URL (/ example / Event /: 1) kā mūsu REST galapunktu. Mūsu REST galapunkts (/ example / Event /: 1) norāda, ka mūsu galvenajā vietnē "piemērs" sēž notikumu programma. Šī notikuma programma ir izstrādāta, izmantojot uz REST balstītu arhitektūru.

  6. Funkcijas izsaukuma rezultāts ir resursu klases objekts. Resursa objektam tagad būs funkcijas (get (), query (), save (), remove (), delete ()), kuras var izsaukt.

4. solis) Tagad mēs varam izmantot metodes, kas tika atgrieztas iepriekšējā solī (kas ir get (), query (), save (), remove (), delete ()) mūsu kontrolierī.

Zemāk esošajā koda fragmentā mēs kā piemēru izmantojam funkciju get ()

Apskatīsim kodu, kas var izmantot funkciju 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);});

Veicot iepriekš minēto darbību,

  • Funkcija get () iepriekšējā fragmentā izsniedz GET pieprasījumu uz / example / Event /: 1.
  • Parametrs: 1 URL tiek aizstāts ar $ scope.id.
  • Funkcija get () atgriezīs tukšu objektu, kas tiek aizpildīts automātiski, kad faktiskie dati nāk no servera.
  • Otrais arguments, lai iegūtu () ir atzvanīšana, kas tiek izpildīts, kad dati tiek saņemti no servera. Iespējamais visa koda izvads būtu JSON objekts, kas atgrieztu notikumu sarakstu, kas tiek parādīts vietnē "piemērs".

    Piemērs tam, ko var atgriezt, ir parādīts zemāk

    {{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}

Zema līmeņa serveru mijiedarbība ar $ http

$ Http ir vēl viens leņķa JS pakalpojums, ko izmanto, lai nolasītu datus no attāliem serveriem. Vispopulārākā datu forma, ko nolasa no serveriem, ir dati JSON formātā.

Pieņemsim, ka mums ir PHP lapa ( http: //example/angular/getTopics.PHP ), kas atgriež šādus JSON datus

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

Apskatīsim AngularJS kodu, izmantojot $ http, kuru var izmantot, lai iegūtu iepriekš minētos datus no servera

Iepriekš minētajā piemērā

  1. Mēs pievienojam pakalpojumu $ http mūsu kontroliera funkcijai, lai mēs varētu izmantot pakalpojuma $ http funkciju "iegūt".
  2. Tagad mēs izmantojam HTTP pakalpojuma get funkciju, lai iegūtu JSON objektus no URL http: // piemērs /angular/getTopics.PHP
  3. Pamatojoties uz objektu 'response', mēs izveidojam atzvanīšanas funkciju, kas atgriezīs datu ierakstus, un pēc tam tos glabājam objektā $ scope.
  4. Pēc tam mēs varam izmantot kontroliera mainīgo $ scope.names un izmantot to mūsu skatījumā, lai attiecīgi parādītu JSON objektus.

Datu iegūšana no servera, kurā darbojas SQL un MySQL

Angular var izmantot arī, lai iegūtu datus no servera, kurā darbojas MySQL vai SQL.

Ideja ir tāda, ka, ja jums ir PHP lapa, kas savieno ar MySQL datu bāzi, vai Asp.Net lapa, kas savieno ar MS SQL servera datu bāzi, jums jānodrošina, lai gan PHP, gan ASP.Net lapa atveidotu datus JSON formātā.

Pieņemsim, ka mums ir PHP vietne ( http: // piemērs /angular/getTopics.PHP ), kas apkalpo datus no MySQL vai SQL datu bāzes.

1. solis . Pirmais solis ir nodrošināt, ka PHP lapa ņem datus no MySQL datu bāzes un tos apkalpo JSON formātā.

2. solis. Uzrakstiet līdzīgo kodu, kas parādīts iepriekš, lai izmantotu pakalpojumu $ http, lai iegūtu JSON datus.

Apskatīsim AngularJS kodu, izmantojot $ http, kuru var izmantot, lai iegūtu iepriekš minētos datus no servera

3. solis. Norādiet datus savā skatā, izmantojot direktīvu ng-repeat.

Zemāk mēs izmantojam direktīvu ng-repeat, lai izietu cauri katram atslēgas vērtību pārim JSON objektos, ko atgrieza pakalpojuma $ http metode "get".

Katram JSON objektam mēs parādām atslēgu, kas ir "Nosaukums", un vērtība ir "Apraksts".


 {{x.NAME}}  {{x.Description}}

Kopsavilkums:

  • Mēs esam apskatījuši, kas ir RESTFUL arhitektūra, kas ir nekas cits kā funkcionalitāte, ko atklāj tīmekļa lietojumprogrammas, pamatojoties uz parastajiem HTTP darbības vārdiem GET, POST, PUT un DELETE.
  • Objekts $ resurss tiek izmantots kopā ar Angular, lai mijiedarbotos ar RESTFUL tīmekļa lietojumprogrammām augstā līmenī, kas nozīmē, ka mēs izmantojam tikai tīmekļa lietojumprogrammas pakļauto funkcionalitāti, bet neuztraucamies par to, kā funkcionalitāte tiek ieviesta.
  • Mēs arī apskatījām pakalpojumu $ http, kuru var izmantot, lai iegūtu datus no tīmekļa lietojumprogrammas. Tas ir iespējams, jo pakalpojums $ http var strādāt ar tīmekļa lietojumprogrammām detalizētākā līmenī.
  • Pakalpojuma $ http jaudas dēļ to var izmantot, lai iegūtu datus no MySQL vai MS SQL Server, izmantojot PHP lietojumprogrammu. Pēc tam datus var atveidot tabulā, izmantojot direktīvu ng-repeat.