AngularJS AJAX – $http का उपयोग करके AJAX कॉल करें

एंगुलरजेएस AJAX

AJAX, एसिंक्रोनस का संक्षिप्त रूप है Javaस्क्रिप्ट और XML. AJAX को मुख्य रूप से पूरे पेज को पुनः लोड किए बिना, वेब पेज के कुछ हिस्सों को अपडेट करने के लिए डिज़ाइन किया गया था।

इस तकनीक को डिजाइन करने का कारण क्लाइंट और सर्वर के बीच होने वाले चक्करों की संख्या को कम करना था, तथा संपूर्ण पेज रिफ्रेश की संख्या को कम करना था, जो तब होता था जब उपयोगकर्ता को कुछ जानकारी की आवश्यकता होती थी।

AJAX ने पर्दे के पीछे सर्वर के साथ थोड़ी मात्रा में डेटा का आदान-प्रदान करके वेब पेजों को एसिंक्रोनस रूप से अपडेट करने की अनुमति दी। इसका मतलब यह था कि पूरे पेज को फिर से लोड किए बिना, वेब पेज के कुछ हिस्सों को अपडेट करना संभव था।

कई आधुनिक वेब अनुप्रयोग पृष्ठ को ताज़ा करने या सर्वर से डेटा प्राप्त करने के लिए वास्तव में इस तकनीक का पालन करते हैं।

$resource का उपयोग करके सर्वरों के साथ उच्च-स्तरीय इंटरैक्शन

Angular Ajax अनुरोधों को संभालने के लिए दो अलग-अलग API प्रदान करता है। वे हैं

$संसाधन
$http

हम Angular में “$resource” प्रॉपर्टी को देखेंगे, जिसका उपयोग उच्च स्तर पर सर्वर के साथ बातचीत करने के लिए किया जाता है।

जब हम उच्च स्तर पर बातचीत करने की बात करते हैं, तो इसका मतलब है कि हम केवल इस बात से चिंतित होंगे कि सर्वर कार्यक्षमता के संबंध में क्या प्रदान करता है, न कि इस बारे में कि सर्वर इस कार्यक्षमता के संबंध में विस्तार से क्या करता है।

उदाहरण के लिए, यदि सर्वर किसी ऐसे अनुप्रयोग को होस्ट कर रहा है जो किसी निश्चित कंपनी की कर्मचारी जानकारी रखता है, तो सर्वर क्लाइंट के लिए GetEmployeeDetails, SetEmployeeDetails आदि जैसी कार्यक्षमता को प्रदर्शित कर सकता है।

तो उच्च स्तर पर, हम जानते हैं कि ये दो फ़ंक्शन क्या कर सकते हैं, और हम उन्हें $resource प्रॉपर्टी का उपयोग करके लागू कर सकते हैं। लेकिन फिर हम “GetEmployeeDetails” और “SetEmployeeDetails फ़ंक्शन” के विवरण और इसे कैसे लागू किया जाता है, इसके बारे में ठीक से नहीं जानते हैं।

उपरोक्त स्पष्टीकरण बताता है कि REST-आधारित आर्किटेक्चर क्या होता है।

REST को रिप्रेजेंटेशनल स्टेट ट्रांसफर के नाम से जाना जाता है, जो कई आधुनिक वेब-आधारित प्रणालियों में अपनाई जाने वाली एक वास्तुकला है।
इसका मतलब है कि आप वेब-आधारित अनुप्रयोग के साथ काम करने के लिए GET, POST, PUT और DELETE जैसी सामान्य HTTP क्रियाओं का उपयोग कर सकते हैं।

तो चलिए मान लेते हैं, हमारे पास एक वेब एप्लीकेशन है जो एक सूची बनाए रखता है कार्यक्रम.

यदि हम सभी घटनाओं की सूची प्राप्त करना चाहते हैं,

वेब एप्लिकेशन इस तरह का URL प्रदर्शित कर सकता है http://example/events और
यदि एप्लिकेशन REST आधारित आर्किटेक्चर का अनुसरण कर रहा है, तो हम घटनाओं की पूरी सूची प्राप्त करने के लिए “GET” क्रिया का उपयोग कर सकते हैं।

