Angular Services and Dependency Injection: creating and injecting services, using HttpClient to call REST APIs; Observables with RxJS

📖 Theory

Front end ને ખરા data સાથે જોડવું

FestConnect નું Angular UI બંધાઈ ગયું છે, પણ એ નકલી events બતાવે છે. હવે એને ખરા back end સાથે જોડવાનો સમય છે, એટલે કે Unit 1 વાળા MongoDB પર ચાલતા API સાથે. એનો અર્થ એ કે Angular માંથી HTTP requests કરવી.

Angular આ કામ સફાઈથી કરે છે: service માં data મંગાવવાનું logic રહે છે, dependency injection એને કોઈ પણ component ને પૂરું પાડે છે, અને HttpClient request કરે છે. પણ પરિણામ સાદી value નથી, અને Promise પણ નથી: એ Observable છે, જે RxJS નામની library માંથી આવે છે. Observables સમજવા એ Angular ના કોયડાનો છેલ્લો ટુકડો છે, અને આ પાઠ આખા unit ને એકસાથે બાંધે છે: front end નું back end સાથે વાત કરવું.

📖 Theory

Services મંગાવે છે, DI પૂરું પાડે છે

Data મંગાવવાનું logic service માં હોવું જોઈએ, components માં વેરવિખેર નહીં. Service એ @Injectable class છે; તમે એમાં Angular નું HttpClient inject કરો છો અને REST endpoints બોલાવો છો:

• http.get(url) વાંચે છે, http.post(url, body) બનાવે છે, ઉપરાંત put અને delete

જે પણ component ને events જોઈએ તે પોતાના constructor માં એ service જાહેર કરે છે (dependency injection), અને Angular એને સહિયારો instance આપે છે. એટલે એક જ EventService આખી app ને સેવા આપે છે: concepts વાળા પાઠમાં જોયેલો DI નો ફાયદો હવે ખરું કામ કરે છે. Component service ને પૂછે છે, service API ને પૂછે છે, અને data પાછો વહી આવે છે. HTTP ને service માં રાખવું (components માં નહીં) એ સ્વચ્છ અને પરીક્ષણક્ષમ Angular રીત છે.

⌨️ Practical

HttpClient વાળું service, અને subscribe કરતું component

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class EventService {
  constructor(private http: HttpClient) {}   // DI HttpClient પૂરું પાડે છે

  getEvents(): Observable<any[]> {
    return this.http.get<any[]>('/api/events');   // Observable પાછું આપે છે
  }
}

// Component service વાપરે છે અને Observable ને SUBSCRIBE કરે છે:
export class EventsComponent implements OnInit {
  events: any[] = [];
  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.getEvents().subscribe(data => {
      this.events = data;    // જવાબ આવે ત્યારે ચાલે છે
    });
  }
}

📖 Theory

Observables: subscribe કરવાના streams

http.get() Observable પાછું આપે છે, data પોતે નહીં. Observable (RxJS માંથી) એ asynchronous values નો stream છે, જેને તમારે subscribe કરવો પડે:

this.eventService.getEvents().subscribe(data => this.events = data);

Subscribe નું callback જવાબ આવે ત્યારે ચાલે છે. એના મુખ્ય ગુણ:

• આળસુ: તમે subscribe ન કરો ત્યાં સુધી કંઈ થતું નથી (Promise થી ઊલટું, જે તરત જ ચાલવા માંડે છે)
• સમય જતાં અનેક values આપી શકે છે, ફક્ત એક જ વાર નહીં
• operators (map, filter) વડે બદલી શકાય છે અને રદ પણ કરી શકાય છે

React ના fetch(...).then(data => ...) (Promise) ની સરખામણીએ Angular નું Observable વધુ શક્તિશાળી છે અને values ના stream માટે બનેલું છે, પણ રોજિંદો વપરાશ એ જ છે: request કરો, અને data આવે ત્યારે એને સંભાળો. (async pipe તો template માં તમારા વતી subscribe પણ કરી શકે છે.)

