Angular - Od Zera Do Bohatera
- Opis
- Program
- Najczęściej zadawane pytania
- Notice
- Recenzje
Wprowadzenie do Angular – Szybki start.
Czego się nauczysz
- Instalacja i konfiguracja środowiska Angular oraz TypeScript
- Tworzenie komponentów, serwisów i dyrektyw w Angularze
- Korzystanie z dyrektyw
ngFor,ngIf,ngClassoraz innych wbudowanych mechanizmów Angulara - Implementacja wiązań danych: Property Binding, Event Binding, Two-Way Binding
- Zarządzanie stanem aplikacji za pomocą serwisów i Dependency Injection (wstrzykiwanie zależności)
- Obsługa zdarzeń, w tym emitowanie niestandardowych zdarzeń w komponentach
- Tworzenie formularzy i ich walidacja
- Wykorzystanie HTTP do komunikacji z serwerami REST API (GET, POST, DELETE, PATCH)
- Praca z Promises i Observables w Angularze
- Tworzenie i zarządzanie własnymi pipes
- Migracja kodu do ES6 oraz TypeScript
- Konfiguracja projektu do pracy z narzędziami deweloperskimi, w tym serwerem z automatycznym przeładowywaniem
- Integracja Firebase z aplikacją Angular
- Budowanie responsywnych i dobrze wyglądających interfejsów użytkownika
Wymagania
- Podstawowa znajomość HTML, CSS i JavaScript
- Chęć nauki Angulara i tworzenia nowoczesnych aplikacji webowych
- Wstępna znajomość składni ES6 może być pomocna, ale nie jest wymagana
- Nie musisz znać TypeScript – wszystko będzie wyjaśnione w trakcie kursu
Dla kogo jest ten kurs:
- Każdy kto ma trochę chęci i trochę czasu
- Dla początkujących programistów, którzy chcą nauczyć się Angulara od podstaw
- Dla programistów front-end chcących pracować z frameworkiem Angular w praktycznych projektach
- Dla każdego, kto chce tworzyć nowoczesne aplikacje webowe z wykorzystaniem Angulara
Opis
Ten kompleksowy kurs Angular przeprowadzi Cię krok po kroku przez proces budowania nowoczesnych aplikacji webowych, zaczynając od podstawowych narzędzi i technik, aż po zaawansowane rozwiązania i integracje. Nauczysz się pracować zarówno z Angular CLI, jak i bez niego, korzystać z ES6, TypeScript, oraz różnych funkcji Angulara takich jak dyrektywy, serwisy, wstrzykiwanie zależności, pipes i obsługa HTTP. Kurs składa się z 41 odcinków, z których każdy wprowadza nowe zagadnienia, rozwija projekt aplikacji i pokazuje praktyczne zastosowanie zdobytej wiedzy.
Odcinki kursu:
Instalacja narzędzi i tworzenie pierwszego projektu w Angular
Wprowadzenie do Angular CLI, instalacja narzędzi, stworzenie i konfiguracja pierwszego projektu.Tworzenie pierwszej aplikacji z wykorzystaniem Angular
Praca z dyrektywami Angulara:ng-model,*ngFor,ng-class.Tworzenie projektu od podstaw bez Angular CLI i TypeScript
Budowanie aplikacji Angular wyłącznie w czystym JavaScripcie, bez wsparcia narzędzi Angular CLI.Dodanie nowego komponentu do aplikacji
Tworzenie i integracja dodatkowego komponentu w głównym komponencie aplikacji.Dodanie Service do aplikacji i przeniesienie logiki
Tworzenie serwisów w Angularze i przenoszenie logiki biznesowej z komponentów do serwisów.Dependency Injection w Angular
Wyjaśnienie i zastosowanie wstrzykiwania zależności (Dependency Injection) w aplikacji Angular.Implementacja wykrywania zmian w Angularze
Automatyczna aktualizacja wyświetlanych danych w określonych odstępach czasu (np. losowy cytat).Podział kodu na moduły i ostateczne zmiany w aplikacji
Refaktoryzacja projektu – rozdzielanie kodu na moduły.Migracja aplikacji z ES5 do ES6
Przenoszenie aplikacji do standardu ES6.Konfiguracja projektu do pracy z ES6
Kompilacja kodu ES6 do ES5 i konfiguracja serwera deweloperskiego.Tworzenie klas w ES6
Definiowanie klas przy użyciu składni ES6 w Angularze.Moduły w ES6
Omówienie modułów ES6 i ich znaczenia dla struktury aplikacji.Migracja aplikacji do ES6
Przeniesienie pierwszej aplikacji do korzystania z ES6.Aktualizacja kodu do korzystania z typów w TypeScript
Wprowadzenie i zastosowanie typów w kodzie aplikacji.Modyfikatory dostępu w TypeScript: prywatny i publiczny
Omówienie różnic między prywatnymi a publicznymi modyfikatorami dostępu.Porównanie wersji aplikacji: ES5, ES6 i TypeScript
Analiza i omówienie, która wersja aplikacji jest najlepsza.Budowa aplikacji Konwerter Walutowy
Tworzenie kolejnej aplikacji, która będzie prostym konwerterem walut.Property Binding w Angularze
Omówienie i implementacja wiązania właściwości w komponentach.Event Binding w Angularze
Implementacja i omówienie wiązania zdarzeń.Two-Way Binding w Angularze
Zastosowanie dwukierunkowego wiązania danych w aplikacji Angular.Praca z klasami CSS w Angularze
Zastosowanie klas CSS w Angularze i nowe opcje ich użycia.Tworzenie serwisu przeliczającego waluty
Implementacja serwisu obsługującego przeliczanie różnych walut.Aktualizacja interfejsu użytkownika
Umożliwienie użytkownikowi wyboru waluty z listy rozwijanej.Tworzenie komponentu “CurrencySelectComponent”
Tworzenie komponentu listy rozwijanej do wyboru walut.Emitowanie niestandardowych zdarzeń w komponentach
Obsługa i emitowanie niestandardowych zdarzeń w Angularze.Dodanie dyrektywy strukturalnej ngIf
Zastosowanie dyrektywyngIfw aplikacji Angular.Praca z pipes w Angularze
Wprowadzenie i użycie wbudowanych pipes w Angularze.Tworzenie własnych pipes w Angularze
Definiowanie i tworzenie własnych pipes.Klient HTTP i wykonywanie pierwszego żądania GET
Wykorzystanie klienta HTTP do wysyłania żądań GET do serwera.Obsługa Promises w Angularze
Omówienie i implementacja Promises w operacjach asynchronicznych.Praca z Observables w Angularze
Zastosowanie Observables do obsługi żądań HTTP i operacji asynchronicznych.Tworzenie bazy danych Firebase
Konfiguracja darmowej bazy danych Firebase i jej integracja z aplikacją.Wykorzystanie Http.Get do pobierania danych z REST API
Pobieranie danych z Firebase za pomocą żądania HTTP GET.Wykorzystanie Http.Post do dodawania danych
Tworzenie nowych wpisów w Firebase za pomocą żądania HTTP POST.Wykorzystanie Http.Delete do usuwania danych
Usuwanie danych z Firebase za pomocą żądania HTTP DELETE.Wykorzystanie Http.Patch do aktualizacji danych
Edytowanie danych w Firebase za pomocą żądania HTTP PATCH.Optymalizacja aplikacji i poprawa wyglądu
Poprawa wyglądu, obsługa błędów i optymalizacja działania aplikacji.Walidacja formularza rejestracyjnego
Tworzenie formularza rejestracyjnego i jego walidacja.Zaawansowana walidacja formularza rejestracyjnego
Rozbudowa walidacji i dostosowanie formularza do różnych przypadków.Wyświetlanie komunikatów walidacyjnych
Implementacja komunikatów walidacyjnych w formularzu.Zakończenie pracy z formularzem rejestracyjnym
Finalizacja formularza i podsumowanie nauki pracy z formularzami w Angularze.
Tworzenie Komponentu:
Utworzenie Klasy Komponentu:
Użyj Angular CLI (Command Line Interface) do wygenerowania nowego komponentu. Można to zrobić za pomocą polecenia ng generate component nazwa-komponentu lub skrótu ng g c nazwa-komponentu.
To polecenie utworzy folder z nazwą komponentu zawierającym cztery pliki: plik klasy komponentu (.ts), plik HTML (szablon), plik CSS (style) oraz plik specyfikacji testowej.
Klasa Komponentu (.ts):
Klasa komponentu zdefiniowana jest z dekoratorem @Component, który zawiera metadane, takie jak selektor, szablon, style i inne.
W klasie tej definiuje się logikę komponentu, taką jak zmienne, funkcje i metody cyklu życia komponentu.
Szablon (.html):
Szablon komponentu definiuje strukturę HTML i sposób prezentacji danych.
Można używać interpolacji danych (np. {{ dane }}) i dyrektyw (np. *ngIf, *ngFor) do dynamicznego renderowania zawartości.
Style (.css/.scss):
Style dotyczące danego komponentu mogą być definiowane w oddzielnym pliku CSS/SCSS.
Główne Funkcje Komponentów:
Encapsulacja Danych i Logiki:
Komponenty zawierają logikę i dane dotyczące określonej części interfejsu użytkownika.
Reużywalność:
Komponenty mogą być projektowane w taki sposób, aby można je było używać w różnych częściach aplikacji.
Oddzielenie Obowiązków:
Oddzielają logikę aplikacji od logiki prezentacji, co ułatwia zarządzanie kodem i testowanie.
Interakcja z Inne Komponentami:
Komponenty mogą komunikować się ze sobą za pomocą wejść (@Input) i wyjść (@Output), co pozwala na tworzenie złożonych struktur danych i zachowań.
Integracja z Cyklem Życia Angulara:
Angular oferuje hooki cyklu życia komponentów (np. ngOnInit, ngOnDestroy), które można wykorzystać do zarządzania zachowaniem komponentu w różnych fazach jego życia.
Komponenty są zatem nie tylko sposobem na strukturalne i wizualne przedstawienie aplikacji, ale także na zarządzanie jej logiką i danymi. Dobrze zaprojektowane komponenty są kluczem do tworzenia skalowalnych i łatwych w utrzymaniu aplikacji Angular.
1. Serwisy i Wstrzykiwanie Zależności:
Serwisy Angularowe: To singletony, które mogą być używane do przechowywania i zarządzania danymi aplikacji. Dzięki wstrzykiwaniu zależności, serwisy mogą być dostępne w różnych komponentach aplikacji.
Wzorzec Observable z RxJS: Angular integruje się z biblioteką RxJS, która umożliwia zarządzanie asynchronicznymi operacjami i strumieniami danych za pomocą Observables. To podejście jest szczególnie użyteczne w aplikacjach z dynamicznie zmieniającymi się danymi.
2. Zarządzanie Stanem w Komponencie:
Lokalny Stan Komponentu: Komponenty mogą zarządzać własnym stanem za pomocą lokalnych zmiennych i logiki. Jest to odpowiednie dla prostych scenariuszy, gdzie dane nie muszą być udostępniane innym komponentom.
3. Centralny Magazyn Stanu:
NgRx: Biblioteka oparta na wzorcu Redux, która pozwala na zarządzanie globalnym stanem aplikacji. W NgRx stan jest przechowywany w centralnym magazynie, z którego komponenty mogą pobierać dane oraz do którego mogą wysyłać akcje w celu zmiany stanu.
Akita: Inna biblioteka do zarządzania stanem, która oferuje nieco bardziej uproszczony i deklaratywny sposób zarządzania stanem niż NgRx.
4. Wykorzystanie BehaviorSubject:
BehaviorSubject z RxJS: Jest to specjalny rodzaj Observable, który przechowuje „aktualną wartość”. Może być używany do tworzenia usług, które udostępniają dane i informują subskrybentów o ich zmianach.
5. Zarządzanie Stanem w Routingu:
Router State: Angular pozwala na przechowywanie stanu w kontekście routingu, co jest przydatne w scenariuszach, gdzie stan aplikacji jest powiązany z bieżącym adresem URL.
6. Persystencja Danych:
LocalStorage/SessionStorage: Do przechowywania danych między sesjami lub podczas nawigacji, można używać mechanizmów przechowywania wbudowanych w przeglądarki, takich jak LocalStorage lub SessionStorage.
Najlepsze Praktyki:
Encapsulacja: Trzymaj stan tam, gdzie jest on potrzebny; unikaj nadmiernego globalnego stanu, jeśli nie jest to konieczne.
Niezmienność: Traktuj stan jako niemutowalny, aby uniknąć nieprzewidzianych skutków ubocznych.
Selektory: W przypadku użycia NgRx, używaj selektorów do efektywnego pobierania i reagowania na zmiany w stanie.
Wybór odpowiedniej metody zarządzania stanem zależy od złożoności aplikacji, wymagań dotyczących wydajności i preferencji zespołu programistów. W prostych aplikacjach często wystarczają serwisy i lokalny stan komponentu, podczas gdy w bardziej złożonych projektach zaleca się użycie dedykowanych rozwiązań takich jak NgRx czy Akita.
Kod źródłowy dostępny na githubie
https://github.com/mariuszjurczenko/Angular2_AppFirst
https://github.com/mariuszjurczenko/Angular2_Converter
https://github.com/mariuszjurczenko/Angular2-formularz
https://github.com/mariuszjurczenko/Angular2-bookmarks2
