Wzorce rozwoju Angular

Wykorzystaj Cursor i Claude Code do rozwoju Angular, od architektury komponentów po wzorce enterprise. Te przepisy obejmują funkcje Angular 17+, komponenty standalone, sygnały, wstrzykiwanie zależności i strategie testowania.

Szybka konfiguracja projektów Angular

Inicjalizacja Angular z AI

Cursor

1. Otwórz Cursor w swoim obszarze roboczym
2. Skonfiguruj Figma MCP: Ustawienia > MCP > Dodaj serwer > http://127.0.0.1:3845/sse
3. Aktywuj tryb Agent (Cmd/Ctrl + I)
4. Prompt: “Utwórz nowy projekt Angular 17 z komponentami standalone, Angular Material, Tailwind CSS i Jest do testowania”
5. Włącz tryb YOLO dla automatycznego wykonywania CLI
6. Przejrzyj angular.json i konfigurację projektu

Claude Code

1. Przejdź do katalogu projektów
2. Uruchom polecenie claude
3. Dodaj Figma MCP: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
4. Wykonaj: “Skonfiguruj Angular 17 z SSR, obsługą PWA, i18n, NgRx do zarządzania stanem i kompleksową konfiguracją testową”
5. Pozwól Claude obsłużyć całą konfigurację
6. Użyj /init dla specyficznego dla Angular CLAUDE.md

Konfiguracja kontekstu AI

Konfiguracja Figma MCP

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

.cursor/rules/angular-patterns.md

# Standardy rozwoju Angular

## Wytyczne architektury
- Używaj komponentów standalone (Angular 14+)
- Implementuj lazy loading dla funkcji
- Przestrzegaj przewodnika stylu Angular
- Używaj detekcji OnPush domyślnie

## Konwencje kodu
- Tryb strict TypeScript włączony
- RxJS do programowania reaktywnego
- Sygnały Angular do zarządzania stanem
- Najlepsze praktyki wstrzykiwania zależności

## Standardy testowania
- Testy jednostkowe z Jest
- Testy integracyjne z Testing Library
- Testy E2E z Playwright
- Minimum 80% pokrycia kodu

Rozwój komponentów

Projektowanie komponentów Angular

# PRD: Konwertuj projekty Figma na komponenty Angular
# Plan: Użyj Figma MCP do generowania komponentów

"Używając Figma MCP, wygeneruj komponent Angular z wybranego projektu:
1. Utwórz komponent standalone z właściwymi importami
2. Używaj Angular Material tam, gdzie to możliwe
3. Zastosuj detekcję zmian OnPush
4. Wyodrębnij tokeny projektu do zmiennych SCSS
5. Wygeneruj dyrektywy responsywnego układu"

# Przykładowy przepływ pracy
"Wybierz komponent Card w Figma i:
- Wygeneruj komponent standalone Angular
- Zmapuj na komponent Material Card
- Wyodrębnij tokeny podniesienia i odstępów
- Utwórz właściwości @Input() z wariantów Figma
- Dodaj właściwe interfejsy TypeScript"

Tokeny projektowe Figma do Angular

// Wyodrębnij system projektowy z Figma
"Używając Figma MCP get_variable_defs:
1. Pobierz wszystkie zmienne kolorów i odstępów
2. Wygeneruj zmienne Angular SCSS
3. Utwórz serwis tokenów projektowych
4. Skonfiguruj niestandardowe właściwości CSS"

// Wygenerowany: _design-tokens.scss
$color-primary: #1D4ED8; // Figma: Primary/Blue
$color-primary-dark: #1E40AF; // Figma: Primary/Dark
$spacing-xs: 0.5rem; // Figma: Spacing/XS
$spacing-sm: 1rem; // Figma: Spacing/S
$spacing-md: 1.5rem; // Figma: Spacing/M

:root {
  --color-primary: #{$color-primary};
  --color-primary-dark: #{$color-primary-dark};
  --spacing-xs: #{$spacing-xs};
  --spacing-sm: #{$spacing-sm};
  --spacing-md: #{$spacing-md};
}

// Wygenerowany: design-tokens.service.ts
@Injectable({ providedIn: 'root' })
export class DesignTokensService {
  readonly colors = signal({
    primary: '#1D4ED8',
    primaryDark: '#1E40AF'
  });

  readonly spacing = signal({
    xs: '0.5rem',
    sm: '1rem',
    md: '1.5rem'
  });
}

