Angular

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google.

1. Setup & Basics

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Project Structure

src/
├── app/          # Components, modules, services
├── assets/       # Static files
├── environments/ # Configs for dev/prod
├── index.html    # Main HTML
└── main.ts       # Bootstraps app

• Key Files:
  • app.module.ts → Root module (@NgModule)
  • app.component.ts → Root component (@Component)

2. Core Concepts

Components

@Component({
  selector: "app-example",
  templateUrl: "./example.component.html",
  styleUrls: ["./example.component.css"],
})
export class ExampleComponent {
  @Input() data: string;
  @Output() action = new EventEmitter();
}

Templates & Data Binding

• Interpolation: {{ value }}
• Property Binding: [property]="value"
• Event Binding: (event)="handler()"
• Two-Way Binding: [(ngModel)]="property" (Requires FormsModule)

Directives

• Structural:

  <div *ngIf="condition">Content</div>
  <div *ngFor="let item of items">{{ item }}</div>

• Attribute:

  <div [ngClass]="{ 'active': isActive }"></div>

3. Services & Dependency Injection

@Injectable({ providedIn: "root" })
export class DataService {
  fetchData() {
    return this.http.get("/api/data");
  }
}

• Injecting Services:

  constructor(private dataService: DataService) {}

4. HTTP Client (RxJS Observables)

import { HttpClient } from "@angular/common/http";

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get("url");
  }
}

• Subscribing:

  this.apiService.getData().subscribe((data) => console.log(data));

5. Routing

• Setup Routes: (app-routing.module.ts)

  const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "about", component: AboutComponent },
  ];

• Router Outlet:

  <router-outlet></router-outlet>

• Navigation:

  this.router.navigate(["/about"]);

6. Forms

• Template-Driven Forms:

  <form #form="ngForm" (ngSubmit)="submit(form)">
    <input name="email" ngModel required />
  </form>

• Reactive Forms:

  form = new FormGroup({
    email: new FormControl("", [Validators.required]),
  });

7. State Management (Advanced)

• NgRx (Redux-like):
  • Actions, Reducers, Store, Effects

  npm install @ngrx/store @ngrx/effects

8. Performance & Optimization

• Lazy Loading:

  { path: 'admin', loadChildren: () => import('./admin.module') }

• Change Detection: OnPush strategy
• AOT Compilation: ng build --prod

9. Testing

# Unit Tests (Jasmine/Karma)
ng test

#  E2E (Protractor/Cypress)
ng e2e

10. Deployment

ng build --prod
# Deploy `/dist` folder to hosting (Netlify, Vercel, Firebase, etc.)

Reference

• Angular Documentation
• Advanced Topics:
  • Micro-frontends (Module Federation)
  • Server-Side Rendering (Angular Universal)
  • Web Components Integration