Tradycyjna architektura aplikacji webowych

Przykłady: PHP + Smarty, JSP, Ruby on Rails, ASP.NET Web Forms

Problemy tradycyjnej architektury

• Każda interakcja = pełne przeładowanie strony — migotanie ekranu, opóźnienie
• Redundantne przesyłanie HTML przy każdym żądaniu (nagłówek, menu, stopka)
• Duże obciążenie serwera — renderowanie widoków po stronie serwera
• Trudna implementacja bogatego UI (walidacja na żywo, drag&drop, animacje)
• Ścisłe powiązanie frontendu z backendem — każda zmiana wpływa na obie warstwy

Single-Page Application

• Aplikacja pobierana jednorazowo (HTML + CSS + JS bundle)
• Nawigacja obsługiwana przez JavaScript — bez przeładowania strony
• Backend dostarcza tylko dane (JSON przez REST API lub GraphQL)
• Przeglądarka renderuje widoki dynamicznie — natychmiastowa reakcja na akcje

Architektura aplikacji SPA

      @Component({
        standalone: true,
        selector:    'app-hero-list',
        templateUrl: './hero-list.component.html',
        imports:     [ NgFor, NgIf, HeroDetailComponent ],
        providers:  [ HeroService ]
      })
      export class HeroListComponent implements OnInit {
        /* . . . */
      }
      

        
Hero List

        
Select a hero from the list to see details.
        

          

            
              {{hero.name}}
            
          
        
        
        
            

Instalacja node ⇝ nvm

Instalacja Angular CLI

            npm install -g @angular/cli
          

Wygenerowanie aplikacji Angular

            $ ng new
            ? What name would you like to use for the new workspace and initial project? foo
            ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
            This setting helps improve maintainability and catch bugs ahead of time.
            For more information, see https://angular.io/strict Yes
            ? Would you like to add Angular routing? Yes
            ? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
          

Zbudowanie aplikacji

          ng build
        

Uruchomienie aplikacji

          ng serve -o
        

• funkcjonalny blok aplikacji,
• sposób organizacji kodu,
• sposób zarządzania zależnościami,
• tworzenie kodu bibliotecznego,
• lazy-loading w przypadku dużych aplikacji.

Moduł ECMA Script oraz Moduł Angulara to dwie różne rzeczy!

Komponenty "standalone"

• Moduły są opcjonalne począwszy od Angulara 14.
• Komponenty, dyrektywy oraz "pipes" można zadeklarować jako standalone.
• Komponenty mogą od teraz importować moduły.
• Komponenty (dyrektywy, "pipes") są self-contained.

• Komponent jest podstawową jednostką budowania warstwy wizualnej aplikacji.
• Komponent może być wykorzystywany wielokrotnie.
• Komponent komunikuje się ze światem "zewnętrznym" w ściśle określony sposób.

          ng generate component user-mgmt/user-list
        

• html - szablon - część wizualna, ang. template (opcja)
• scss - prywatny arkusz styli (opcja)
• component.ts - kod/kontroler komponentu
• spec.ts - testy jednostkowe komponentu (opcja)

Definicja wyglądu komponentu w HTML:

lub z użyciem zewnętrznego pliku:

user-list.component.html

DOM (Document Object Model) jest to model obiektowy reprezentujący dokument HTML wyświetlany przez przeglądarkę.

Postawowe API elementów DOM:

Data binding są to mechanizmy pozwalające na integrację modelu z widokiem.

Detekcja zmian

Cykl życia komponentu

Dyrektywy

Dyrektywy to elementy rozszerzające funkcjonalność HTML, które można deklarować za pomocą Angular.

Dyrektywy atrybutowe

Dyrektywy atrybutowe

          divClasses = {};
          ...
          this.divClasses: {
            'valid': this.isValid(),
            'highlighted': this.isHighlighted()
          }
        

W prostszych przypadkach...

Dyrektywy strukturalne

Pipe transformuje wartość wyświetlaną w szablonie.

Pipes można łączyć w łańcuch: {{ value | pipe1 | pipe2 }}

Wbudowane pipes

AsyncPipe

Pipe async automatycznie subskrybuje Observable i anuluje subskrypcję przy niszczeniu komponentu.

          // komponent
          users$ = this.userService.getAllUsers();
        

Brak ręcznego subscribe() i unsubscribe() — eliminuje wycieki pamięci.

Angular pozwala na stosowanie data bindings we własnych komponentach.

Dla danych wejściowych:

          export class UserDetailsComponent
          {
             ...
             @Input() user: User;
             ...
          }
        

Dla danych wyjściowych:

          export class UserDetailsComponent
          {
             ...
             @Output() onChanged = new EventEmitter<User>();
             ...
             this.onChanged.emit(user);
             ...
          }
        

