HTTPCLIENT का उपयोग करके कोणीय 9 में REST API सर्वर को GET अनुरोध कैसे भेजें?

HttpClient का उपयोग करके कोणीय 9 में REST API सर्वर को GET अनुरोध कैसे भेजें?

इस ट्यूटोरियल में, आप उदाहरण के द्वारा सीखेंगे कि कैसे |_+_| का उपयोग करके अपने एंगुलर 9 एप्लिकेशन में REST API सर्वर को GET अनुरोध भेजें। हम यह भी सीखेंगे कि एंगुलर जैसे घटकों और सेवाओं की बुनियादी अवधारणाओं का उपयोग कैसे करें और |_+_| . का उपयोग कैसे करें डेटा संग्रह प्रदर्शित करने का निर्देश।

हम से उपलब्ध JSON API का उपयोग करेंगे NewsAPI.org

इस पूरे ट्यूटोरियल में, हम एंगुलर सीएलआई 9 का उपयोग करके स्क्रैच से एक सरल उदाहरण बनाने जा रहे हैं और हम देखेंगे कि कैसे उपयोग करना है |_+_| तृतीय-पक्ष REST API सर्वर को GET अनुरोध भेजने के लिए और लौटाए गए JSON डेटा का उपभोग और प्रदर्शन कैसे करें।

अधिक विवरण में, हम सीखेंगे:

एंगुलर सीएलआई का उपयोग करके एंगुलर 9 प्रोजेक्ट कैसे बनाएं
हमारे प्रोजेक्ट में रूटिंग को जल्दी से कैसे सेट करें
कोणीय घटक कैसे बनाएं
वेधशालाओं की सदस्यता कैसे लें,
|_+_| . का उपयोग कैसे करें डेटा पर पुनरावृति करने के लिए टेम्प्लेट में निर्देश।

आवश्यक शर्तें

आरंभ करने से पहले, आपको कुछ आवश्यकताओं की आवश्यकता है। आपको अपनी विकास मशीन पर निम्नलिखित उपकरण स्थापित करने होंगे:

Node.js और npm। आप दोनों को से स्थापित कर सकते हैं आधिकारिक वेबसाइट .
कोणीय सीएलआई 9 (आप इसे एनपीएम से स्थापित कर सकते हैं: |_+_|)

कोणीय 9 प्रोजेक्ट बनाना

अब अपना Angular 9 प्रोजेक्ट बनाते हैं। एक नया टर्मिनल खोलें और निम्न कमांड चलाएँ:

HttpClient

सीएलआई आपको संकेत देगा यदि क्या आप कोणीय रूटिंग जोड़ना चाहेंगे? (Y n) , प्रकार तथा . और आप किस स्टाइलशीट प्रारूप का उपयोग करना चाहेंगे? CSS चुनें और टाइप करें प्रवेश करना .

इसके बाद, आप निम्न आदेशों का उपयोग करके स्थानीय रूप से अपने आवेदन की सेवा कर सकते हैं:

मैं जैप कॉइन कहां से खरीद सकता हूं?

ngFor

आपका आवेदन |_+_| से चल रहा होगा।

समाचार डेटा प्राप्त करना

इससे पहले कि आप समाचार डेटा प्राप्त कर सकें NewsAPI.org जो ओपन सोर्स और विकास परियोजनाओं के लिए एक मुफ्त योजना प्रदान करता है, आपको सबसे पहले यहां जाना होगा रजिस्टर करें एपीआई कुंजी प्राप्त करने के लिए पृष्ठ।

कोणीय 9 उदाहरण

एक कोणीय सेवा जोड़ना

अगला, आइए एक ऐसी सेवा बनाएं जो समाचार एपीआई से डेटा प्राप्त करने का ध्यान रखे। एक नया टर्मिनल खोलें और निम्न कमांड चलाएँ:

HttpClient

एचटीपी क्लाइंट की स्थापना

इसके बाद |_+_| . खोलें फ़ाइल फिर आयात करें |_+_| और इसे |_+_| . में जोड़ें सरणी:

ngFor

बस इतना ही, अब हम |_+_| . का उपयोग करने के लिए तैयार हैं हमारे प्रोजेक्ट में।

कोणीय सेवा में HttpClient को इंजेक्ट करना

इसके बाद |_+_| . खोलें फ़ाइल और इंजेक्षन |_+_| सेवा निर्माता के माध्यम से:

npm install -g @angular/cli

डेटा प्राप्त करने के लिए GET अनुरोध भेजा जा रहा है