Wzorce komponentów standalone

Inteligentne tworzenie komponentów:

Przykład promptu AI

Utwórz komponent standalone UserDashboard, który:
1. Używa sygnałów Angular do zarządzania stanem
2. Implementuje detekcję zmian OnPush
3. Ma leniwie ładowane trasy potomne
4. Integruje się z UserService przez DI
5. Zawiera granicę błędów
6. Ma stany ładowania
7. Implementuje właściwe typy TypeScript
8. Używa komponentów Angular Material

Formularze reaktywne z AI

Formularz złożony

Zbuduj wieloetapowy formularz rejestracji z:
- Formularzami reaktywnymi z silnym typowaniem
- Walidatorami niestandardowymi (async i sync)
- Dynamicznymi polami formularza na podstawie wyboru użytkownika
- Form array dla powtarzających się sekcji
- Walidacją między polami
- Funkcją automatycznego zapisu
- Wskaźnikiem postępu

Kreator formularzy

Utwórz dynamiczny kreator formularzy, który:
- Ładuje schemat formularza z JSON
- Generuje typowane formularze reaktywne
- Obsługuje zagnieżdżone grupy formularzy
- Implementuje pola warunkowe
- Ma niestandardowe komponenty kontroli
- Waliduje względem schematu JSON

Zarządzanie stanem

Sygnały i RxJS

Nowoczesny wzorzec stanu:

Implementuj koszyk zakupowy używając sygnałów Angular:
1. Utwórz sygnały koszyka dla elementów, sumy, liczby
2. Implementuj sygnały obliczeniowe dla kalkulacji
3. Dodaj efekty do synchronizacji localStorage
4. Utwórz serwis z API opartym na sygnałach
5. Implementuj funkcjonalność cofnij/ponów
6. Dodaj optymistyczne aktualizacje
7. Obsługuj warunki wyścigu

Integracja NgRx

1. Konfiguracja store

   Skonfiguruj NgRx dla naszej aplikacji e-commerce:
   - Sklepy funkcji dla produktów, koszyka, użytkownika
   - Adaptery encji dla kolekcji
   - Efekty dla wywołań API
   - Selektory z memoizacją
   - Integracja Redux DevTools

2. Zaawansowane wzorce

   Implementuj najlepsze praktyki NgRx:
   - Wzorzec fasady dla dostępu do sklepu
   - Meta-reducery do logowania
   - Integracja router store
   - Optymistyczne aktualizacje
   - Strategie obsługi błędów

Wstrzykiwanie zależności

Zaawansowane wzorce DI

Pokaż wzorce wstrzykiwania zależności:
1. Multi-providers dla systemów wtyczek
2. Factory providers z zależnościami
3. Tokeny wstrzykiwania dla konfiguracji
4. Hierarchiczne injektory
5. Opcjonalne zależności
6. Forward references
7. Niestandardowe dekoratory

Notatka

💡 Wskazówka: Używaj AI do generowania kodu podstawowego dla providerów i tokenów, ale zawsze przeglądaj hierarchię wstrzykiwania, aby uniknąć zależności kołowych.

Architektura Angular

Wzorzec mikro-frontendów

Implementuj architekturę mikro-frontendów:
1. Skonfiguruj Module Federation
2. Utwórz aplikację powłoki
3. Zbuduj moduły zdalne
4. Implementuj wspólne zależności
5. Obsługuj routing między aplikacjami
6. Udostępnij stan uwierzytelniania
7. Implementuj granice błędów

Monorepo z Nx

Skonfiguruj monorepo Nx dla Angular:
1. Utwórz obszar roboczy Nx
2. Wygeneruj wiele aplikacji Angular
3. Utwórz współdzielone biblioteki
4. Skonfiguruj polecenia affected
5. Skonfiguruj cache budowania
6. Implementuj testy e2e
7. Skonfiguruj pipeline CI/CD

Optymalizacja wydajności

Strategie detekcji zmian

Optymalizacja OnPush

Optymalizuj komponent dla OnPush:
- Konwertuj na strategię OnPush
- Używaj niemutowalnych aktualizacji danych
- Implementuj funkcje trackBy
- Dodaj ChangeDetectorRef gdzie potrzeba
- Używaj async pipe właściwie
- Unikaj wywołań funkcji w szablonach

Przewijanie wirtualne

