Basics
Project Structure
Folders & Files Samjho
💡 Angular project structure ek office building ka floor plan hai — har floor (folder) ka specific purpose hai (src/app = actual application code, node_modules = third-party libraries, jaise supply closet), sab predictable jagah par.
src/app/ mein actual application code hota hai — components, services, modules. angular.json project configuration (build settings, styles, scripts). package.json dependencies list (npm packages). Har component 4 files ka set hai: .ts (logic), .html (template), .css/.scss (styles), .spec.ts (tests).
my-app/
├── src/
│ ├── app/
│ │ ├── app.component.ts ← root component logic
│ │ ├── app.component.html ← root component template
│ │ ├── app.component.css ← root component styles
│ │ └── app.module.ts ← root module (older Angular)
│ ├── index.html ← single HTML file, poora app yahi load hota hai
│ └── main.ts ← application bootstrap/entry point
├── angular.json ← project configuration
└── package.json ← dependencies📁
Angular project structure ek office building ka floor plan hai — har floor (folder) ka specific purpose hai (src/app = actual application code, node_modules = third-party libraries, jaise supply closet), sab predictable jagah par.
1 / 2
⚡ Quick Recap
- src/app/ = actual application code
- Har component = .ts (logic) + .html (template) + .css (style) + .spec.ts (tests)
- SPA = ek index.html, baaki sab JavaScript se dynamically update hota hai
On this page (2 subtopics)
src/environments/ folder mein development vs production ke liye alag configuration (jaise API URLs) rakhते hain — build process automatically sahi file use karta hai based on configuration.
// environment.ts (development):
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api'
};
// environment.prod.ts (production):
export const environment = {
production: true,
apiUrl: 'https://api.myapp.com'
};
// Component mein use karna:
// import { environment } from '../environments/environment';
// fetch(environment.apiUrl + '/users');Tip: ng build --configuration production automatically environment.prod.ts use karta hai — koi manual switching nahi karni padti, build process khud handle karta hai.
src/assets/ folder mein images, fonts, JSON config files jaise static resources rakhते hain — build process automatically inhe final output mein copy kar deta hai, bina processing ke.
src/assets/
├── images/
│ └── logo.png
└── data/
└── config.json
// Template mein use karna:
// <img src="assets/images/logo.png">Tip: assets/ ke andar files DIRECTLY copy hoti hain (koi bundling/processing nahi) — bade images optimize karna manually zaroori hai, Angular khud automatically compress nahi karta assets/ ki files ko.