Angular Recap & Project Setup: Angular 17 core concepts (Components, Services, Routing); scalable Angular project using Angular CLI with Standalone Components; folder structure and module organization

📖 Theory

Full Stack નો front end

આ subject એક આખી app શરૂથી અંત સુધી બનાવે છે: FestConnect Full Stack, જેમાં Angular front end, Express/Node backend, MongoDB database અને auth તથા hosting માટે Firebase છે. આપણે ત્યાંથી શરૂ કરીએ છીએ જ્યાં user ખરેખર જુએ છે: front end, જે Angular થી બનેલું છે.

તમે Sem 5 માં Angular ને મળી ચૂક્યા છો, એટલે આ એવો recap છે જે વધુ ઊંડે જાય છે. આ પાઠ Angular ના ત્રણ core building blocks ફરી સ્થાપિત કરે છે, એટલે કે components, services અને routing, અને Angular 17 માં standalone components વાપરીને એમને સાથે જોડવાની આધુનિક રીત શીખવે છે. આ પાયો સ્પષ્ટ હોય તો બાકીનું આખું front-end unit સરળ બની જાય છે.

📖 Theory

Components, services, routing

Angular એ single-page applications (SPAs) બનાવવા માટેનું TypeScript framework છે, એટલે એવી apps જે એક વાર load થાય છે અને આખું page reload કર્યા વગર view બદલતી રહે છે. ત્રણ concepts મોટા ભાગનું કામ કરે છે.

Component એ ફરી વાપરી શકાય એવો UI નો ટુકડો છે: HTML template અને styles સાથે જોડાયેલો એક TypeScript class (દાખલા તરીકે, EventCard). Services વહેંચાયેલું logic અને data સાચવે છે (જેમ કે events લાવતી EventService), અને Angular નું dependency injection માગનાર કોઈ પણ component ને એ service પહોંચાડી દે છે. Routing URL paths ને components સાથે જોડે છે, એટલે /events લખતાં events નું page ખૂલે છે અને single page છોડ્યા વગર navigation મળે છે. જોવા માટે components, logic માટે services, ફરવા માટે routing.

⌨️ Practical

Angular 17 નો standalone component

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-card',
  standalone: true,          // Angular 17: no NgModule needed
  template: `<div class="card">{{ title }}</div>`,
})
export class EventCardComponent {
  title = 'Robotics Workshop';
}

// A service holds shared logic, injectable anywhere:
// @Injectable({ providedIn: 'root' })
// export class EventService { getEvents() { /* ... */ } }

✏️ Formula

Angular 17: standalone components

સૌથી મોટો આધુનિક ફેરફાર છે standalone components. જૂનું Angular components ને NgModules માં જૂથબદ્ધ કરતું હતું; Angular 17 component ને standalone: true તરીકે ચિહ્નિત કરવાનું પસંદ કરે છે, જેથી એ પોતાની dependencies જાતે જાહેર કરે અને એને કોઈ module ની જરૂર જ ન રહે. આનાથી projects સરળ બને છે અને સમજવામાં આસાન રહે છે.

App bootstrapApplication(AppComponent, ...) વડે શરૂ થાય છે, અને routing જેવી સુવિધાઓ module imports ને બદલે providers દ્વારા ઉમેરાય છે (દાખલા તરીકે provideRouter(routes)). ઓછા હલનચલન કરતા ભાગ, વધુ સ્પષ્ટ માળખું: standalone એ જ દિશા છે જ્યાં Angular જઈ રહ્યું છે, અને FestConnect માં તમે આખો વખત એ જ વાપરવાના છો.

⌨️ Practical

CLI વડે scalable project ઊભો કરવો

# Angular CLI project નું માળખું બનાવે અને સંભાળે છે
npm install -g @angular/cli
ng new festconnect            # નવો Angular project બનાવે છે
cd festconnect
ng generate component event-card   # component નું માળખું રચે છે
ng serve                      # http://localhost:4200 પર locally ચલાવો

# CLI સમજદાર folder structure આપે છે: code માટે src/app,
# અને project વધે તેમ components અને services feature folders માં ગોઠવાય છે.

🧩 Quiz

Angular 17 માં, જૂના Angular ની સરખામણીએ components ગોઠવવાની રીતમાં મુખ્ય ફેરફાર કયો છે?

1. Components હવે TypeScript વગર સાદા HTML માં લખાય છે
2. Components standalone હોઈ શકે છે (standalone: true), જે NgModule ની જરૂર વગર પોતાની dependencies જાહેર કરે છે
3. Routing હવે શક્ય રહ્યું નથી
4. Framework માંથી services કાઢી નાખવામાં આવી છે

💭 Think first

Angular standalone components તરફ કેમ વળ્યું?

NgModules વર્ષો સુધી બરાબર કામ કરતા રહ્યા. તો Angular 17 એમને બદલે standalone components કેમ પસંદ કરે છે? વિચારીને પછી tap કરો.

✅ Summary

Key takeaways

• Angular એ single-page applications માટેનું TypeScript framework છે; આ subject માં એ FestConnect ના front end માટે વપરાય છે.
• ત્રણ core building blocks: components (ફરી વાપરી શકાય એવા UI ટુકડા), services (વહેંચાયેલું logic અને data, injection થી મળતું) અને routing (URL paths ને components સાથે જોડવું).
• Dependency injection માગનાર કોઈ પણ component ને જરૂરી service પહોંચાડે છે.
• Angular 17 standalone components (standalone: true) પસંદ કરે છે, જે NgModule વગર પોતાની dependencies જાહેર કરે છે.
• App bootstrapApplication વડે શરૂ થાય છે અને providers દ્વારા ગોઠવાય છે (દા.ત. provideRouter).
• Angular CLI (ng new, ng generate, ng serve) scalable project નું માળખું રચે છે અને ચલાવે છે.
• યાદ રાખવાની કડી: components + services + routing, અને એમને જોડવાની આધુનિક રીત એટલે standalone components.