АЈАКС је кратки облик асинхроног ЈаваСцрипт-а и КСМЛ-а. АЈАКС је првенствено дизајниран за ажурирање делова веб странице, без поновног учитавања целе странице.
Разлог за дизајнирање ове технологије био је смањење броја повратних путовања између клијента и сервера и броја освежавања целе странице које су се одвијале кад год је корисник захтевао одређене информације.
АЈАКС је омогућио асинхроно ажурирање веб страница разменом малих количина података са сервером иза сцене. То је значило да је могуће ажурирати делове веб странице, без поновног учитавања целе странице.
Многе савремене веб апликације заправо следе ову технику за освежавање странице или добијање података са сервера.
У овом упутству ћете научити-
- Интеракције на високом нивоу са серверима који користе $ ресурс
- Интеракције сервера на ниском нивоу са $ хттп
- Преузимање података са сервера који ради на СКЛ-у и МиСКЛ-у
Интеракције на високом нивоу са серверима који користе $ ресурс
Ангулар пружа два различита АПИ-ја за обраду Ајак захтева. Су
- $ ресурс
- $ хттп
Погледаћемо својство „$ ресоурце“ у Ангулар-у, које се користи за интеракцију са серверима на високом нивоу.
Када говоримо о интеракцији на вишем нивоу, то значи да ће нас сметати само оно што сервер нуди у вези са функционалношћу, а не и шта тачно сервер ради детаљно у вези са овом функционалношћу.
На пример, ако је сервер био домаћин апликацији која одржава информације о запосленима одређене компаније, сервер би клијентима могао изложити функционалност као што су ГетЕффициееДетаилс, СетЕффициееДетаилс итд.
Дакле, на високом нивоу знамо шта могу ове две функције и можемо их позвати помоћу својства $ ресоурце. Али тада не знамо тачно детаље о „ГетЕффициееДетаилс“ и „СетЕффициееДетаилс функције“ и како се то примењује.
Горње објашњење објашњава оно што је познато као архитектура заснована на РЕСТ-у.
- РЕСТ је познат као Репрезентативни државни пренос, што је архитектура која се прати у многим модерним системима заснованим на мрежи.
- То значи да можете да користите уобичајене ХТТП глаголе ГЕТ, ПОСТ, ПУТ и ДЕЛЕТЕ за рад са веб апликацијом.
Па претпоставимо да имамо веб апликацију која одржава листу догађаја.
Ако бисмо желели да дођемо до листе свих догађаја,
- Веб апликација може да изложи УРЛ као што су хттп: // екампле / евентс и
- Можемо да користимо глагол „ГЕТ“ да бисмо добили целу листу догађаја ако апликација следи архитектуру засновану на РЕСТ-у.
Тако, на пример, ако је био догађај са ИД-ом 1, онда можемо добити детаље о овом догађају путем УРЛ-а. хттп: // пример / догађаји / 1
Шта је $ ресоурце објект
Објекат $ ресоурце у Ангулар-у помаже у раду са серверима који служе апликацијама на архитектури заснованој на РЕСТ-у.
Основна синтакса израза @ресоурце, заједно са разним функцијама, дате су у наставку
Синтакса израза @ресоурце
var resource Object = $resource(url);
Једном кад имате при руци ресоурцеОбјецт, можете користити доње функције за упућивање потребних РЕСТ позива.
1. гет ([парамс], [успех], [грешка]) - Ово се може користити за упућивање стандардног ГЕТ позива.
2. сачувај ([парамс], постДата, [успех], [грешка]) - Ово се може користити за упућивање стандардног ПОСТ позива.
3. упит ([парамс], [успех], [грешка]) - Ово се може користити за упућивање стандардног ГЕТ позива, али се низ враћа као део одговора.
4. уклони ([парамс], постДата, [успех], [грешка]) - Ово се може користити за упућивање стандардног позива ДЕЛЕТЕ.
У свим функцијама датим испод параметар 'парамс' може се користити за пружање потребних параметара који се морају проследити у УРЛ-у.
На пример,
- Претпоставимо да вриједност Топиц: 'Ангулар' пренесете као 'парам' у функцији гет као
- гет (' хттп: // екампле / евентс ', '{Топиц:' Ангулар '}')
- УРЛ хттп: // екампле / евентс? Топиц = Ангулар се позива као део функције гет.
Како се користи својство ресурса $
Да бисте користили својство $ ресоурце, потребно је следити следеће кораке:
Корак 1) Датотеку „ангулар-ресоурце.јс“ потребно је преузети са странице Ангулар.ЈС и мора се сместити у апликацију.
Корак 2) Апликативни модул треба да објави зависност од модула „нгРесоурце“ како би користио $ ресурс.
У следећем примеру позивамо модул „нгРесоурце“ из наше апликације „ДемоАпп“.
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Корак 3) Позивање функције $ ресоурце () са вашом РЕСТ крајњом тачком, као што је приказано у следећем примеру.
Ако то урадите, објект $ ресоурце имаће могућност да позове неопходну функционалност изложену РЕСТ крајњим тачкама.
Следећи пример позива УРЛ крајње тачке: хттп: // екампле / евентс / 1
angular.module('DemoApp.services').factory('Entry', function($resource){return $resource('/example/Event/:1); // Note the full endpoint address});
У горњем примеру се раде следеће ствари
-
Када се дефинише Ангулар апликација, услуга се креира помоћу израза „ДемоАпп.сервицес“ где је ДемоАпп име дато нашој Ангулар апликацији.
-
Метода .фацтори користи се за креирање детаља ове нове услуге.
-
„Улаз“ је име које дајемо нашој услузи и које може бити било које име које желите да пружите.
-
У овој услузи креирамо функцију која ће позвати АПИ АПИ-ја $
-
$ ресоурце ('/ пример / Догађај /: 1).
Функција $ ресоурце је услуга која се користи за позивање РЕСТ крајње тачке. РЕСТ крајња тачка је обично УРЛ. У горњој функцији користимо УРЛ (/ пример / Догађај /: 1) као нашу РЕСТ крајњу тачку. Наша крајња тачка РЕСТ (/ пример / Догађај /: 1) означава да на нашем главном месту „пример“ седи апликација за догађаје. Ова апликација за догађаје је развијена коришћењем архитектуре засноване на РЕСТ-у.
-
Резултат позива функције је објект класе ресурса. Објекат ресурса сада ће имати функције (гет (), куери (), саве (), ремове (), делете ()) које се могу позвати.
Корак 4) Сада можемо да користимо методе које су враћене у горњем кораку (а то су гет (), куери (), саве (), ремове (), делете ()) у нашем контролеру.
У доњем исечку кода користимо функцију гет () као пример
Погледајмо код који може користити функцију гет ().
angular.module('DemoApp.controllers',[]);angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {var obj = MyFunction.get({ 1: $scope.id }, function() {console.log(obj);});
У горњем кораку,
- Функција гет () у горњем исечку издаје ГЕТ захтев за / екампле / Евент /: 1.
- Параметар: 1 у УРЛ-у се замењује са $ сцопе.ид.
- Функција гет () ће вратити празан објекат који се аутоматски попуњава када стварни подаци долазе са сервера.
- Други аргумент за гет () је повратни позив који се извршава када подаци стигну са сервера. Могући излаз целокупног кода био би ЈСОН објекат који би вратио листу догађаја изложених са веб локације „екампле“.
Пример онога што се може вратити приказан је у наставку
{{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}}
Интеракције сервера на ниском нивоу са $ хттп
$ Хттп је још једна Ангулар ЈС услуга која се користи за читање података са удаљених сервера. Најпопуларнији облик података који се чита са сервера су подаци у ЈСОН формату.
Претпоставимо, да имамо ПХП страницу ( хттп: //екампле/ангулар/гетТопицс.ПХП ) која враћа следеће ЈСОН податке
"Topics": [{"Name" : "Controllers","Description" : "Controllers in action"},{"Name" : "Models","Description" : "Binding data using Models"},{"Name" : "Directives","Description" : "Using directives in Angular"}]
Погледајмо АнгуларЈС код помоћу $ хттп, који се може користити за добијање горе наведених података са сервера
У горњем примеру
- У нашу функцију контролера додајемо услугу $ хттп да бисмо могли да користимо функцију „гет“ услуге $ хттп.
- Сада користимо функцију гет из ХТТП услуге за добијање ЈСОН објеката са УРЛ адресе хттп: // екампле /ангулар/гетТопицс.ПХП
- На основу објекта 'респонсе', креирамо функцију повратног позива која ће вратити записе података, а затим их складиштимо у објект $ сцопе.
- Тада можемо користити променљиву $ сцопе.намес из контролера и користити је у нашем погледу за приказ ЈСОН објеката у складу с тим.
Преузимање података са сервера који ради на СКЛ-у и МиСКЛ-у
Ангулар се такође може користити за преузимање података са сервера који ради на МиСКЛ или СКЛ.
Идеја је да ако имате ПХП страницу која се повезује са МиСКЛ базом података или Асп.Нет страницу која се повезује са базом података МС СКЛ сервера, тада морате да обезбедите да и ПХП и АСП.Нет страница генеришу податке у ЈСОН формату.
Претпоставимо да имамо ПХП локацију ( хттп: // екампле /ангулар/гетТопицс.ПХП ) која опслужује податке из МиСКЛ или СКЛ базе података.
Корак 1) Први корак је осигурати да ПХП страница узима податке из МиСКЛ базе података и служи их у ЈСОН формату.
Корак 2) Напишите слични код приказан горе да бисте користили $ хттп услугу за добијање ЈСОН података.
Погледајмо АнгуларЈС код помоћу $ хттп који се може користити за добијање горе наведених података са сервера
Корак 3) Прикажите податке у свом приказу помоћу директиве нг-репеат.
Испод користимо нг-репеат директиву за пролазак кроз сваки од парова кључ / вредност у ЈСОН објектима враћеним методом "гет" услуге $ хттп.
За сваки ЈСОН објекат приказујемо кључ који је „Име“, а вредност „Опис“.
<див нг-апп = "миАпп" нг-цонтроллер = "АнгуларЦтрл"><табле><тр нг-репеат = "к у темама"><тд> {{к.Наме}} <тд> {{к.Десцриптион}}
Резиме:
- Погледали смо шта је РЕСТФУЛ архитектура, која није ништа друго до функционалност изложена веб апликацијама заснованим на нормалним ХТТП глаголима ГЕТ, ПОСТ, ПУТ и ДЕЛЕТЕ.
- Објекат $ ресоурце се користи са Ангулар-ом за интеракцију са РЕСТФУЛ веб апликацијама на високом нивоу, што значи да се позивамо само на функционалност коју излаже веб апликација, али се не оптерећујемо како је функционалност имплементирана.
- Такође смо погледали услугу $ хттп која се може користити за добијање података из веб апликације. То је могуће јер $ хттп услуга може да ради са веб апликацијама на детаљнијем нивоу.
- Због снаге $ хттп услуге, ово се може користити за добијање података са МиСКЛ или МС СКЛ сервера путем ПХП апликације. Подаци се затим могу приказати у табели помоћу директиве нг-репеат.