Concepts and Characteristics of Angular: TypeScript overview, component-based architecture; Modules, Services, Dependency Injection

📖 Theory

React એક library હતી; Angular તો આખી કારીગરશાળા છે

તમે FestConnect નું front-end React માં બનાવ્યું, અને પછી routing, forms તથા data લાવવા માટે એની આસપાસ બીજાં સાધનો ગોઠવ્યાં, કારણ કે React એક LIBRARY છે: એ UI સંભાળે છે અને બાકીનું તમારા પર છોડી દે છે.

Angular સાવ ઊલટો રસ્તો લે છે: એ આખું FRAMEWORK છે જે તમને બધું જ આપે છે, એટલે કે routing, forms, HTTP અને dependency injection, એ બધું એક જ ચોક્કસ મત ધરાવતા બંડલમાં, અને એ TypeScript માં લખાયેલું છે. આ unit માં FestConnect ને Angular માં ફરી બનાવવામાં આવે છે, જેથી તમે ઉદ્યોગના આ બે અગ્રણીઓને સરખાવી શકો. શરૂઆત મોટા વિચારોથી થાય છે: TypeScript, component ની રચના, અને services તથા dependency injection વાળી એ વ્યવસ્થા જે Angular ની ઓળખ છે.

📖 Theory

Framework સામે library, અને TypeScript

Angular framework છે, React library છે, અને આ ભેદ ખરેખરો છે:

• library (React) એટલે એવો code જેને તમે બોલાવો છો: કાબૂ તમારા હાથમાં રહે છે અને તમે ટુકડા ઉમેરતા જાઓ છો
• framework (Angular) આખી રચના આપે છે અને તમારા code ને પોતે બોલાવે છે: વધુ તૈયાર મળે છે, પણ વધુ રીતરિવાજ પાળવા પડે છે

Angular TypeScript માં લખાયેલું છે અને એ જ વાપરે છે: એટલે કે JavaScript વત્તા static types, classes, interfaces અને decorators, જે છેવટે JavaScript માં compile થાય છે. Types ભૂલોને COMPILE વખતે જ પકડી પાડે છે (ખોટી જોડણીવાળી property, ખોટો argument), run વખતે નહીં, એટલે કે એ જ સલામતી જે તમને Java અને C# માં ગમતી હતી. ત્યાં static typing ગમ્યું હોય, તો TypeScript એ જ વસ્તુ web પર લાવે છે.

⌨️ Practical

એક component અને એક service (Angular નો ઘાટ)

// SERVICE: ફરી વાપરી શકાય એવી logic કે data, કોઈ view સાથે બંધાયેલી નહીં
@Injectable({ providedIn: 'root' })
export class EventService {
  getEvents(): string[] {
    return ['Garba Night', 'Coding Contest'];
  }
}

// COMPONENT: class વત્તા template, જેને DI વડે service મળે છે
@Component({
  selector: 'app-events',
  template: '<h2>{{ title }}</h2>'
})
export class EventsComponent {
  title = 'FestConnect Events';

  // Dependency Injection: Angular અહીં service પૂરું પાડે છે.
  // component આવું કરતું નથી: new EventService()
  constructor(private eventService: EventService) {}
}

📖 Theory

Components, modules, services, DI

Angular એક app ને 4 building blocks વડે ગોઠવે છે:

• Components: UI ના ટુકડા, જેમાંનો દરેક HTML TEMPLATE અને CSS વાળો એક TypeScript CLASS છે: app એમનું વૃક્ષ છે (React ના components જેવું જ)
• Modules (NgModule): સંબંધિત components અને services ને ભેગાં કરતાં પાત્રો; મૂળ AppModule app ને bootstrap કરે છે
• Services: logic કે data સાચવતા, ફરી વાપરી શકાય એવા classes (જેમ કે events લાવવા), જે કોઈ view સાથે બંધાયેલા હોતા નથી
• Dependency Injection (DI): component પોતે service બનાવે એને બદલે, Angular એ service બનાવે છે અને માગનારા દરેક component ને (constructor વડે) પૂરું પાડે છે