Implementuj przewijanie wirtualne dla dużych list:
- Używaj CDK virtual scroll
- Implementuj dynamiczne wysokości elementów
- Dodaj kotwiczenie przewijania
- Optymalizuj wydajność renderowania
- Obsługuj nawigację klawiaturową
- Dodaj funkcje dostępności

Optymalizacja rozmiaru pakietu

Analizuj i optymalizuj rozmiar pakietu:
1. Uruchom analizator pakietu
2. Implementuj lazy loading
3. Tree-shake nieużywany kod
4. Optymalizuj importy
5. Używaj dynamicznych importów
6. Skonfiguruj budżety budowania
7. Implementuj differential loading

Strategie testowania

Testowanie komponentów

Wzorzec testowania

Napisz kompleksowe testy dla komponentu UserProfile:
1. Testuj inicjalizację komponentu
2. Mockuj zależności serwisów
3. Testuj interakcje użytkownika
4. Weryfikuj zdarzenia wyjściowe
5. Testuj scenariusze błędów
6. Sprawdź dostępność
7. Testuj z różnymi inputami
8. Weryfikuj detekcję zmian

Testowanie serwisów

Utwórz testy dla AuthService:
- Mockuj wywołania HTTP
- Testuj zarządzanie tokenami
- Weryfikuj zachowanie interceptora
- Testuj obsługę błędów
- Sprawdź logikę ponawiania
- Testuj warunki wyścigu
- Weryfikuj czyszczenie

Internacjonalizacja

Implementacja i18n

Skonfiguruj internacjonalizację:
1. Skonfiguruj Angular i18n
2. Wyodrębnij wiadomości
3. Skonfiguruj pliki tłumaczeń
4. Implementuj przełącznik języka
5. Obsługuj formaty daty/liczb
6. Dodaj obsługę RTL
7. Skonfiguruj budowanie per locale

Zaawansowane wzorce

Niestandardowe dyrektywy

Utwórz zaawansowane dyrektywy:
1. Dyrektywa infinite scroll
2. Dyrektywa click outside
3. Dyrektywa resize observer
4. Dyrektywa intersection observer
5. Dyrektywa debounce input
6. Dyrektywa uprawnień
7. Dyrektywa stanu ładowania

Niestandardowe pipe’y

Zbuduj pipe'y wielokrotnego użytku:
- Safe HTML pipe
- Time ago pipe
- Currency converter pipe
- Search filter pipe
- Truncate pipe
- Markdown pipe
- Highlight pipe

Typowe problemy

Zapobieganie wyciekom pamięci

Audytuj i napraw wycieki pamięci:
1. Odsubskrybuj od observables
2. Usuń event listenery
3. Wyczyść timery/interwały
4. Zniszcz dynamiczne komponenty
5. Wyczyść cache'owane dane
6. Profiluj z DevTools

Rozwiązywanie zależności kołowych

Rozwiąż zależności kołowe:
- Zidentyfikuj kołowe importy
- Refaktoryzuj wspólny kod
- Używaj barrel exports właściwie
- Implementuj inwersję zależności
- Używaj forwardRef oszczędnie

Wdrożenie

Konfiguracja SSR

Skonfiguruj Angular Universal:
1. Dodaj obsługę SSR
2. Skonfiguruj serwer Express
3. Obsługuj API tylko przeglądarki
4. Implementuj transfer stanu
5. Optymalizuj renderowanie
6. Dodaj strategię cache'owania
7. Wdróż na host Node.js

Funkcje PWA

Implementuj Progressive Web App:
- Skonfiguruj service worker
- Dodaj obsługę offline
- Implementuj powiadomienia push
- Utwórz manifest aplikacji
- Dodaj prompt instalacji
- Obsługuj aktualizacje
- Testuj scenariusze offline

Wzorce migracji

AngularJS do Angular

Migruj starszą aplikację AngularJS:
1. Skonfiguruj tryb hybrydowy
2. Aktualizuj komponenty stopniowo
3. Konwertuj serwisy
4. Aktualizuj routing
5. Migruj formularze
6. Usuń zależności AngularJS
7. Zakończ migrację

Następne kroki

• Porównaj z wzorcami React
• Eksploruj wzorce TypeScript
• Naucz się wzorców testowania

Uwaga

Moc Angular wiąże się ze złożonością. Używaj AI do obsługi kodu podstawowego i wzorców, ale zawsze rozumiej podstawowe koncepcje dla debugowania i optymalizacji.