Angular od zera do bohatera

Wprowadzenie do Angular - Szybki start. Rozpoczęcie nowego projektu opartego o Angular wymaga stworzenia odpowiedniej struktury folderów, skonfigurowania środow

Stworzony przez Mariusz Jurczenko

120,00 zł

30 dni gwarancji zwrotu pieniędzy

Rozpocznij naukę teraz, zapłać do 30 dni

Polska obsługa i faktura

W cenie szkolenia otrzymasz

calendar_clockPłacisz raz, wracasz kiedy chcesz

licenseCertyfikat ukończenia

currency_exchange30 dni gwarancji zwrotu

headset_micWsparcie online

forumDostęp do grupy dyskusyjnej

database_uploadAktualizacje w cenie

W skrócie

Zaczniesz od zera: instalacja narzędzi, pierwszy projekt z Angular CLI i bez niego.

Poznasz komponenty, serwisy, Dependency Injection, moduły i wykrywanie zmian.

Opanujesz wiązania danych, dyrektywy, pipes oraz klienta HTTP, Promises i Observables.

Zbudujesz formularze z walidacją i użyjesz Firebase do operacji REST: GET, POST, DELETE, PATCH.

Dlaczego warto wybrać to szkolenie

To praktyczny kurs od instalacji po gotowe funkcje. Najpierw uruchomisz projekty z Angular CLI i bez niego, a potem poznasz komponenty, serwisy, DI, moduły i mechanizm wykrywania zmian.

Kurs obejmuje nowoczesny JavaScript: przejście z ES5 do ES6 i TypeScript, pracę z szablonami, wiązaniami, dyrektywami i pipes, klienta HTTP, Promises i Observables, a na końcu formularze z walidacją oraz integrację z Firebase.

Start od podstaw – Instalacja, konfiguracja i pierwszy projekt krok po kroku.
Praca bez i z CLI – Poznasz dwa podejścia: ręcznie oraz przy użyciu Angular CLI.
Nowoczesny JavaScript – Przejście ES5 → ES6 → TypeScript na tym samym przykładzie.
HTTP i formularze – REST, walidacja, komunikaty błędów i integracja z Firebase.

Czego się nauczysz?

1
Konfiguracja środowiska i nowy projektZainstalujesz narzędzia, ustawisz strukturę folderów i uruchomisz pierwszy projekt.
2
Angular CLI: generowanie i skracanie pracyWykorzystasz Angular CLI do tworzenia komponentów i innych elementów bez powtarzalnych czynności.
3
Komponenty i bootstrap aplikacjiStworzysz pierwszy komponent i uruchomisz aplikację, poznając podstawowy przepływ Angular.
4
Serwisy i Dependency InjectionWyodrębnisz logikę do serwisów i wstrzykniesz je tam, gdzie są potrzebne.
5
Moduły i podział koduPodzielisz aplikację na pliki i moduły, by utrzymać porządek i czytelność.
6
Szablony i wiązania danychPoznasz property binding, event binding oraz two‑way binding w praktyce.
7
Dyrektywy i klasy CSSUżyjesz ngIf, *ngFor i opcji sterowania klasami CSS w komponentach.
8
Pipes i własny pipeDodasz pipes do formatowania i utworzysz własny pipe na potrzeby aplikacji.
9
HTTP, Promises i ObservablesWykorzystasz klienta HTTP oraz operacje REST: GET, POST, DELETE i PATCH z użyciem obietnic i obserwowalnych.
10
Firebase i formularze z walidacjąUtworzysz bazę w Firebase, pobierzesz i zapiszesz dane oraz dodasz formularz rejestracyjny z komunikatami błędów.

Zobacz więcej Zobacz mniej

Dla kogo jest to szkolenie

Dla osób zaczynających przygodę z Angular od zera.
Dla programistów JavaScript przechodzących na ES6 i TypeScript.
Dla frontendowców, którzy chcą poznać komponenty i serwisy.
Dla tych, którzy chcą zrozumieć wiązania, dyrektywy i pipes.
Dla osób potrzebujących pracy z HTTP i REST w Angular.
Dla uczących się walidacji formularzy i komunikatów błędów.
Dla chcących pracować z Promises oraz Observables w Angular.
Dla osób planujących użyć Firebase w prostej aplikacji.

