$devvkit learn --librarie angular-guide

Angular Guide

[angular][frontend][spa][typescript]

JavaScript / TypeScript

Install

npm install -g @angular/cli
ng new my-app --ssr --style=scss

Angular is a full-featured platform: not just a framework. It includes routing, forms, HTTP client, animations, and a CLI that generates components, services, and modules.

The core concepts are components (templates + logic), directives (DOM manipulation), services (business logic), and modules (organizational units). Dependency injection is built into the framework.

Angular 17+ uses standalone components by default, making modules optional. Signals (writable signals, computed, effects) replace Zone.js change detection for better performance.

Setup

Create project· New Angular app.

ng new my-app --standalone --ssr=false
cd my-app
ng serve

Components

Generate component· Create a component.

ng g component users
# Creates users/component.ts, .html, .css, .spec.ts

Standalone component· Self-contained component.

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: <h2>{{ user.name }}</h2>
})
export class UserComponent {
  @Input() user!: User
}

Templates

Template syntax· Interpolation and binding.

<p>{{ title | uppercase }}</p>
<img [src]="avatarUrl" />
<button (click)="handleClick()">Click</button>
<input [(ngModel)]="name" />

Control flow· Built-in @if/@for.

@if (users.length > 0) {
  @for (user of users; track user.id) {
    <li>{{ user.name }}</li>
  }
} @else {
  <p>No users</p>
}

Services & DI

Service· Injectable business logic.

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient)
  getUsers() { return this.http.get<User[]>('/api/users') }
}

// In component:
const userService = inject(UserService)

Routing

Router setup· Configure routing.

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserComponent, canActivate: [authGuard] },
]

// bootstrap:
bootstrapApplication(App, { providers: [provideRouter(routes)] })

Signals

Signal· Reactive state primitive.

import { signal, computed, effect } from '@angular/core'

const count = signal(0)
const doubled = computed(() => count() * 2)
effect(() => console.log('Count:', count()))

count.set(5)
count.update(c => c + 1)

Forms

Reactive forms· Type-safe forms.

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

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="name" />
  <input formControlName="email" />
  <button type="submit">Submit</button>
</form>