Routing and Navigation: setting up development environment, installing Node.js and Angular CLI, creating and running Angular projects, project structure and Angular workspace

📖 Theory

વિચારથી ચાલતા project સુધી

તમે Angular ની architecture સમજી ગયા છો; હવે તમને એમાં કામ કરવા માટે એક project જોઈએ. કોઈ HTML file સીધી ખોલી દેવાથી ચાલે એવું અહીં નથી: Angular projects ને command-line tool દ્વારા SCAFFOLD અને SERVE કરવામાં આવે છે.

અને FestConnect ને અનેક PAGES જોઈએ છે, એટલે કે events ની યાદી અને registration form, પણ આખું page ફરી load થયા વગર. Angular apps એટલે single-page applications (SPAs): એક જ page, જેનું content તમે navigate કરો એમ બદલાતું રહે છે, અને એ કામ Angular નું Router સંભાળે છે. આ પાઠમાં Angular CLI વડે project ચાલુ કરવું, એની રચના સમજવી, અને routing ઉમેરવું શીખશો, જેથી FestConnect જુદા જુદા views વચ્ચે navigate કરી શકે.

🪜 Follow along

Angular project ગોઠવવું અને ચલાવવું

1. Node.js install કરો Node npm (package manager) આપે છે. Angular નું tooling Node પર ચાલે છે, એ જ Node જે BCA405-01 માં હતું.
2. Angular CLI install કરો npm install -g @angular/cli એ command-line tool install કરે છે જે Angular projects ને scaffold કરે છે અને સંભાળે છે.
3. Project બનાવો: ng new festconnect CLI આખી project રચના, config અને dependencies બનાવી આપે છે.
4. એને ચલાવો: ng serve Live reload સાથે dev server ચાલુ કરે છે (સામાન્ય રીતે http://localhost:4200): edit કરો, save કરો, અપડેટ થતું જુઓ.
5. ભાગ બનાવો: ng generate component events CLI એક component ની files (class, template, CSS) બનાવે છે અને એને register પણ કરે છે, જેથી boilerplate લખવું ન પડે.

📖 Theory

Project ની રચના

Angular workspace ની ગોઠવણ નક્કી ઢાંચામાં હોય છે, અને એ જાણી લેવાથી કલાકો બચે છે:

• src/app/: તમારો application code અહીં રહે છે
• app.component.* : root component (એનો class, HTML template, CSS)
• app.module.ts: root module જે app ને bootstrap કરે છે (જૂની શૈલી; નવા Angular માં standalone components વાપરી શકાય)
• angular.json: workspace અને build ને configure કરે છે
• package.json: dependencies ની યાદી રાખે છે (npm દ્વારા install થયેલી)

આ બધું CLI એ બનાવ્યું છે. તમે મોટે ભાગે src/app ની અંદર જ કામ કરો છો, અને ng generate વડે components તથા services ઉમેરો છો. આ રચના એક CONVENTION છે: દરેક Angular project સરખો દેખાય છે, અને framework નો એ જ ફાયદો છે, કોઈ પણ Angular developer તમારા project માં સહેલાઈથી રસ્તો શોધી શકે.

⌨️ Practical

Routes વ્યાખ્યાયિત કરવા (URL થી component)

// app.routes.ts: URL paths ને components સાથે જોડો
import { Routes } from '@angular/router';
import { EventsComponent } from './events.component';
import { RegisterComponent } from './register.component';

export const routes: Routes = [
  { path: '',        component: EventsComponent },   // home
  { path: 'events',  component: EventsComponent },
  { path: 'register', component: RegisterComponent },
  // { path: '**', component: NotFoundComponent }   // wildcard: 404
];
// /register પર જવાથી RegisterComponent render થાય છે, page reload વગર.

📖 Theory

Router-outlet અને routerLink

Routing ચલાવવા માટે template ના બે ટુકડા જરૂરી છે:

• `<router-outlet></router-outlet>`: એ જગ્યા જ્યાં મળતું આવતું component RENDER થાય છે. URL /register હોય ત્યારે RegisterComponent અહીં દેખાય છે
• `routerLink`: તમે NAVIGATE કઈ રીતે કરો છો એ. <a routerLink="/events">Events</a> page ને reload કર્યા વગર view બદલી નાખે છે

મહત્ત્વનો ભેદ આ રહ્યો: routerLink વાપરો, href નહીં. સાદું href="/events" આખા BROWSER નું page reload કરાવે છે (SPA છોડીને બધું ફરી download કરે છે), અને એથી app ની state તથા ઝડપ બંને નાશ પામે છે. routerLink single-page app ની અંદર જ navigate કરે છે અને ફક્ત outlet નું content બદલે છે. આ SPA navigation, એટલે કે reload વગર તરત બદલાતા views, બરાબર એ જ વસ્તુ છે જેણે અગાઉના units માં FestConnect ને app જેવું અનુભવાવ્યું હતું.

🧩 Quiz

Angular ની single-page app માં, views વચ્ચે navigate કરવા માટે સામાન્ય href ને બદલે routerLink શા માટે વાપરવું?

1. routerLink લખવામાં ટૂંકું પડે છે
2. routerLink SPA ની અંદર જ navigate કરે છે (router-outlet નું content બદલે છે, reload નહીં); href આખું page reload કરાવે છે જે app માંથી બહાર લઈ જાય છે અને state ગુમાવે છે
3. Angular માં href બિલકુલ કામ જ કરતું નથી
4. બંને વચ્ચે કશો ફરક નથી

💭 Think first

એને 'single-page' app શું બનાવે છે?

FestConnect Angular માં /events, /register અને બીજા routes છે, છતાં એને SINGLE-page application કહેવાય છે. અનેક routes એક જ page કઈ રીતે હોઈ શકે? વિચારીને પછી tap કરો.

⚠️ Watch out

Setup અને routing ની ભૂલો

routerLink ને બદલે href: આખા reloads કરાવે છે અને SPA ના ફાયદા ગુમાવે છે; app ની અંદર routerLink જ વાપરો.

router-outlet ભૂલી જવું: template માં <router-outlet> ન હોય તો routes ને render થવાની જગ્યા જ મળતી નથી.

Wildcard route ન રાખવો: { path: '**' } route વગર અજાણ્યાં URLs સંભાળનાર કોઈ રહેતું નથી; 404 component ઉમેરો.

Generate થયેલો config આંધળી રીતે બદલવો: angular.json અને module files ની પોતાની રચના હોય છે; બને ત્યાં સુધી હાથે જોડવાને બદલે ng generate વાપરો.

ખોટું Node/CLI version: મેળ ન ખાતાં versions setup ની ભૂલો કરાવે છે; CLI ની સૂચના પ્રમાણે ચાલો.

📖 Theory

App ચાલે છે અને navigate થાય છે; હવે એના ભાગ

FestConnect Angular હવે ચાલતી અને navigate થઈ શકતી single-page app છે. હવે પછીનો પાઠ COMPONENT માં જ ઊંડે ઊતરે છે, એટલે કે components કઈ રીતે બનાવવાં અને, ખાસ તો, એમના LIFECYCLE HOOKS: એ methods જેમને Angular અગત્યની ક્ષણોએ બોલાવે છે (જેમ કે component તૈયાર થાય ત્યારે ngOnInit), જ્યાં તમે events લાવવા જેવું initialization મૂકો છો. App ના shell થી જીવંત component તરફ.

✅ Summary

Key takeaways

• Angular CLI projects ને scaffold કરે છે અને ચલાવે છે: ng new (બનાવવું), ng serve (localhost:4200 પર dev server), ng generate (ભાગ બનાવવા).
• Setup: પહેલાં Node.js install કરો (npm માટે), પછી Angular CLI ને globally install કરો.
• Project ની રચના: src/app માં app રહે છે; app.component.*, app.module.ts, angular.json, package.json.
• Angular apps એટલે single-page applications (SPAs): Router URL path ને component સાથે જોડે છે, આખા reload વગર.
• Routes: { path: 'events', component: EventsComponent }; <router-outlet> મળતું આવતું component render કરે છે.
• routerLink થી navigate કરો (SPA, reload નહીં), href થી નહીં (આખું page reload જે state ગુમાવે છે).
• યાદ રાખવાની કડી: CLI scaffold કરે, Router URL ને component સાથે જોડે, href નહીં પણ routerLink.