Theory
Front end અને back end ભેગાં થાય છે
તમારી પાસે Angular નું registration form છે અને Express નું API પણ છે. હવે એ બંનેને જોડો: વિદ્યાર્થી form જમા કરે ત્યારે એનો data server સુધી પહોંચવો જોઈએ, ત્યાં પ્રક્રિયામાં જવો જોઈએ, અને response પાછો આવવો જોઈએ. આ આવજા જ full-stack app નું ધબકતું હૃદય છે.
આ પાઠ બંને અડધિયાંને જોડે છે: Angular form નો data JSON તરીકે post કરે છે, Express એને request ના body માંથી વાંચે છે અને જવાબ આપે છે, અને Angular એ જવાબ સંભાળે છે. આ સ્વચ્છ રીતે કરતાં આવડી જાય, પછી તમે કોઈ પણ form ને કોઈ પણ API સાથે જોડી શકો. આ પાઠ unit 1 અને unit 2 ને સાથે લાવે છે.
Theory
આખી આવજા
જમા થયેલા registration ની આખી સફર આ રહી:
1. Angular નું form data ને form.value તરીકે ભેગો કરે છે (સાદો object).
2. Angular નું HttpClient એને મોકલે છે: http.post('/api/register', form.value) એક Observable પાછું આપે છે.
3. Data HTTP પર request ના body માં JSON તરીકે જાય છે.
4. Express express.json() middleware વાપરીને એને req.body તરીકે આપે છે; handler એને પ્રક્રિયામાં લે છે (તપાસે છે, સાચવે છે) અને res.json(...) વડે જવાબ આપે છે.
5. પાછા Angular માં, તમે Observable ને subscribe કરીને response મેળવો છો અને પ્રતિભાવ આપો છો (સફળતાનો સંદેશો બતાવવો, બીજે લઈ જવું).
Angular મોકલે છે અને subscribe કરે છે; Express વાંચે છે અને જવાબ આપે છે.
Practical
Angular: form post કરવું અને response સંભાળવો
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 વાંચવું અને જવાબ આપવો
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
જે ટુકડા બરાબર બેસવા જોઈએ
આ આવજા ચાલે એ માટે થોડી બાબતો મેળમાં હોવી જોઈએ. Angular નું URL ચાલુ Express server તરફ તકાયેલું હોવું જોઈએ (સાચો host અને port). Express માં express.json() ચાલુ હોવું જોઈએ, નહીં તો req.body undefined આવશે. Front end અને API જુદા origins પર હોવાથી server પર CORS ચાલુ હોવું જોઈએ (આગલો પાઠ). અને Angular એ subscribe કરવું જ પડે, કારણ કે HttpClient નું Observable subscribe ન થાય ત્યાં સુધી કશું કરતું નથી.
'મારું form server સુધી પહોંચતું જ નથી' એવી મોટા ભાગની ભૂલો આ ચારમાંથી એક હોય છે: ખોટું URL, express.json() ખૂટતું હોવું, CORS ખૂટતું હોવું, કે subscribe કરવાનું ભૂલી જવું. એ જ ક્રમમાં તપાસો.
Quiz
Angular માં તમે this.http.post('/api/register', form.value) બોલાવો છો, પણ કશું થતું નથી, કોઈ request જ જતું નથી. એનું સૌથી સંભવિત કારણ શું છે?
- Express બહુ ઝડપી છે
- તમે પાછા મળેલા Observable ને subscribe કર્યું નથી; HttpClient નાં requests subscribe ન થાય ત્યાં સુધી ચાલતાં નથી
- form.value હંમેશા ખાલી જ હોય છે
- POST data મોકલી શકતું નથી
Show the answer
તમે પાછા મળેલા Observable ને subscribe કર્યું નથી; HttpClient નાં requests subscribe ન થાય ત્યાં સુધી ચાલતાં નથી
Angular ની HttpClient ની methods ઠંડું Observable પાછું આપે છે, જે તમે subscribe ન કરો ત્યાં સુધી request મોકલતું જ નથી. તમે http.post(...) બોલાવો પણ કદી .subscribe(...) ન કરો, તો કોઈ request બહાર જતું નથી, અને એ લક્ષણ સાથે બરાબર બંધબેસે છે. વિકલ્પ A નિરર્થક છે; server ની ઝડપ request મોકલાતું અટકાવતી નથી. વિકલ્પ C ખોટો છે: form.value માં reactive form નો data હોય છે (સિવાય કે form ખરેખર ખાલી હોય, જે જુદો પ્રશ્ન છે), અને ખાલી body હોય તો પણ request તો મોકલાય જ. વિકલ્પ D ખોટો છે: body માં data મોકલવા માટેની method તો બરાબર POST જ છે. જાણીતી ભૂલ આ છે: HttpClient નો call subscribe થાય ત્યારે જ ચાલે છે, એટલે હંમેશા subscribe કરો (અથવા async pipe વાપરો).
Think first
Angular અને Express વચ્ચે JSON આટલું સરળતાથી કેમ ચાલે છે?
Form નો data JSON તરીકે જાય છે અને JSON તરીકે જ પાછો આવે છે, અને બંને બાજુ એને સહેલાઈથી સંભાળે છે. અહીં JSON આટલું સ્વાભાવિક કેમ બંધબેસે છે? વિચારીને પછી tap કરો.
Show the answer
કારણ કે JSON એ JavaScript નું પોતાનું data નું સ્વરૂપ છે, અને Angular (TypeScript, જે JavaScript નું વિસ્તરણ છે) તથા Express (Node પરનું JavaScript), બંને એને વગર મહેનતે સમજે છે, એટલે data એમની વચ્ચે લગભગ કોઈ ભાષાંતર વગર ફરે છે.
JSON (JavaScript Object Notation) અક્ષરશઃ JavaScript objects પરથી ઘડાયેલું છે: { name: 'Riya', event: 'Robotics' } એ JS object પણ છે અને માન્ય JSON પણ. Angular ની બાજુએ form.value પહેલેથી જ JS કે TS નો object છે, અને તમે એને post કરો ત્યારે HttpClient એને આપોઆપ JSON માં ફેરવે છે; Express ની બાજુએ express.json() middleware આવેલા JSON ને સીધું જ પાછું JS object બનાવીને req.body પર મૂકે છે, વાપરવા તૈયાર.
Response એ જ સફર ઊંધી દિશામાં કરે છે: res.json(...) JS object ને JSON માં ફેરવે છે, અને Angular એને પાછો object બનાવીને તમારા subscribe ના callback ને આપે છે. એટલે આખી આવજા દરમિયાન તમે ખરેખર તો સાદા objects જ આમતેમ મોકલો છો, અને JSON ફક્ત વહન વખતનું સ્વરૂપ છે, અને કોઈ પણ બાજુએ કઢંગું હાથે કરવાનું રૂપાંતર કરવું પડતું નથી.
Full-stack JavaScript આટલું સંગઠિત લાગે છે એનું આ મોટું કારણ છે: front end, વહનનું સ્વરૂપ, back end, અને MongoDB જેવો JSON ને અનુકૂળ database, બધા data નો એક જ આકાર વહેંચે છે. એની સામે એવા stacks મૂકી જુઓ જ્યાં તમારે Java objects, JSON અને SQL rows વચ્ચે હાથે મેળ બેસાડવો પડે. છેડેથી છેડા સુધી data નું એક જ મોડેલ હોવું, એ જ Angular અને Express નું જોડાણ આટલું સરળ બનાવે છે. Data નો એક જ આકાર, આખા રસ્તે.
Summary
Key takeaways
- Front end ને back end સાથે જોડવું: Angular form નો data JSON તરીકે post કરે, Express વાંચીને જવાબ આપે, Angular જવાબ સંભાળે.
- Angular નું HttpClient request મોકલે છે (http.post(url, form.value)) અને Observable પાછું આપે છે.
- Data request ના body માં JSON તરીકે જાય છે; Express એને express.json() દ્વારા req.body તરીકે આપે છે.
- Express એને પ્રક્રિયામાં લે છે અને res.json() તથા status સાથે જવાબ આપે છે; Angular response મેળવવા subscribe કરે છે.
- ચાર બાબતો મેળમાં હોવી જોઈએ: સાચું URL, express.json() ચાલુ, CORS ચાલુ, અને Angular નું subscribe કરવું.
- HttpClient નાં requests subscribe ન થાય ત્યાં સુધી ચાલતાં નથી, જે જાણીતી ભૂલ છે.
- યાદ રાખવાની કડી: Angular મોકલે અને subscribe કરે, Express req.body વાંચે અને જવાબ આપે, અને બંને દિશામાં JSON.