उदाहरण के लिए, यदि कोई इवेंट आईडी 1 वाला है, तो हम यूआरएल के माध्यम से इस इवेंट का विवरण प्राप्त कर सकते हैं। http://example/events/1

$resource ऑब्जेक्ट क्या है?

Angular में $resource ऑब्जेक्ट उन सर्वरों के साथ काम करने में मदद करता है जो REST आधारित आर्किटेक्चर पर अनुप्रयोगों की सेवा करते हैं।

@resource कथन का मूल सिंटैक्स और विभिन्न फ़ंक्शन नीचे दिए गए हैं

@resource कथन का वाक्यविन्यास

var resource Object = $resource(url);

एक बार जब आपके पास resourceObject आ जाए, तो आप आवश्यक REST कॉल करने के लिए नीचे दिए गए फ़ंक्शन का उपयोग कर सकते हैं।

1. get([params], [success], [error]) – इसका उपयोग मानक GET कॉल करने के लिए किया जा सकता है।

2. save([params], postData, [success], [error]) – इसका उपयोग मानक POST कॉल करने के लिए किया जा सकता है।

3. query([params], [success], [error]) – इसका उपयोग मानक GET कॉल करने के लिए किया जा सकता है, लेकिन प्रतिक्रिया के भाग के रूप में एक सरणी लौटाई जाती है।

4. remove([params], postData, [success], [error]) – इसका उपयोग मानक DELETE कॉल करने के लिए किया जा सकता है।

नीचे दिए गए सभी फंक्शन्स में 'पैरामीटर्स' पैरामीटर का उपयोग आवश्यक पैरामीटर्स प्रदान करने के लिए किया जा सकता है, जिन्हें URL में पास करना होगा।

उदाहरण के लिए,

मान लीजिए कि आप Topic: 'Angular' का मान get फ़ंक्शन में 'param' के रूप में पास करते हैं
पाना('http://example/events' ,'{ विषय: 'एंगुलर' }')
URL http://example/events?Topic=Angular get फ़ंक्शन के भाग के रूप में लागू किया जाता है।

AngularJS $resource प्रॉपर्टी का उपयोग कैसे करें

$resource संपत्ति का उपयोग करने के लिए निम्नलिखित चरणों का पालन करना होगा:

चरण 1) फ़ाइल “angular-resource.js” को Angular.JS साइट से डाउनलोड करना होगा और एप्लिकेशन में रखना होगा।

चरण 2) $resource का उपयोग करने के लिए एप्लिकेशन मॉड्यूल को “ngResource” मॉड्यूल पर निर्भरता घोषित करनी चाहिए।

निम्नलिखित उदाहरण में, हम अपने 'DemoApp' एप्लिकेशन से “ngResource” मॉड्यूल को कॉल कर रहे हैं।

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

चरण 3) अपने REST एंडपॉइंट के साथ $resource() फ़ंक्शन को कॉल करना, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है।

यदि आप ऐसा करते हैं, तो $resource ऑब्जेक्ट में REST एंडपॉइंट्स द्वारा प्रदर्शित आवश्यक कार्यक्षमता को लागू करने की क्षमता होगी।

निम्न उदाहरण समापन बिंदु URL को कॉल करता है: http://example/events/1

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

उपरोक्त उदाहरण में निम्नलिखित कार्य किए जा रहे हैं