Required inputs

• Nowość począwszy od Angulara 16
• @Input({required=true})
• Wiązanie musi być określone, inaczej nastąpi błąd kompilacji.

Input tranforms

• Nowość począwszy od Angulara 16
• @Input({transform: booleanAttribute})
• Funkcja transformująca wartość.

Signals to nowy prymityw reaktywny wprowadzający precyzyjną, opartą na grafie zależności detekcję zmian — krok ku odejściu od Zone.js.

• signal(value) — reaktywna wartość powiadamiająca o zmianie
• computed(() => ...) — wartość wyliczana automatycznie z innych sygnałów
• effect(() => ...) — efekt uboczny reagujący na zmiany sygnałów

          export class CounterComponent {
            count   = signal(0);
            doubled = computed(() => this.count() * 2);

            increment() { this.count.update(v => v + 1); }

            constructor() {
              effect(() => console.log('count:', this.count()));
            }
          }
        

Signals a Zone.js

Signals to nie gotowe zastąpienie Zone.js — Angular 18 wprowadza tryb eksperymentalny: provideExperimentalZonelessChangeDetection(). Zone.js nadal jest domyślny.

Reaktywność w popularnych frameworkach

Signals to nie wynalazek Angular — Vue 3 i Solid.js stosują je od lat. Kluczowa różnica: React re-renderuje cały komponent przy każdej zmianie stanu; frameworki sygnałowe aktualizują tylko zależne fragmenty DOM.

Signal-based inputs / outputs (Angular 17+)

          export class UserCardComponent {
            user  = input.required<User>();      // zamiast @Input({required: true})
            label = input('', {alias: 'title'});  // alias i wartość domyślna

            changed = output<User>();             // zamiast @Output() + EventEmitter
          }
        

Pełna integracja z computed() — reaktywność bez dekoratorów.

Jak działa przeglądarka?

• Obsługa pola adresowego URL
• Hiperlinki i przekierowania
• Historia przeglądania

Router jest modułem Angulara, który implementuje podstawowe funkcje przeglądarki (URL, historia) w aplikacjach typu Single-Page.

Więcej informacji na https://angular.io/guide/router.

Preferuj Reactive Forms dla złożonych i testowalnych formularzy.

Reactive Forms — kod

          export class UserFormComponent {
            private fb = inject(FormBuilder);

            form = this.fb.group({
              name:  ['', [Validators.required, Validators.minLength(3)]],
              email: ['', [Validators.required, Validators.email]],
              age:   [null, Validators.min(0)]
            });

            onSubmit() {
              if (this.form.valid) {
                this.userService.saveUser(this.form.value as User);
              }
            }
          }
        

Reactive Forms — szablon

Serwis to współdzielony kod aplikacji:

• może posiadać stan
• posiada zasięg (scope) oraz cykl życia
• podlega mechanizmowi DI (dependency injection)

          @Injectable()
          export class UserService {

            users: User[] = [];

            constructor() {
              this.users = [
                {id: 1, name: 'John Doe', email: 'john.doe@email.com'},
                {id: 2, name: 'Max Rockatansky', email: 'mad.max@email.com'},
                {id: 3, name: 'Chuck Peddle', email: 'chuck@mos.com'}
              ];
            }

            getAllUsers() {
              return this.users;
            }

            saveUser(user: User) {
              const found = this.findUser(user.id);
              if (found) {
                Object.assign(found, user);
              } else {
                this.users.push(user);
              }
            }

            findUser(id: number) {
              return this.users.find((user: User) => user.id === id);
            }

            getNextId() {
              return this.users
                .map((elem: User) => elem.id)
                .reduce((prev, curr) => prev > curr ? prev : curr, 0) + 1;
            }
          }
        

HttpClient (i wiele innych części Angulara) zwraca Observable z biblioteki RxJS.

• Observable — strumień danych (zero lub więcej wartości w czasie)
• Observable jest leniwy — nic się nie dzieje bez subscribe()
• Subscription — aktywna subskrypcja; należy ją anulować (unsubscribe()), aby uniknąć wycieków pamięci
• Operatory (map, filter, switchMap…) transformują strumień

          const users$ = this.userService.getAllUsers(); // Observable — nic się nie dzieje

          const sub = users$.subscribe({
            next:     users => this.users = users,
            error:    err   => console.error(err),
            complete: ()    => console.log('done')
          });

          ngOnDestroy() {
            sub.unsubscribe(); // obowiązkowe!
          }
        

Preferuj AsyncPipe w szablonie — zarządza subskrypcją automatycznie.

Popularne operatory RxJS