🧩 Quiz

HttpClient નું http.get('/api/events') એક Observable પાછું આપે છે. એમાંથી ખરો data તમે કઈ રીતે મેળવો છો?

1. Data તો http.get() માંથી તરત જ પાછો મળી જાય છે
2. તમે Observable ને SUBSCRIBE કરો છો: .subscribe(data => ...), અને જવાબ આવે ત્યારે એ callback ચાલે છે
3. તમે સીધું Observable.value વાંચો છો
4. Observables HTTP ના જવાબ લઈ જઈ શકતાં નથી

💭 Think first

Observable સામે Promise: Angular Observables કેમ વાપરે છે?

React માં data Promise થી મંગાવાતો હતો (fetch().then()). Angular Observables વાપરે છે. Promise જે નથી આપતું એવું Observable શું આપે છે? વિચારીને પછી tap કરો.

⚠️ Watch out

Service અને Observable ના ફાંદા

Subscribe કરવાનું ભૂલી જવું: Observable આળસુ છે; subscribe (કે async pipe) વગર HTTP request કદી થતી જ નથી.

Components માં HTTP logic: એને SERVICE માં મૂકો અને service ને inject કરો; components હળવાં રાખો.

Unsubscribe ન કરવું: લાંબું ટકતાં subscriptions થી memory leak થઈ શકે; ngOnDestroy માં unsubscribe કરો (અથવા async pipe વાપરો, જે તમારા વતી unsubscribe કરી લે છે).

Observable ને Promise ના return જેવું ગણવું: એની value તમે synchronous રીતે વાંચી શકતા નથી; એને subscribe માં જ સંભાળો.

HttpClientModule કે provideHttpClient ખૂટવું: HttpClient પૂરું પાડેલું હોવું જોઈએ, નહીં તો injection નિષ્ફળ જાય છે.

📖 Theory

Unit 3 પૂરો: Angular stack

FestConnect હવે બે પૂરેપૂરા આધુનિક stacks માં હાજર છે: React વાળું front end અને Angular વાળું front end, અને બંને MongoDB વાળા back end પર. તમે ઉદ્યોગનાં બે અગ્રણી frameworks ને જાતે સરખાવ્યાં છે: React ની ઓછામાં ઓછી library અને hooks, અને Angular નું આખું framework જેમાં TypeScript, DI, directives, pipes, forms અને Observables આવે છે. Unit 4 જુદો છે: એ Indian Knowledge System નો ગણિતનો વિષય (લીલાવતી) છે, જે તથ્યના આધારે ભણાવાય છે. આધુનિક web નું કામ પૂરું થયું; IKS વાળો unit અલગ ઊભો છે.

✅ Summary

Key takeaways

• Services (@Injectable classes) ફરી વાપરી શકાય એવું logic અને data સાચવે છે (જેમ કે events મંગાવવા) અને dependency injection દ્વારા components ને પૂરાં પડાય છે.
• HttpClient REST APIs ને HTTP requests કરે છે: http.get, post, put અને delete; HTTP નું logic services માં રાખો, components માં નહીં.
• HttpClient સીધો data નહીં પણ Observable (RxJS માંથી) પાછું આપે છે.
• Observable આળસુ stream છે: request શરૂ કરવા અને data આવે ત્યારે મેળવવા માટે subscribe કરો.
• Observables સમય જતાં values આપી શકે છે, operators (map, filter) વડે બદલી શકાય છે અને રદ પણ કરી શકાય છે: એટલે Promise કરતાં વધુ શક્તિશાળી.
• Leak ટાળવા ngOnDestroy માં unsubscribe કરો કે async pipe વાપરો; React નું fetch().then() એ Promise વાળી સમાંતર રીત છે.
• યાદ રાખવાની કડી: વહેંચવા માટે service અને DI, બોલાવવા માટે HttpClient, અને data મેળવવા માટે Observable ને subscribe.