Wstęp do Angulara

Framework dla Nowoczesnych Aplikacji Webowych

Czym jest Framework?

Framework to zbiór gotowych narzędzi, bibliotek i wzorców projektowych, które ułatwiają i przyspieszają tworzenie oprogramowania. Można go porównać do szkieletu budynku – zapewnia solidną strukturę, na której budujemy naszą aplikację. Dzięki frameworkom nie musimy za każdym razem „wymyślać koła na nowo” – podstawowe funkcjonalności są już gotowe do użycia.

Backend vs Frontend – Dwie strony aplikacji webowej

Zanim poznamy Angulara, musimy zrozumieć podstawowy podział w aplikacjach webowych:

Backend (zaplecze) – to serwerowa część aplikacji, niewidoczna dla użytkownika:

• Przechowuje i przetwarza dane
• Zarządza bezpieczeństwem i autoryzacją
• Komunikuje się z bazami danych
• Udostępnia API (interfejs programistyczny) dla frontendu

Frontend (interfejs) – to część aplikacji, którą widzi i z którą wchodzi w interakcję użytkownik:

• Wyświetla dane w przeglądarce
• Obsługuje kliknięcia, formularze i inne interakcje
• Komunikuje się z backendem, pobierając i wysyłając dane
• Odpowiada za wygląd i wrażenia użytkownika (UX)

Popularne frameworki – Przegląd ekosystemu

Frameworki backendowe:

• Express.js – minimalistyczny framework dla Node.js (JavaScript)
• Django – kompleksowy framework dla Pythona
• Spring Boot – potężny framework dla Javy
• ASP.NET Core – framework Microsoftu dla C#

Frameworki frontendowe:

• Angular – rozbudowany framework od Google (TypeScript)
• React – biblioteka/framework od Meta/Facebook (JavaScript)
• Vue.js – progresywny framework (JavaScript)
• Svelte – kompilowany framework nowej generacji

Angular – Potężny Framework od Google

Angular to jeden z najpopularniejszych frameworków frontendowych, stworzony i rozwijany przez Google od 2016 roku (Angular 2+). Jest to kompletne rozwiązanie do budowania nowoczesnych, dynamicznych aplikacji webowych typu SPA (Single Page Application).

Co to jest SPA?

Single Page Application to aplikacja internetowa, która działa jak aplikacja desktopowa:

• Ładuje się tylko raz przy pierwszym wejściu
• Dynamicznie wymienia zawartość bez przeładowywania strony
• Zapewnia płynne i szybkie działanie
• Przykłady: Gmail, Google Maps, Netflix, Spotify

TypeScript – Język Angulara

Angular wykorzystuje TypeScript – rozszerzenie JavaScriptu stworzone przez Microsoft:

// JavaScript - brak typów, błędy wykrywane dopiero przy uruchomieniu
let wiek = 25;
wiek = "dwadzieścia pięć"; // Działa, ale może powodować błędy

// TypeScript - typy chronią przed błędami już podczas pisania
let wiek: number = 25;
wiek = "dwadzieścia pięć"; // BŁĄD! Edytor od razu to wykryje

Zalety TypeScript:

• Wykrywa błędy podczas pisania kodu (nie dopiero po uruchomieniu)
• Lepsze podpowiedzi w edytorze (IntelliSense)
• Łatwiejsze refaktorowanie i utrzymanie dużych projektów
• Każdy kod JavaScript jest poprawnym kodem TypeScript

Dlaczego Angular? – Kluczowe zalety

1. Kompletność – Angular dostarcza wszystko „w pudełku”:
   • System komponentów
   • Router (nawigacja)
   • Formularze
   • Komunikacja HTTP
   • Animacje
   • Testy
2. Wsparcie Google – ciągły rozwój i długoterminowa stabilność
3. Używany przez gigantów:
   • Google (Gmail, Google Cloud Console)
   • Microsoft (Office Online, Xbox)
   • Samsung
   • Deutsche Bank
   • Forbes
4. Angular CLI – potężne narzędzie wiersza poleceń

Angular 20 – Najnowsza wersja

W naszym kursie będziemy pracować z Angular 20 (listopad 2024), który wprowadza:

• Jeszcze lepszą wydajność
• Ulepszone narzędzia deweloperskie
• Pełne wsparcie dla najnowszych standardów webowych
• Zgodność wsteczną z poprzednimi wersjami

Wymagania techniczne

Przed rozpoczęciem pracy z Angularem potrzebujemy:

1. Node.js (wersja 18.19 lub nowsza) – środowisko uruchomieniowe JavaScript
2. npm – menedżer pakietów (instaluje się razem z Node.js)
3. Edytor kodu – zalecany Visual Studio Code z rozszerzeniami:
   • Angular Language Service
   • Angular Snippets
   • Prettier