Wymagania

Brak formalnych wymagań wstępnych — szkolenie zaczyna się od podstaw.

Opis szkolenia

Angular od zera do bohatera to przystępne wprowadzenie prowadzące od instalacji narzędzi po działające funkcje. Zaczniesz od stworzenia projektu z Angular CLI i bez niego, poznasz komponenty, serwisy oraz Dependency Injection. Kolejno przejdziesz przez wykrywanie zmian i porządkowanie kodu w modułach. Następnie dotkniesz ES5, ES6 i TypeScript, a potem szablonów, wiązań i dyrektyw. W finale pracujesz z klientem HTTP, Firebase oraz formularzami z walidacją. Kod źródłowy dostępny na GitHub.

Start i pierwsze projekty

Na starcie przygotujesz środowisko pracy: zainstalujesz wymagane narzędzia, TypeScript i ustawisz strukturę folderów. Stworzysz pierwszy komponent i uruchomisz funkcję bootstrap. Z pomocą Angular CLI wygenerujesz potrzebne elementy bez powtarzalnych czynności, a następnie wykonasz analogiczny projekt całkowicie od podstaw, bez użycia CLI. Dodasz kolejny komponent osadzony w komponencie głównym i sprawdzisz, jak spinać elementy aplikacji w spójną całość. Wprowadzisz też proste dyrektywy, pętle w szablonie i klasy CSS, by zobaczyć pierwsze efekty.

Serwisy, DI, moduły i wykrywanie zmian

W kolejnych krokach przeniesiesz logikę do serwisów i nauczysz się korzystać z Dependency Injection. Zmienisz fragmenty aplikacji, aby zobaczyć, jak działa wykrywanie zmian i kiedy interfejs reaguje na aktualizacje danych. Następnie wprowadzisz porządki: dokonasz poprawek, rozdzielisz kod na oddzielne pliki i moduły, dzięki czemu projekt stanie się czytelny. Zobaczysz, jak uporządkowana struktura ułatwia rozwój i utrzymanie mniejszej aplikacji.

ES5, ES6 i TypeScript w praktyce

W tej części przeniesiesz aplikację do ES6, mając skonfigurowany projekt kompilowany do ES5 oraz serwer deweloperski, który automatycznie przeładowuje aplikację po zmianach. Poznasz klasy i moduły w ES6 oraz wygodniejszą składnię. Następnie zaktualizujesz kod do korzystania z typów w TypeScript i sprawdzisz prywatny oraz publiczny modyfikator dostępu. Ostatecznie zobaczysz trzy wersje tej samej prostej aplikacji: w ES5, ES6 i TypeScript.

Szablony i wiązania danych

Szczegółowo przyjrzysz się szablonom Angulara, tworząc prostą aplikację – Konwerter Walutowy. Zaczniesz od property binding i event binding, a następnie dodasz two-way binding, by jednocześnie odczytywać i zapisywać dane. Poznasz opcje pracy z klasami CSS. Napiszesz serwis do przeliczania walut i zaktualizujesz interfejs użytkownika. Zbudujesz komponent CurrencySelectComponent z listą rozwijaną oraz nauczysz się emitować własne zdarzenia z komponentów, aby komunikować zmiany w aplikacji.

Dyrektywy, HTTP, Observables i formularze

Rozszerzysz aplikację o dyrektywy strukturalne, dodając ngIf. Skorzystasz z gotowych pipes i utworzysz własny pipe. Następnie użyjesz klienta HTTP do pracy z REST: pobierzesz dane (Http.Get), dodasz nowe rekordy (Http.Post), usuniesz (Http.Delete) i zaktualizujesz (Http.Patch). Zobaczysz, jak działają Promises oraz Observables. Utworzysz bazę w Firebase i połączysz ją z aplikacją. Na koniec oczyścisz listę zakładek, poprawisz responsywność, obsłużysz błędy i zbudujesz formularz rejestracyjny z walidacją i komunikatami.

Zobacz więcej Zobacz mniej