Angular Vadnica: Namestitev, ključni gradniki in prvi koraki

Angular je Googlovo zmogljivo ogrodje za gradnjo sodobnih, hitrih in razširljivih enostranskih spletnih aplikacij (Single Page Applications). Sodobne različice Angular-ja prinašajo samostojne komponente (Standalone Components) in reaktivne signale (Signals), kar razvoj naredi izjemno pregleden in hiter. V tem članku si bomo ogledali namestitev orodij, ključne gradnike ter preprost praktični primer.

Osnovni gradniki ogrodja Angular

Aplikacije v Angular-ju gradimo s pomočjo treh osrednjih konceptov, ki ločujejo vizualni del, logiko in upravljanje podatkov.

Namestitev in zagon novega projekta

Za začetek dela potrebujete nameščeno okolje Node.js ter ukazno vrstico (Terminal ali PowerShell).

1. Namestitev Angular CLI: Orodje za ustvarjanje in vodenje projektov namestimo globalno z ukazom npm.
2. Ustvarjanje projekta: Z ukazom ng new ustvarimo celotno strukturo map in datotek.
3. Zagon razvojnega strežnika: Z ukazom ng serve zaženemo lokalni strežnik na naslovu http://localhost:4200/.

Primer uporabe Angular signalov v komponenti

Spodnji primer prikazuje samostojno komponento (src/app/app.component.ts), ki uporablja signal za preprosto in odzivno vodenje števca brez nepotrebnega osveževanja strani.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="padding: 20px; font-family: sans-serif;">
      <h1>Stevec: {{ števec() }}</h1>
      <button (click)="povečaj()">Povečaj za 1</button>
    </div>
  `
})
export class AppComponent {
  // Ustvarjanje signala z začetno vrednostjo 0
  števec = signal(0);

  povečaj() {
    // Posodobitev vrednosti signala
    this.števec.update(v => v + 1);
  }
}

Povezava Angularja z obstoječim PHP backendom

Ker Angular deluje izključno na strani odjemalca (brskalnik), nikoli ne komunicira neposredno s SQL bazo podatkov. Komunikacija poteka prek REST API vmesnika: PHP backend obdela zahteve in vrne podatke v JSON formatu, Angular pa jih preko vgrajenega modula HttpClient asinhrono prevzame in nemudoma izriše uporabniku.