$ संसाधन, $ http (उदाहरण) का उपयोग करके AngularJS AJAX कॉल

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

इस तकनीक को डिजाइन करने का कारण ग्राहक और सर्वर के बीच की गई दौर यात्राओं की संख्या को कम करना था और संपूर्ण पृष्ठ रिफ्रेश की संख्या जो किसी उपयोगकर्ता को कुछ विशेष जानकारी की आवश्यकता होती थी।

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

कई आधुनिक दिन वेब एप्लिकेशन वास्तव में पेज को रीफ्रेश करने या सर्वर से डेटा प्राप्त करने के लिए इस तकनीक का पालन करते हैं।

इस ट्यूटोरियल में, आप सीखेंगे-

• $ संसाधन का उपयोग कर सर्वर के साथ उच्च-स्तरीय इंटरैक्शन
• $ Http के साथ निम्न-स्तरीय सर्वर इंटरैक्शन
• SQL और MySQL चलाने वाले सर्वर से डेटा प्राप्त करना

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

कोणीय अजाक्स अनुरोधों को संभालने के लिए दो अलग-अलग एपीआई प्रदान करता है। वे

• $ संसाधन
• $ http

हम कोणीय में "$ संसाधन" संपत्ति को देखेंगे, जिसका उपयोग उच्च स्तर पर सर्वर के साथ बातचीत करने के लिए किया जाता है।

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

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

इसलिए उच्च स्तर पर, हम जानते हैं कि ये दो कार्य क्या कर सकते हैं, और हम $ संसाधन संपत्ति का उपयोग करके उन्हें आमंत्रित कर सकते हैं। लेकिन तब हम "GetEmployeeDetails" और "SetEmployeeDetails फ़ंक्शन" के विवरण और इसे कैसे लागू किया जाता है, इसका ठीक-ठीक पता नहीं है।

उपरोक्त व्याख्या बताती है कि REST- आधारित वास्तुकला के रूप में क्या जाना जाता है।

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

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

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

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

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

$ संसाधन वस्तु क्या है

Angular में $ संसाधन ऑब्जेक्ट उन सर्वरों के साथ काम करने में मदद करता है जो REST आधारित आर्किटेक्चर पर एप्लिकेशन की सेवा करते हैं।

विभिन्न कार्यों के साथ @resource स्टेटमेंट का मूल सिंटैक्स नीचे दिया गया है

@Resource स्टेटमेंट का सिंटैक्स

var resource Object = $resource(url); 

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

1. get ([परम], [सफलता], [त्रुटि]) - इसका उपयोग मानक GET कॉल करने के लिए किया जा सकता है।

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

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

4. Remove ([params], postData, [सफलता], [त्रुटि]) - इसका उपयोग मानक DELETE कॉल करने के लिए किया जा सकता है।

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

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

• मान लीजिए कि आप टॉपिक का एक मान पास करते हैं: 'कोणीय' को 'फंक्शन' के रूप में एक 'परम' मान लें
• प्राप्त करें (' http: // उदाहरण / घटनाओं ', '{विषय:' कोणीय '}')
• URL http: // उदाहरण / घटनाओं? टॉपिक = कोणीय मिल समारोह के हिस्से के रूप में लागू किया जाता है।

$ संसाधन संपत्ति का उपयोग कैसे करें

$ संसाधन संपत्ति का उपयोग करने के लिए, निम्नलिखित चरणों का पालन करने की आवश्यकता है:

चरण 1) फ़ाइल "कोणीय-रिसोर्स.जेएस" को कोणीय.जेएस साइट से डाउनलोड करने की आवश्यकता है और इसे एप्लिकेशन में रखना होगा।

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

निम्नलिखित उदाहरण में, हम अपने '' डेमोएप '' एप्लिकेशन से "एनजीएसईआरएसओ" मॉड्यूल कह रहे हैं।

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

चरण 3) $ संसाधन () फ़ंक्शन को आपके REST समापन बिंदु के साथ कॉल करना, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है।

यदि आप ऐसा करते हैं, तो $ संसाधन ऑब्जेक्ट में REST समापन बिंदुओं द्वारा उजागर की गई आवश्यक कार्यक्षमता को लागू करने की क्षमता होगी।