DI એ Angular નો ઓળખસમો વિચાર છે: component જાહેર કરે છે કે એને શું જોઈએ છે (constructor(private eventService: EventService)) અને Angular એ પૂરું પાડે છે. એથી services ફરી વાપરી શકાય એવી બને છે અને code ચકાસી શકાય એવો.

🧩 Quiz

Angular માં dependency injection (DI) નો અર્થ શું છે?

1. Component ને જ્યારે જરૂર પડે ત્યારે એ પોતે 'new' વડે પોતાની services બનાવી લે છે
2. Component પોતે service બનાવે એને બદલે, Angular એ service બનાવે છે અને જે component એને જાહેર કરે (સામાન્ય રીતે constructor માં) એને પૂરું પાડે છે
3. Services ની નકલ દરેક component ના code માં થાય છે
4. DI એ Angular ની CSS વ્યવસ્થાનું નામ છે

💭 Think first

સીધું 'new EventService()' કેમ નહીં?

Component DI વાપરવાને બદલે સીધું eventService = new EventService() પણ લખી શકે. તો dependency injection એવું શું આપે છે જે 'new' વાળી રીતમાં ગુમાવાય છે? વિચારીને પછી tap કરો.

⚠️ Watch out

Angular ના ખ્યાલોમાં થતી ભૂલો

Framework અને library ને ગૂંચવવાં: Angular આખું framework છે (રચના પૂરી પાડે છે); React એ UI library છે (એની આસપાસ તમે ગોઠવણ કરો છો).

TypeScript ને જુદી ભાષા માનવી: એ JavaScript વત્તા static types છે, જે JS માં compile થાય છે.

new વાપરીને DI ને ટાળવું: constructor injection વાપરો, જેથી services વહેંચાયેલી અને ચકાસી શકાય એવી રહે.

Module અને component ની ગૂંચવણ: component એ UI નો ટુકડો છે; module (NgModule) સંબંધિત components તથા services ને ભેગાં કરે છે.

Decorators ભૂલી જવાં: @Component, @Injectable અને @NgModule વડે જ Angular જાણે છે કે દરેક class ની ભૂમિકા શી છે.

📖 Theory

ખ્યાલ સ્પષ્ટ થયો; હવે એક બનાવીએ

હવે તમારા મનમાં Angular નું ચિત્ર બેસી ગયું છે: components અને modules નું TypeScript framework, જેને services તથા dependency injection જોડી આપે છે. હવે પછીનો પાઠ હાથે કામ કરાવે છે, એટલે કે development environment ગોઠવવું (Node.js અને Angular CLI), Angular project બનાવીને ચલાવવો, અને routing ઉમેરવું જેથી FestConnect માં અનેક navigate થઈ શકતાં pages રહી શકે. રચનાથી માંડીને ચાલતી app સુધી.

✅ Summary

Key takeaways

• Angular એ TypeScript માં લખાયેલું આખું FRAMEWORK છે (આખી રચના પૂરી પાડે છે); React એ UI library છે જેની આસપાસ તમે ગોઠવણ કરો છો.
• TypeScript એટલે JavaScript વત્તા static types, classes, interfaces અને decorators, જે JavaScript માં compile થાય છે.
• Component આધારિત રચના: app એ components નું વૃક્ષ છે (TS class વત્તા HTML template વત્તા CSS).
• Modules (NgModule) સંબંધિત components અને services ને ભેગાં કરે છે; મૂળ AppModule app ને bootstrap કરે છે.
• Services એ ફરી વાપરી શકાય એવા logic કે data ના classes છે, જે કોઈ view સાથે બંધાયેલા હોતા નથી.
• Dependency injection: Angular service બનાવે છે અને જે component એને (constructor માં) જાહેર કરે એને પૂરું પાડે છે, જેથી વહેંચણી અને ચકાસણી બંને શક્ય બને.
• યાદ રાખવાની કડી: library નહીં પણ framework, types માટે TypeScript, અને જરૂરિયાતો જાહેર કરીને Angular ને એ inject કરવા દો.