Course Progress 15%

Angular Project Structure

← Angular CLI Angular First App →

Angular application का project structure well-organised और modular होता है। सही समझ होने से आप आसानी से large-scale applications को manage कर सकते हैं। Angular CLI automatically standard project structure generate करता है, जिससे best practices follow होती हैं।

इस chapter में आप सीखेंगे:

  • Angular project में मुख्य folders और files
  • उनके roles और responsibilities
  • Best practices for organizing project

Angular Project Root Folder

Angular CLI से नया project create करने पर root folder structure कुछ ऐसा होता है:

my-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── polyfills.ts
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Explanation

  • e2e/ – End-to-end testing files
  • node_modules/ – Installed npm packages
  • src/ – Application source code
  • angular.json – Angular CLI configuration
  • package.json – Project dependencies और scripts
  • tsconfig.json – TypeScript configuration

src/ Folder

src/ folder main application code रखता है।

Important files/folders

  1. app/ – Components, services, modules
  2. assets/ – Images, icons, fonts, static files
  3. environments/ – Environment-specific variables
  4. index.html – Root HTML file
  5. main.ts – Application bootstrap file
  6. styles.css – Global styles
  7. polyfills.ts – Browser compatibility fixes

app/ Folder

app/ folder में Angular application की सभी main code files होती हैं।

Example structure:

app/
├── app.component.ts
├── app.component.html
├── app.component.css
├── app.component.spec.ts
├── app.module.ts

Explanation

  • app.component.ts – Root component class
  • app.component.html – Component template
  • app.component.css – Component styles
  • app.component.spec.ts – Unit tests for component
  • app.module.ts – Root module defining app structure

Components Folder (Optional)

Angular CLI recommends each feature/component का अलग folder रखना:

app/
├── users/
│   ├── users.component.ts
│   ├── users.component.html
│   ├── users.component.css
│   └── users.component.spec.ts

Explanation

  • Feature-based structure maintainable रहती है
  • Each component self-contained होता है

Services Folder

Services को generally app/services/ folder में रखा जाता है:

app/
└── services/
    └── data.service.ts

Explanation

  • Business logic और reusable functions services में रखे जाते हैं
  • Components lightweight और testable रहती हैं

assets/ Folder

Assets folder में सभी static files रखे जाते हैं:

assets/
├── images/
├── fonts/
└── icons/

Explanation

  • Images, logos, fonts, JSON files
  • Angular automatically compile time में assets copy करता है

environments/ Folder

Angular multiple environments support करता है:

environments/
├── environment.ts          // Development
└── environment.prod.ts     // Production

Explanation

  • API URLs और config variables environment-specific रखे जाते हैं
  • Build के दौरान correct environment automatically use होती है

index.html

Angular SPA का root HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Explanation

  • <app-root> root component load करता है
  • Angular bootstrap यहाँ से start होती है

main.ts

Application bootstrap file:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Explanation

  • Root module (AppModule) bootstrap होता है
  • Browser application launch होती है

app.module.ts

Root module defining application structure:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Explanation

  • declarations – Components, directives, pipes
  • imports – External modules
  • providers – Services
  • bootstrap – Root component

Best Practices for Project Structure

  • Feature-based folder structure रखें
  • Components, services, directives अलग folders में रखें
  • Assets और styles organized रखें
  • Environment-specific variables maintain करें
  • Unit tests files हर component/service के पास रखें

Summary

इस chapter में आपने सीखा:

  • Angular project root और src folder structure
  • app, components, services, assets और environments का role
  • index.html और main.ts कैसे work करते हैं
  • app.module.ts और root module concept
  • Best practices for scalable Angular applications
← Angular CLI Angular First App →
  • Home