एंगुलर एप्लिकेशन को परिभाषित करते समय, 'DemoApp.services' कथन का उपयोग करके एक सेवा बनाई जा रही है, जहां DemoApp हमारे एंगुलर एप्लिकेशन को दिया गया नाम है।
इस नई सेवा का विवरण बनाने के लिए .factory विधि का उपयोग किया जाता है।
'प्रवेश' वह नाम है जो हम अपनी सेवा को दे रहे हैं, जो कोई भी नाम हो सकता है जो आप देना चाहें।
इस सेवा में, हम एक फ़ंक्शन बना रहे हैं जो $resource API को कॉल करेगा
$resource('/example/Event/:1).$resource फ़ंक्शन एक सेवा है जिसका उपयोग REST एंडपॉइंट को कॉल करने के लिए किया जाता है। REST एंडपॉइंट आम तौर पर एक URL होता है। उपरोक्त फ़ंक्शन में, हम URL (/example /Event/:1) का उपयोग अपने REST एंडपॉइंट के रूप में कर रहे हैं। हमारा REST एंडपॉइंट (/example /Event/:1) दर्शाता है कि हमारी मुख्य साइट "उदाहरण" पर एक इवेंट एप्लिकेशन मौजूद है। यह इवेंट एप्लिकेशन REST-आधारित आर्किटेक्चर का उपयोग करके विकसित किया गया है।
फ़ंक्शन कॉल का परिणाम एक संसाधन वर्ग ऑब्जेक्ट है। संसाधन ऑब्जेक्ट में अब फ़ंक्शन ( get() , query() , save() , remove() , delete() ) होंगे जिन्हें इनवोक किया जा सकता है।

चरण 4) अब हम अपने नियंत्रक में उपरोक्त चरण में लौटाए गए तरीकों (जो get() , query() , save() , remove() , delete() हैं) का उपयोग कर सकते हैं।

नीचे दिए गए कोड स्निपेट में, हम get() फ़ंक्शन का उदाहरण के रूप में उपयोग कर रहे हैं

आइए उस कोड को देखें जो 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);
  });

उपरोक्त चरण में,

उपरोक्त स्निपेट में get() फ़ंक्शन / उदाहरण /Event/:1 पर एक GET अनुरोध जारी करता है।
URL में पैरामीटर:1 को $scope.id से प्रतिस्थापित किया गया है।
फ़ंक्शन get() एक खाली ऑब्जेक्ट लौटाएगा जो सर्वर से वास्तविक डेटा आने पर स्वचालित रूप से भर जाएगा।
get() का दूसरा तर्क एक कॉलबैक है जो सर्वर से डेटा आने पर निष्पादित होता है। पूरे कोड का संभावित आउटपुट एक JSON ऑब्जेक्ट होगा जो “उदाहरण” वेबसाइट से उजागर किए गए ईवेंट की सूची लौटाएगा। क्या लौटाया जा सकता है इसका एक उदाहरण नीचे दिखाया गया है
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

$http के साथ निम्न-स्तरीय सर्वर इंटरैक्शन

$http एक और Angular JS सेवा है जिसका उपयोग रिमोट सर्वर से डेटा पढ़ने के लिए किया जाता है। सर्वर से पढ़े जाने वाले डेटा का सबसे लोकप्रिय रूप JSON प्रारूप में डेटा है।

