notes

• AngularJS (1.x) — Released in 2010; MVC/MVVM style, two-way binding, digest cycle; written in JavaScript.
• Angular (2+) — Complete rewrite released in 2016; component-based, TypeScript-first, RxJS, Ahead-of-Time (AOT) compilation.
• Major versions — v4 (2017, alignment), v5-8 (CLI/build improvements), v9 (Ivy by default), v10-12 (strict mode, TS updates), v13-15 (ESBuild/Vite options), v16-17 (Standalone APIs, signals preview), v18+ (continued performance/tooling enhancements).
• CLI Evolution — Angular CLI became standard for scaffolding, building, testing, and deploying.
• Long-term Support (LTS) — Regular 6-month release cadence with active and LTS phases.

Interview Tip: Emphasize Angular (2+) is a new framework vs AngularJS; note Ivy (v9) and Standalone APIs as key milestones.

• Angular is a TypeScript-based framework for building SPAs.
• Uses components, templates, and modules as building blocks.
• Leverages Dependency Injection, RxJS, and powerful CLI tooling.
• Angular 16 follows the MVVM architectural pattern and uses a modular structure for organizing applications. It is a component-based framework that supports both NgModule-based and standalone component architectures.

Key Building Blocks

• Module (NgModule) - groups related components, directives, pipes, and services.
• Component - controls a view via template, styles, and logic.
• Service - reusable business logic, injected via DI.
• Directive - modifies DOM behavior or structure.
• Pipe - transforms displayed values.

• Components are defined with @Component decorator.
• Templates support interpolation, property binding, event binding, and two-way binding.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello !</h1>
    <button (click)="greet()">Greet</button>
  `,
  styles: [':host { display: block; }']
})
export class HelloComponent {
  name = 'Angular';
  greet() { console.log('Hi from Angular'); }
}

• Interpolation -
• Property Binding - [prop]="value"
• Event Binding - (event)="handler()"
• Two-way Binding - [(ngModel)]="value" (requires FormsModule)

<input [value]="name" (input)="name = $event.target.value">
<input [(ngModel)]="name">
<button (click)="onSave()">Save</button>

• Structural - change DOM layout: *ngIf, *ngFor, *ngSwitch.
• Attribute - change appearance/behavior: [ngClass], [ngStyle].

<div *ngIf="isLoggedIn">Welcome!</div>
<li *ngFor="let item of items; index as i"> - </li>
<div [ngClass]="{ active: isActive }" [ngStyle]="{ color: 'red' }">Styled</div>

• Inject services using Angular's DI system.
• Use @Injectable({ providedIn: 'root' }) for app-wide singleton services.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ApiService {
  getUsers() { /* http call */ }
}

• Define routes using RouterModule.forRoot(routes).
• Use lazy loading with loadChildren for feature modules.
• Navigate via [routerLink] or Router.navigate().

const routes = [
  { path: '', component: HomeComponent },
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
  { path: '**', redirectTo: '' }
];

• Observables represent streams of async data.
• Use operators like map, switchMap, mergeMap, debounceTime.
• Manage subscriptions via async pipe or manual unsubscribe (e.g., takeUntil).

this.users$ = this.searchTerm.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.api.searchUsers(term))
);

• Default strategy checks all components on change detection cycle.
• OnPush strategy checks only on input reference changes or explicit marks.

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-item',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p></p>`
})
export class ItemComponent {
  item!: { name: string };
}

Template-driven Forms

• Simple forms using ngModel.
• Suitable for small forms; less boilerplate.

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input name="email" ngModel required>
  <button>Submit</button>
</form>

Reactive Forms

• Form state managed in code with FormGroup/FormControl.
• Easier validation, dynamic forms, and testing.

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

onSubmit() {
  console.log(this.form.value);
}

• Architecture — AngularJS uses MVC/MVVM; Angular uses component-based architecture with modules.
• Language — AngularJS: JavaScript; Angular: TypeScript-first (superset of JS).
• Data Binding — AngularJS: two-way binding with digest cycle; Angular: unidirectional data flow by default with one-way bindings and optional two-way via ngModel.
• Rendering — AngularJS uses runtime compilation; Angular supports JIT and AOT, with Ivy compiler/runtime improving tree-shaking and performance.
• Performance — Angular outperforms AngularJS due to AOT, Ivy, change detection optimizations, and RxJS usage.
• Mobile — Angular supports mobile development workflows and better tooling; AngularJS had limited mobile focus.
• Tooling — Angular CLI standardizes scaffolding/testing/build; AngularJS relied on manual setup/grunt/gulp.
• Dependency Injection — Both have DI; Angular’s DI is more powerful and modular.
• Routing — Angular Router with lazy loading and guards; AngularJS had ngRoute/ui-router.
• Testing — Both support unit/e2e testing; Angular integrates TestBed, Karma/Jasmine, Jest options, Protractor (legacy)/Cypress.
• Ecosystem — Angular embraces RxJS, TypeScript, and modern build tools; AngularJS ecosystem is legacy and in LTS-only status.

Interview Tip: Emphasize Angular (2+) as a complete rewrite: TypeScript, components, AOT/Ivy, RxJS, CLI, and significantly better performance compared to AngularJS.