Theory
Concept से एक Running Project तक
आप Angular की architecture समझते हैं; अब आपको एक project चाहिए जिसमें build करें। एक HTML file खोलने के उलट, Angular projects command-line tool से SCAFFOLDED और SERVED होते हैं।
और FestConnect को कई PAGES चाहिए, एक events list, एक registration form, बिना full page reloads के। Angular apps single-page applications (SPAs) हैं: एक page जिसका content आपके navigate करने पर swap होता है, Angular के Router से handled। यह lesson Angular CLI से एक project running कराना, इसकी structure समझना, और routing add करना cover करता है ताकि FestConnect views के बीच navigate कर सके।
Follow along
एक Angular Project Set Up और Run करना
- Node.js Install कीजिए Node npm (package manager) provide करता है। Angular का tooling Node पर चलता है, BCA405-01 वाला same Node।
- Angular CLI Install कीजिए npm install -g @angular/cli command-line tool install करता है जो Angular projects को scaffold और manage करता है।
- एक Project बनाइए: ng new festconnect CLI पूरी project structure, config, और dependencies generate करता है।
- इसे Run कीजिए: ng serve Dev server शुरू करता है (आमतौर पर http://localhost:4200) live reload के साथ: edit कीजिए, save कीजिए, इसे update होते देखिए।
- Parts Generate कीजिए: ng generate component events CLI एक component की files (class, template, CSS) scaffold करता है और इसे register करता है, boilerplate बचाते हुए।
Theory
Project Structure
एक Angular workspace की एक predictable layout होती है, और इसे जानना घंटे बचाता है:
- src/app/: आपका application code यहाँ रहता है
- app.component.*: root component (इसकी class, HTML template, CSS)
- app.module.ts: root module जो app bootstrap करता है (older style; newer Angular standalone components इस्तेमाल कर सकता है)
- angular.json: workspace और build configure करता है
- package.json: dependencies list करता है (npm के through installed)
CLI ने यह सब बनाया। आप ज़्यादातर src/app के अंदर काम करते हैं, ng generate से components और services add करते हुए। Structure CONVENTION है: हर Angular project similar दिखता है, जो एक framework का benefit है, कोई भी Angular developer आपके around अपना रास्ता ढूँढ सकता है।
Practical
Routes Define करना (URL से Component)
// app.routes.ts: map URL paths to 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
];
// A visit to /register renders RegisterComponent, with NO page reload.
Theory
Router-Outlet और routerLink
दो template pieces routing को काम कराते हैं:
- `<router-outlet></router-outlet>`: वह placeholder जहाँ matched component RENDER होता है। जब URL /register है, RegisterComponent यहाँ appear होता है
- `routerLink`: आप कैसे NAVIGATE करते हैं।
<a routerLink="/events">Events</a>page reload किए बिना view switch करता है
Crucial contrast: routerLink इस्तेमाल कीजिए, href नहीं। एक plain href="/events" एक full BROWSER page reload trigger करता है (SPA छोड़ते हुए और सब कुछ फिर download करते हुए), app का state और speed destroy करते हुए। routerLink single-page app के अंदर navigate करता है, सिर्फ़ outlet का content swap करते हुए। यह SPA navigation, बिना reload के instant view changes, exactly वह है जो earlier units में FestConnect को एक app जैसा feel कराता था।
Quiz
एक Angular single-page app में, views के बीच navigate करने के लिए एक normal href की बजाय routerLink क्यों इस्तेमाल करें?
- routerLink type करने में shorter है
- routerLink SPA के अंदर navigate करता है (router-outlet content swap करते हुए, कोई reload नहीं); href एक full page reload trigger करता है जो app छोड़ता है और state खोता है
- href Angular में बिल्कुल काम नहीं करता
- कोई difference नहीं है
Show the answer
routerLink SPA के अंदर navigate करता है (router-outlet content swap करते हुए, कोई reload नहीं); href एक full page reload trigger करता है जो app छोड़ता है और state खोता है
routerLink SPA navigation perform करता है: Angular Router <router-outlet> में दिखाए गए component को बिना full page reload के swap करता है, app को loaded, fast, और stateful रखते हुए। एक plain href='/events' browser को एक traditional full-page request और RELOAD करवाता है, जो single-page app छोड़ता है, सब कुछ फिर download करता है, और in-memory state wipe करता है: SPA जो चाहता है उसका opposite। Option A इसे trivialise करता है। Option C false है (href काम करता है, यह बस reload करता है)। Option D crucial reload difference ignore करता है। Rule: एक Angular SPA के अंदर, routerLink से navigate कीजिए; href external sites पर जाने के लिए reserve कीजिए। यह BCA405-01 का SPA principle है, Router से enforced।
Think first
इसे 'Single-Page' App क्या बनाता है?
FestConnect Angular में /events, /register और ज़्यादा हैं, फिर भी इसे एक SINGLE-page application कहा जाता है। कई routes एक page कैसे हो सकते हैं? फिर tap कीजिए।
Show the answer
क्योंकि सिर्फ़ ONE actual HTML page load कभी होता है। जब app पहली बार खुलता है, browser एक page (index.html) और Angular app download करता है। इसके बाद, /events या /register पर navigate करना नए pages fetch नहीं करता: Router navigation को intercept करता है और SWAP करता है कौन सा component <router-outlet> के अंदर render होता है, URL और view को JavaScript से update करते हुए, कोई reload नहीं। तो 'pages' actually एक ही shell में दिखाए गए अलग COMPONENTS हैं। Benefits: instant navigation (कोई reload delay नहीं), preserved app state, और एक app-like feel। 'Single page' वह shell है जो loaded रहता है; routes बस इसका content बदलते हैं। यही वजह है routerLink (SPA navigation) matter करता है और href (full reload) model तोड़ता है। एक page, कई views।
Watch out
Setup और Routing Traps
routerLink की बजाय href: full reloads cause करता है और SPA benefits खोता है; app के अंदर routerLink इस्तेमाल कीजिए।
router-outlet भूलना: template में <router-outlet> के बिना routes के render होने के लिए कहीं जगह नहीं है।
कोई Wildcard Route नहीं: { path: '**' } route के बिना, unknown URLs का कोई handler नहीं है; एक 404 component add कीजिए।
Generated Config Blindly Edit करना: angular.json और module files की एक structure है; जहाँ possible हो hand-wiring की बजाय ng generate इस्तेमाल कीजिए।
Wrong Node/CLI Version: mismatched versions setup errors cause करती हैं; CLI की guidance follow कीजिए।
Theory
App चलता है और Navigate करता है; अब इसके Parts
FestConnect Angular अब एक running, navigable single-page app है। अगला lesson खुद COMPONENT में digs करता है, components कैसे create करें और, importantly, इनके LIFECYCLE HOOKS: वे methods जो Angular key moments पर call करता है (जैसे ngOnInit जब एक component ready हो), जहाँ आप initialization रखते हैं जैसे events fetch करना। App shell से living component तक।
Summary
Key takeaways
- Angular CLI projects scaffold और run करता है: ng new (create), ng serve (localhost:4200 पर dev server), ng generate (parts scaffold करना)।
- Setup: Node.js install कीजिए (npm के लिए), फिर globally Angular CLI।
- Project structure: src/app app hold करता है; app.component.*, app.module.ts, angular.json, package.json।
- Angular apps single-page applications (SPAs) हैं: Router एक URL path को बिना full reload के एक component से map करता है।
- Routes: { path: 'events', component: EventsComponent }; <router-outlet> matched component render करता है।
- routerLink से navigate कीजिए (SPA, कोई reload नहीं), href नहीं (full page reload जो state खोता है)।
- Memory hook: CLI scaffolds करता है, Router URL को component से map करता है, href नहीं routerLink।