मान लीजिए कि हमारे पास एक PHP पेज ( http://example/angular/getTopics.PHP ) जो निम्न JSON डेटा लौटाता है

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

आइए $http का उपयोग करके AngularJS कोड देखें, जिसका उपयोग सर्वर से उपरोक्त डेटा प्राप्त करने के लिए किया जा सकता है

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

उपरोक्त उदाहरण में

हम अपने कंट्रोलर फ़ंक्शन में $http सेवा जोड़ रहे हैं ताकि हम $http सेवा के “get” फ़ंक्शन का उपयोग कर सकें।
अब हम URL से JSON ऑब्जेक्ट प्राप्त करने के लिए HTTP सेवा से get फ़ंक्शन का उपयोग कर रहे हैं http://example /angular/getTopics.PHP
'रिस्पांस' ऑब्जेक्ट के आधार पर, हम एक कॉलबैक फ़ंक्शन बना रहे हैं जो डेटा रिकॉर्ड लौटाएगा और बाद में हम उन्हें $scope ऑब्जेक्ट में संग्रहीत कर रहे हैं।
फिर हम नियंत्रक से $scope.names चर का उपयोग कर सकते हैं और JSON ऑब्जेक्ट्स को तदनुसार प्रदर्शित करने के लिए अपने दृश्य में इसका उपयोग कर सकते हैं।

SQL और एसक्यूएल से डेटा कैसे प्राप्त करें MySQL AngularJS का उपयोग करने वाला सर्वर

Angular का उपयोग किसी सर्वर से डेटा लाने के लिए भी किया जा सकता है। MySQL या एसक्यूएल.

विचार यह है कि यदि आपके पास एक PHP पृष्ठ है जो किसी से जुड़ रहा है MySQL डेटाबेस या एक एएसपी.नेट MS से जुड़ने वाला पेज एसक्यूएल यदि आप सर्वर डेटाबेस में डेटा संग्रहीत करना चाहते हैं, तो आपको यह सुनिश्चित करना होगा कि PHP और ASP.Net दोनों पृष्ठ JSON प्रारूप में डेटा प्रस्तुत करें।

SQL और Linux से डेटा कैसे प्राप्त करें, इस पर चरण दर चरण प्रक्रिया निम्नलिखित है: MySQL सर्वर AngularJS का उपयोग कर रहा है।

मान लीजिए, हमारे पास एक PHP साइट है (http://example /angular/getTopics.PHP) या तो एक से डेटा की सेवा MySQL या SQL डेटाबेस.

चरण 1) किसी से डेटा लें MySQL डेटाबेस
पहला कदम यह सुनिश्चित करना है कि PHP पेज डेटा को कहां से लेता है MySQL यह डेटाबेस में JSON प्रारूप में डेटा प्रदान करता है।

चरण 2) $http सेवा का उपयोग करके JSON डेटा प्राप्त करें
JSON डेटा प्राप्त करने के लिए $http सेवा का उपयोग करने हेतु ऊपर दिखाए गए समान कोड को लिखें।

आइए $http का उपयोग करके AngularJS कोड देखें जिसका उपयोग सर्वर से उपरोक्त डेटा प्राप्त करने के लिए किया जा सकता है

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

चरण 3) अपने दृश्य में डेटा प्रस्तुत करें एनजी-रिपीट निर्देश

नीचे हम $http सेवा की “get” विधि द्वारा लौटाए गए JSON ऑब्जेक्ट्स में प्रत्येक कुंजी-मान युग्म को देखने के लिए ng-repeat निर्देश का उपयोग कर रहे हैं।

प्रत्येक JSON ऑब्जेक्ट के लिए, हम कुंजी प्रदर्शित कर रहे हैं जो “नाम” है और मान “Descriptआयन”।

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

सारांश

AJAX का पूर्ण रूप एसिंक्रोनस है Javaलिपि और एक्सएमएल।
हमने देखा है कि क्या शोकहारा आर्किटेक्चर कुछ और नहीं बल्कि वेब अनुप्रयोगों द्वारा प्रदर्शित एक कार्यक्षमता है जो GET, POST, PUT और DELETE की सामान्य HTTP क्रियाओं पर आधारित है।
$resource ऑब्जेक्ट का उपयोग Angular के साथ RESTFUL वेब अनुप्रयोगों के साथ उच्च स्तर पर बातचीत करने के लिए किया जाता है, जिसका अर्थ है कि हम केवल वेब अनुप्रयोग द्वारा प्रदर्शित कार्यक्षमता को ही लागू करते हैं, लेकिन इस बात की चिंता नहीं करते कि कार्यक्षमता को कैसे कार्यान्वित किया जाता है।
हमने $http सेवा पर भी गौर किया जिसका उपयोग वेब एप्लिकेशन से डेटा प्राप्त करने के लिए किया जा सकता है। यह इसलिए संभव है क्योंकि $http सेवा वेब एप्लिकेशन के साथ अधिक विस्तृत स्तर पर काम कर सकती है।
$http सेवा की शक्ति के कारण, इसका उपयोग किसी भी स्थान से डेटा प्राप्त करने के लिए किया जा सकता है। MySQL या PHP एप्लीकेशन के माध्यम से MS SQL सर्वर। फिर डेटा को ng-repeat निर्देश का उपयोग करके तालिका में प्रस्तुत किया जा सकता है।