इसके बाद, एक |_+_| . परिभाषित करें वेरिएबल जो न्यूज एपीआई से आपकी एपीआई कुंजी रखेगा:

$ ng new angular-httpclient-demo

अंत में, एक विधि जोड़ें जो टेकक्रंच समाचार के लिए एक समापन बिंदु पर GET अनुरोध भेजती है:

$ cd ./angular-httpclient-demo $ ng serve

सेवा के लिए हमें बस इतना ही जोड़ना होगा।

कैसे |_+_| विधि कार्य

एचटीपी क्लाइंट |_+_| विधि HTTP GET अनुरोध भेजने के लिए डिज़ाइन की गई है। वाक्यविन्यास इस प्रकार है:

http://localhost:4200

यह एक आरईएसटी एपीआई एंडपॉइंट लेता है और एक वैकल्पिक |_+_| ऑब्जेक्ट और एक अवलोकन योग्य उदाहरण देता है।

wozx सिक्का कहां से खरीदें

कोणीय 9 घटक बनाना

अब, समाचार डेटा प्रदर्शित करने के लिए एक कोणीय 9 घटक बनाते हैं। अपने टर्मिनल पर वापस जाएँ और निम्न कमांड चलाएँ:

$ ng generate service api

इंजेक्शन लगाना |_+_| आपके घटक में

इसके बाद, |_+_| . खोलें फ़ाइल और आयात करके प्रारंभ करें |_+_| आपके घटक में:

src/app/app.module.ts

इसके बाद, आपको |_+_| . इंजेक्ट करने की आवश्यकता है घटक के निर्माता के माध्यम से:

HttpClientModule

GET अनुरोध भेजना और ऑब्जर्वेबल की सदस्यता लेना

इसके बाद, एक |_+_| . परिभाषित करें चर और कॉल करें |_+_| |_+_| . में एपीआई सेवा की विधि घटक की विधि:

imports

यह सुनिश्चित करेगा कि घटक लोड होने के बाद हमारा डेटा प्राप्त हो गया है।

हम |_+_| . कहते हैं विधि और लौटाए गए ऑब्जर्वेबल की सदस्यता लें जो समाचार समापन बिंदु पर एक GET अनुरोध भेजेगा।

NgFor . के साथ टेम्पलेट में डेटा प्रदर्शित करना

आइए अब हमारे घटक टेम्पलेट में समाचार लेख प्रदर्शित करते हैं। |_+_| . खोलें फ़ाइल और इसे निम्नानुसार अद्यतन करें:

// [...] import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ // [...] HttpClientModule, ], // [...] }) export class AppModule {}

राउटर में कोणीय घटक जोड़ना

कोणीय सीएलआई 9 ने स्वचालित रूप से हमारे लिए रूटिंग जोड़ दी है, इसलिए हमें अपने राउटर कॉन्फ़िगरेशन में घटक जोड़ने के अलावा कुछ भी सेट करने की आवश्यकता नहीं है। |_+_| . खोलें फ़ाइल और समाचार घटक को निम्नानुसार आयात करके शुरू करें:

उन्नत कोणीय साक्षात्कार प्रश्न

HttpClient

इसके बाद, घटक को |_+_| . में जोड़ें सरणी:

src/app/api.service.ts

अब आप अपने घटक को |_+_| . से एक्सेस कर सकते हैं पथ।

निष्कर्ष

इस ट्यूटोरियल में, हमने एक साधारण समाचार एप्लिकेशन बनाने के लिए एंगुलर 9 का उपयोग किया है जो |_+_| का उपयोग करके JSON REST API से डेटा पुनर्प्राप्त करता है। की विधि |_+_|. हमने देखा है कि |_+_| . द्वारा लौटाए गए आरएक्सजेएस ऑब्जर्वेबल की सदस्यता कैसे लें विधि और उपयोग कैसे करें |_+_| टेम्प्लेट में प्राप्त डेटा पर पुनरावृति करने का निर्देश। अंत में, हमने देखा कि कैसे हम एंगुलर सीएलआई v9 का उपयोग करके एक एंगुलर 9 प्रोजेक्ट बना सकते हैं, घटकों और सेवाओं को कैसे उत्पन्न करें और घटक के लिए रूटिंग को कैसे कॉन्फ़िगर करें।

#कोणीय #जावास्क्रिप्ट #बाकी #एपीआई #वेब-विकास

HttpClient का उपयोग करके कोणीय 9 में REST API सर्वर को GET अनुरोध कैसे भेजें?