Hindi (हिंदी) translation by Shaurya (you can also view the original English article)
पिछले ट्यूटोरियल में, आपने देखा कि Angular रूटिंग का उपयोग करके Angular वेब एप्लीकेशंस में रूटिंग को कैसे लागू किया जाए।
इस ट्यूटोरियल में, आप सीखेंगे की Angular HttpClient
का उपयोग करते हुए एक Angular एप्लीकेशन से वेब API और सर्विसेज के साथ कम्युनिकेट कैसे करें।
Angular HttpClient
आप ब्राउजर से सर्वर-साइड API कॉल करने के लिए XMLHttpRequest(XHR)
ऑब्जेक्ट का उपयोग करते हैं। XHR
ऑब्जेक्ट पूरे पेज को फिर से लोड किए बिना वेब पेज के एक हिस्से को अपडेट करना संभव बनाता है। वेब पेज लोड होने के बाद आप सर्वर से डाटा भेज सकते हैं और प्राप्त कर सकते हैं।
Angular HttpClient
XHR
ऑब्जेक्ट के लिए एक रैपर (wrapper) प्रदान करता है, जिससे Angular एप्लीकेशन से API कॉल करना आसान हो जाता है।
आधिकारिक दस्तावेजों से:
HttpClient
के साथ,@angular/common/http
, ब्राउज़र द्वारा एक्सपोज़ किये गएXMLHttpRequest
इंटरफ़ेस के टॉप पर बनायीं गयी Angular एप्लीकेशन के साथ HTTP फंक्शनैलिटी के लिए एक सरल API प्रदान करता है।HttpClient
के कुछ अतिरिक्त लाभों में शामिल हैं टेस्ट करने की क्षमता का सपोर्ट, रिक्वेस्ट और रिस्पांस ऑब्जेक्ट के स्ट्रांग टाइप, रिक्वेस्ट रिस्पांस इंटरसेप्टर का सपोर्ट, और Observables पर आधारित apis के जरिए बेहतर एरर को हैंडल करना।
शुरू करते हैं
आप ट्यूटोरियल सीरीज के पहले भाग से सोर्स कोड को क्लोन करके शुरू करेंगे।
git clone https://github.com/royagasthyan/AngularComponent.git
एक बार जब आपके पास सोर्स कोड होता है, तो प्रोजेक्ट डायरेक्टरी में नेविगेट करें और आवश्यक डिपेंडेंसीज को इंस्टॉल करें।
cd AngularComponent npm install
डिपेंडेंसीज के इंस्टॉल हो जाने के बाद, निम्न कमांड टाइप करके एप्लीकेशन शुरू करें:
ng serve
आपके पास http://localhost:4200/ पर चलने वाला एक एप्लीकेशन होना चाहिए।
अपने Angular प्रोजेक्ट में HttpClient
मॉड्यूल का उपयोग करने के लिए, आपको इसे पहले अपने app.module.ts
फाइल में इंपोर्ट करना होगा।
प्रोजेक्ट डायरेक्टरी से, src/app/app.module.ts
पर जाएं। app.module.ts
फाइल में, HttpClientModule
को इंपोर्ट करें।
import {HttpClientModule} from '@angular/common/http';
imports सेक्शन के अंदर HttpClientModule
को इंक्लूड करें।
imports: [ BrowserModule, FormsModule, HttpClientModule ]
यहां आप देख सकते हैं कि app.module.ts
फाइल कैसी दिखती है।
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { CalcComponent } from './calc/calc.component' import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, CalcComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
अब आप अपने किसी भी Angular कॉम्पोनेंट में HttpClientModule
को इंपोर्ट करके अपनी पूरी Angular एप्लीकेशन में इसका प्रयोग करने योग्य हो चुके हैं।
Angular कॉम्पोनेंट बनाना
आइए Angular कॉम्पोनेंट बनाकर शुरुआत करते हैं। src/app
फोल्डर के अंदर get-data
नाम का एक फोल्डर बनाएं। get-data.component.ts
नाम की एक फाइल बनाएं और उसमें निम्नलिखित कोड को जोड़ें:
import { Component } from '@angular/core'; @Component({ selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'] }) export class GetDataComponent { constructor(){ } }
get-data.component.html
नाम की एक फाइल बनाएं, जो get-data
कॉम्पोनेंट के लिए टेंप्लेट फाइल के रूप में काम करेगी। get-data.component.html
फाइल के अंदर निम्नलिखित कोड को जोड़ें:
<h3> Get Data Component </h3>
GetDataComponent
को src/app/app.module.ts
फाइल में इंपोर्ट करें।
import { GetDataComponent } from './get-data/get-data.component';
app.module.ts
के अंदर ngModule
में GetDataComponent
को जोड़ें।
declarations: [ AppComponent, CalcComponent, GetDataComponent ]
यहां बताया गया है कि मॉडिफाई हो चुकी app.module.ts
फाइल अब कैसी दिखती है:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { CalcComponent } from './calc/calc.component'; import { GetDataComponent } from './get-data/get-data.component'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, CalcComponent, GetDataComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.html
फाइल में get-data
कॉम्पोनेंट सिलेक्टर को जोड़ें। यहां देख सकते हैं कि यह कैसी दिखती है।
<div style="text-align:center"> <get-data></get-data> </div>
ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर शुरू करें। आप एप्लीकेशन लोड होने पर get-data
कॉम्पोनेंट को देख पाएंगे।



Angular HttpClient मॉड्यूल का उपयोग करना
API कॉल करने के लिए आप HttpClient
मॉड्यूल का उपयोग करेंगे। आइए अलग से एक फाइल बनाएं जिसमें हम Angular सर्विस को बनाएंगे, जिससे हम API कॉल कर सकें। get-data.service.ts
नाम की एक फाइल बनाएं। निम्नलिखित कोड को get-data.service.ts
फाइल के अंदर डाल दें:
import { Injectable } from '@angular/core'; @Injectable() export class GetDataService { constructor() { } }
HttpClient
मॉड्यूल को ऊपर दी गई GetDataService
में इंपोर्ट करें।
import { HttpClient } from '@angular/common/http';
GetDataService
कंस्ट्रक्टर में HttpClient
को शुरू करें।
constructor(private http: HttpClient) { }
एक call_api
नाम का मेथड बनाएं जिससे आप GetDataService
फाइल के अंदर GET API कॉल बना सके। API कॉल करने के लिए आप एक वर्ड सिनोनिम फाइंडर API का उपयोग करेंगे। यहां आप देख सकते हैं कि call_api
मेथड किस तरह दिखता है:
call_api(term) { return this.http.get(this.url + term); }
यहां बताया गया है कि get-data.service.ts
फाइल कैसी दिखती है:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class GetDataService { url: string constructor(private http: HttpClient) { this.url = 'https://api.datamuse.com/words?ml=' } call_api(term) { return this.http.get(this.url + term); } }
जैसे कि ऊपर दी गई GetDataService
क्लास में देखा गया है, call_api
मेथड एक observable को रिटर्न करता है जिसमें आप GetDataComponent
से सब्सक्राइब कर सकते हैं।
GetDataComponent
के कंस्ट्रक्टर से सब्सक्राइब करने के लिए, आप GetDataComponent
के अंदर GetDataService
को इंपोर्ट करना होगा।
import { GetDataService } from './get-data.service';
GetDataService
को GetDataComponent
के प्रोवाइडर के रूप में डिफाइन करें।
@Component({ selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], providers:[ GetDataService ] })
आइए GetDataComponent
के कंस्ट्रक्टर मेथड से सब्सक्राइब करें।
constructor(private dataService: GetDataService){ this.dataService.call_api('hello').subscribe(response => { console.log('Response is ', response); }) }
यहां आप देख सकते हैं कि get-data.component.ts
फाइल किस तरह दिखती है:
import { Component } from '@angular/core'; import { GetDataService } from './get-data.service'; @Component({ selector: 'get-data', templateUrl: 'get-data.component.html', styleUrls: ['get-data.component.css'], providers:[ GetDataService ] }) export class GetDataComponent { constructor(private dataService: GetDataService){ this.dataService.call_api('hello').subscribe(response => { console.log('Response is ', response); }) } }
ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर को रीस्टार्ट करें। आप ब्राउज़र के कंसोल में लॉग-इन करके परिणाम देख सकते हैं।
ऊपर दिए गए कोड में, आपने देखा कि Angular HttpClient
का उपयोग करके GET API को रिक्वेस्ट कैसे किया जाता है।
POST रिक्वेस्ट करने के लिए, आपको http.post
मेथड का उपयोग करना होगा।
this.http.post(url, {key : value});
जैसा कि ऊपर दिए कोड में आपने देखा है, आप को API पोस्ट URL और डाटा को दूसरे पैरामीटर के रूप में पोस्ट करना पड़ेगा।
API कॉल करते समय एरर्स को हैंडल करना
जब भी आप एक API कॉल करते हैं, तो एक एरर का सामना करने की बराबर संभावना बनी रहती है। API कॉल करते समय एरर्स को संभालने के लिए, आपको response
हैंडलर के साथ subscribe
मेथड में एरर हैंडलर जोड़ना होगा।
GetDataComponent
में परिवर्तित किए हुए कोड कुछ इस तरह दिखते हैं:
constructor(private dataService: GetDataService){ this.dataService.call_api('hello').subscribe(response => { console.log('Response is ', response); }, err => { console.log('Something went wrong ', err); }) }
एक ऐसा URL बनाने के लिए जो मौजूद ही नहीं है get-data.service.ts
फाइल में url
वेरिएबल को मॉडिफाई करें, जो API कॉल करते समय एक एरर का कारण होगा।
this.url = 'https://ai.datamuse.com/words?ml='
ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर को रीस्टार्ट करें। ब्राउज़र कंसोल की जांच करें और आपके पास एरर हैंडलर मेथड और एरर लॉग कॉल किया हुआ होगा।
एरर ऑब्जेक्ट में एरर के बारे में सभी डिटेल्स होती हैं जैसे एरर कोड, एरर मैसेज, आदि। यह API कॉल के साथ क्या गलत हुआ है, इसकी गहराई से जानकारी देता है। यहां आप देख सकते हैं कि ब्राउजर कंसोल लॉग कैसा दिखता है:



जैसे कि ऊपर कंट्रोल लॉग में देखा गया है, एरर ऑब्जेक्ट से सभी एरर डीटेल्स प्राप्त किए जा सकते हैं।
सब कुछ खत्म करते हुए
इस ट्यूटोरियल में, आपने देखा कि API कॉल करने के लिए Angular HttpClientModule
का उपयोग कैसे करें। आपने सर्वर API को GET और POST रिक्वेस्ट करने के लिए HttpClientModule
को इंपोर्ट करने का तरीका सीखा। API कॉल करते समय आपने देखा कि एरर को कैसे हैंडल करना है।
Angular HttpClientModule
का प्रयोग करके API कॉल किस प्रकार करें यह सीखने का आपका अनुभव कैसा रहा? नीचे कमेंट में अपने विचारों को हमें बताएं।
इस ट्यूटोरियल से सोर्स कोड आपको GitHub में मिल जाएंगे।