निम्नलिखित उदाहरण एंडपॉइंट URL को कहते हैं: http: // उदाहरण / घटनाओं / 1

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

ऊपर दिए गए उदाहरण में निम्नलिखित बातें की जा रही हैं

1. जब कोणीय अनुप्रयोग को परिभाषित करते हैं, तो 'डेमोऐप.सर्विसेज' स्टेटमेंट का उपयोग करके एक सेवा बनाई जा रही है, जहाँ डेमोएप हमारे कोणीय अनुप्रयोग को दिया गया नाम है।

2. इस नई सेवा का विवरण बनाने के लिए .factory विधि का उपयोग किया जाता है।

3. 'एंट्री ’वह नाम है जो हम अपनी सेवा को दे रहे हैं जो कोई भी नाम हो सकता है जिसे आप प्रदान करना चाहते हैं।

4. इस सेवा में, हम एक फ़ंक्शन बना रहे हैं जो $ रिसोर्स एपीआई को कॉल करने वाला है

5. $ संसाधन ('/ उदाहरण / घटना /: 1)।

   $ संसाधन फ़ंक्शन एक सेवा है जिसका उपयोग REST समापन बिंदु पर कॉल करने के लिए किया जाता है। REST एंडपॉइंट सामान्य रूप से एक URL है। उपरोक्त फ़ंक्शन में, हम URL (/ उदाहरण / Event /: 1) का उपयोग हमारे REST समापन बिंदु के रूप में कर रहे हैं। हमारा REST एंडपॉइंट (/ उदाहरण / घटना /: 1) दर्शाता है कि हमारे मुख्य साइट "उदाहरण" पर कोई ईवेंट एप्लिकेशन बैठा है। यह इवेंट एप्लिकेशन REST- आधारित आर्किटेक्चर का उपयोग करके विकसित किया गया है।

6. फ़ंक्शन कॉल का परिणाम संसाधन वर्ग ऑब्जेक्ट है। संसाधन ऑब्जेक्ट में अब फ़ंक्शन (प्राप्त), क्वेरी (), सेव (), रिमूव (), डिलीट ()) हो सकते हैं जिन्हें इनवॉइस किया जा सकता है।

चरण 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 के लिए एक GET अनुरोध जारी करता है।
• पैरामीटर: URL में 1 को $ गुंजाइश के साथ बदल दिया गया है।
• फ़ंक्शन प्राप्त () एक खाली वस्तु लौटाएगा जो वास्तविक डेटा सर्वर से आने पर स्वचालित रूप से आबादी है।
• प्राप्त करने के लिए दूसरा तर्क () एक कॉलबैक है जिसे सर्वर से डेटा आने पर निष्पादित किया जाता है। पूरे कोड का संभावित आउटपुट एक JSON ऑब्जेक्ट होगा जो "उदाहरण" वेबसाइट से उजागर होने वाली घटनाओं की सूची लौटाएगा।

  जो लौटाया जा सकता है उसका एक उदाहरण नीचे दिखाया गया है

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

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

$ Http एक अन्य कोणीय जेएस सेवा है जिसका उपयोग दूरस्थ सर्वर से डेटा पढ़ने के लिए किया जाता है। डेटा का सबसे लोकप्रिय रूप जो सर्वर से पढ़ा जाता है वह JSON प्रारूप में डेटा है।

मान लेते हैं, कि हमारे पास एक PHP पृष्ठ है ( http: //example/angular/getTopics.PHP ) जो निम्नलिखित डेटा को लौटाता है

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

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

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

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

SQL और MySQL चलाने वाले सर्वर से डेटा प्राप्त करना

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

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

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

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

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

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

चरण 3) एनजी-दोहराने निर्देश का उपयोग करके अपने विचार में डेटा को प्रस्तुत करें।

नीचे हम $ http सेवा की "प्राप्त" विधि द्वारा लौटाए गए JSON ऑब्जेक्ट्स में प्रत्येक कुंजी-वैल्यू जोड़े के माध्यम से जाने के लिए एनजी-दोहराने के निर्देश का उपयोग कर रहे हैं।

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

<तालिका>
 {{x.Name}}  {{x.Description}} 

सारांश:

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