Theory
Front End Back End से मिलता है
आपके पास एक Angular registration form और एक Express API है। अब इन्हें connect कीजिए: जब एक student form submit करता है, इसका data server तक travel करना पड़ता है, process होना पड़ता है, और एक response वापस आना पड़ता है। यह round trip एक full-stack app का beating heart है।
यह lesson दोनों halves को साथ wire करता है: Angular form का data JSON की तरह post करता है, Express इसे request body से read करता है और respond करता है, और Angular reply को handle करता है। एक बार आप यह cleanly कर सकते हैं, आप किसी भी form को किसी भी API से connect कर सकते हैं। यह units 1 और 2 को साथ लाता है।
Theory
Round Trip
यहाँ एक submitted registration की पूरी journey है:
1. Angular form data को form.value (एक plain object) की तरह collect करता है।
2. Angular का HttpClient इसे भेजता है: http.post('/api/register', form.value) एक Observable return करता है।
3. Data HTTP के over request body में JSON की तरह travel करता है।
4. Express, express.json() middleware इस्तेमाल करते हुए, इसे req.body की तरह expose करता है; handler इसे process करता है (इसे save करता है, validate करता है) और res.json(...) से reply करता है।
5. वापस Angular में, आप response receive करने और react करने (एक success message दिखाना, कहीं और navigate करना) के लिए Observable को subscribe करते हैं।
Angular send और subscribe करता है; Express read और respond करता है।
Practical
Angular: Form Post करना और Response Handle करना
constructor(private http: HttpClient) {}
submit() {
if (this.form.invalid) { this.form.markAllAsTouched(); return; }
this.http.post('http://localhost:3000/api/register', this.form.value)
.subscribe({
next: (res) => console.log('Server said:', res), // success
error: (err) => console.error('Failed:', err), // failure
});
}
// form.value is sent as JSON; subscribe receives the server's JSON reply.Practical
Express: Body पढ़ना और Respond करना
app.use(express.json()); // so req.body is parsed from the JSON sent
app.post('/api/register', (req, res) => {
const registration = req.body; // the form.value Angular sent
// ...validate and save it (to MongoDB, next lesson)...
res.status(201).json({ message: 'Registered', data: registration });
});
// Angular's subscribe(next) receives this JSON response.This example runs in Gri-Learn on the web, where you can edit it and see the output.
Formula
जिन Pieces को Line Up होना पड़ता है
Round trip काम करने के लिए, कुछ चीज़ें match होनी चाहिए। Angular URL को running Express server (right host और port) की तरफ point करना पड़ता है। Express में express.json() enabled होना पड़ता है, नहीं तो req.body undefined होगा। चूँकि front end और API अलग origins पर हैं, server पर CORS enabled होना पड़ता है (previous lesson)। और Angular को subscribe करना पड़ता है, एक HttpClient Observable subscribed होने तक कुछ नहीं करता।
ज़्यादातर 'मेरा form server तक नहीं पहुँचता' bugs इन चार में से एक हैं: wrong URL, missing express.json(), missing CORS, या subscribe करना भूलना। इस order में इन्हें check कीजिए।
Quiz
Angular में, आप this.http.post('/api/register', form.value) call करते हैं पर कुछ नहीं होता, कोई request नहीं भेजी जाती। सबसे likely cause क्या है?
- Express बहुत fast है
- आपने returned Observable को subscribe नहीं किया; HttpClient requests subscribed होने तक fire नहीं होतीं
- form.value हमेशा empty होता है
- POST data भेज नहीं सकता
Show the answer
आपने returned Observable को subscribe नहीं किया; HttpClient requests subscribed होने तक fire नहीं होतीं
Angular के HttpClient methods एक cold Observable return करते हैं जो आपके इसे subscribe करने तक request NOT भेजता। अगर आप http.post(...) call करते हैं पर कभी .subscribe(...) नहीं करते, कोई request बाहर नहीं जाती, जो symptom से exactly match करता है। Option A nonsense है; server speed एक request भेजे जाने को नहीं रोकती। Option C wrong है: form.value reactive form का data hold करता है (जब तक form truly empty न हो, जो एक अलग issue है), और किसी भी case में एक empty body भी एक request SEND करेगा। Option D wrong है: POST precisely body में data भेजने का method है। Classic gotcha: एक HttpClient call सिर्फ़ subscribed होने पर execute होता है, तो हमेशा subscribe कीजिए (या async pipe इस्तेमाल कीजिए)।
Think first
Angular और Express के बीच JSON इतनी Smoothly क्यों काम करता है?
Form data JSON की तरह बाहर जाता है और JSON की तरह वापस आता है, और दोनों sides इसे easily handle करते हैं। यहाँ JSON इतना natural fit क्यों है? फिर tap कीजिए।
Show the answer
क्योंकि JSON JavaScript का native data format है, और Angular (TypeScript, JavaScript का एक superset) और Express (Node पर JavaScript) दोनों इसे effortlessly बोलते हैं, तो data इनके बीच लगभग बिना किसी translation के move करता है। JSON (JavaScript Object Notation) literally JavaScript objects पर modelled है: { name: 'Riya', event: 'Robotics' } एक JS object और valid JSON दोनों है। Angular side पर, form.value पहले से एक JS/TS object है, और HttpClient जब आप इसे post करते हैं इसे automatically JSON में serialise करता है; Express side पर, express.json() middleware incoming JSON को सीधे वापस req.body पर एक JS object में parse करता है, इस्तेमाल के लिए ready। Response वही trip reverse में करता है: res.json(...) एक JS object को JSON में serialise करता है, और Angular इसे वापस एक object में deserialise करता है जो आपका subscribe callback receive करता है। तो पूरी round trip के across, आप essentially plain objects पास कर रहे हैं, JSON on-the-wire form की तरह, और किसी भी side को awkward manual conversion नहीं करनी पड़ती। यही major reason है full-stack JavaScript इतना cohesive feel करता है: front end, transport format, back end, और यहाँ तक कि MongoDB जैसा एक JSON-friendly database सब data की same shape share करते हैं। इसे उन stacks के contrast में सोचिए जहाँ आपको हाथ से, मान लीजिए, Java objects और JSON और SQL rows के बीच map करना पड़ता है। End to end same shape of data यही है जो Angular-Express connection को इतना smooth बनाता है। Data की एक shape, पूरे रास्ते।
Summary
Key takeaways
- Front end को back end से connect करना: Angular form data को JSON की तरह post करता है, Express पढ़ता और respond करता है, Angular reply handle करता है।
- Angular का HttpClient request भेजता है (http.post(url, form.value)) और एक Observable return करता है।
- Data request body में JSON की तरह travel करता है; Express इसे express.json() से req.body की तरह expose करता है।
- Express इसे process करता है और res.json() और एक status से reply करता है; Angular response receive करने के लिए subscribe करता है।
- चार चीज़ें line up होनी चाहिए: correct URL, express.json() enabled, CORS enabled, और Angular subscribing।
- HttpClient requests subscribed होने तक fire नहीं होतीं, एक classic gotcha।
- Memory hook: Angular send और subscribe करता है, Express req.body पढ़ता है और respond करता है, दोनों तरफ JSON।