Angular – Od Zera Do Bohatera

4.8 z 5
4.8
5 opinii

Wprowadzenie do Angular – Szybki start.

Czego się nauczysz
   *  Angular CLI
   *  Konfiguracja projektu
   *  ES5, ES6, TypeScript
   *  Dependency Injection
   *  Propery binding
   *  Event binding
   *  Two-way binding
   *  Komponent, Moduł
   *  Get, Post, Delete, Patch

Wymagania

Chęć dobrej zabawy !!!

Dla kogo jest ten kurs:

  • Każdy kto ma trochę chęci i trochę czasu

Opis

Rozpoczęcie nowego projektu opartego o Angular wymaga stworzenia odpowiedniej struktury folderów, skonfigurowania środowiska, zainstalowania TypeScript, definicji typów, stworzenia pierwszego komponentu i wywołania funkcji bootstrap.

Zacznijmy budowanie aplikacji od stworzenia potrzebnych komponentów przy pomocy Angular CLI. Dzięki pomocy Angular CLI, nie musimy już powtarzać wielu manualnych czynności co znacznie przyspiesza pracę z Angular.

1 odcinek zainstalujemy wszystkie potrzebne narzędzia oraz zrobimy 1 projekt w Angular
2 odcinek wykonamy nasz pierwszy projekt w Angular.  Wykorzystamy między innymi derektywy ng-model, *ngFor, ng-class
3 odcinek zrobimy  projekt w Angular całkowicie od  podstaw !!! nie wykorzystując narzędzia Angular CLI
ani też nie pisząc w  TypeScriptcie  wszystko zrobimy w czystym JavaScripcie !!!
4 odcinek dodamy kolejny komponent który będzie zawarty w  głównym komponencie.
5 odcinek dodamy Service i  przeniesiemy logikę do service.
6 odcinek bedzię Dependency Injection.
7 odcinek zrobimy małą zmianę w naszej aplikacji w celu pokazania jednej  ważnej cechy angulara, która jest wykrywanie zmian. Powiedzmy, że  zamiast po prostu wyświetlać losowy cytat, kiedy tylko odświeżymy stronę  teraz chcemy, aby automatycznie wyświetlić inny cytat co  jakiś  określony czas .
8 odcinek zrobimy kilka ostatecznych zmian w naszej aplikacji i dokonamy podziału naszego kodu na oddzielne pliki, moduły.
9 odcinek chcemy przenieść aplikację którą pisaliśmy w poprzednich odcinkach do ES6
10 odcinek mamy już skonfigurowany projekty do pracy z ES6 który jest kompilowany  do ES5 orazt mamy skonfigurowany serwer deweloperski, który  automatycznie przeładowuje naszą aplikację po każdej zmianie.  Jesteśmy teraz gotowi do skorzystania z  nowych funkcji ES6.

11 odcinek zobaczymy, jak używać klas w ES6. Angular zapewnia własne metody  pomocnicze do definiowania klas, używając ES6 mamy wygodniejszą składnię  tworzenia klas. Zostaje wprowadzone słowo kluczowe “class”
12 odcinek przyjrzymy się modułom w ES6, które są jedną z najważniejszych zmiany wprowadzonych ze specyfikacją ES6.
13 odcinek mamy już przeniesioną naszą pierwszą aplikację do korzystania z nowych Funkcji javascriptu wprowadzonych ze specyfikacją ES6.  W kilku kolejnych odcinkach będziemy robić prawie to samo, ale z TypeScriptem.
14 odcinek będziemy aktualizować nasz kod do korzystania z typów.
15 odcinek omówimy inną użyteczną cechę TypeScriptu jak prywatny oraz publiczny modyfikator dostępu.
16 odcinek w tym momencie stworzyliśmy trzy różne wersje tej samej prostej  aplikacji stosując ES5, ES6 oraz TypeScript więc teraz omówimy która z  nich jest najlepszym rozwiązaniem.
17 odcinek w tej części przyjrzymy się bardziej szczegółowo szablonom w Angularze. Będziemy budować kolejną prostą aplikację, która będzie Konverterem Walutowym.
18 odcinek propery binding
19 odcinek event binding
20 odcinek w naszej aplikacji mamy propery binding oraz  event binding wiazania  jednokierunkowe. Teraz dodamy two-way binding “wiązanie dwukierunkowe”.

21 odcinek zobaczymy jeszcze kilka nowych opcji, które mają do czynienia z klasami css.
22 odcinek napiszemy service, który będzie pomagał nam w przeliczaniu roznych walut.
23 odcinek będziemy aktualizować nasz interfejs użytkownika, tak aby pozwolić użytkownikowi wybrać dowolną walutę z listy rozwijanej.
24 odcinek “CurrencySelectComponent”  Listę rozwijaną, w której użytkownik będzie mógł wybrać dowolną walutę.
25 odcinek obaczymy jak Emitować niestandardowe zdarzenia w naszych komponentach używając Angular.
26 odcinek dodamy do naszej aplikacji dyrektywę strukturalną ngIf.
27 odcinek dodamy do naszej aplikacji pipes .
28 odcinek stworzymy nasz własny  pipe.
29 odcinek skorzystamy z klienta HTTP, którego możemy użyć do wysyłania żądań http w  naszych aplikacjach wykorzystujących Angular. Pokażę, jak wykonać  pierwsze żądanie http.  Będzie to żądanie get .
30 odcinek będziemy omawiać Promises (obietnice),  które są wykorzystywane do operacji asynchronicznych takich jak wykonywanie żądań http.

31 odcinek zajmiemy się observables, czyli obserwowalne. W Angular używajac  klienta HTTP możemy używać observables – obserwowalne, które są podobne  do promises – obietnic, ale są o wiele potężniejsze i dają o wiele  więcej możliwości.
32 odcinek utworzymy sobie baze danych Firebase dostępną za darmo od google. Bazę  danych bedziemy wykorzystywać w kolejnych 4 odcinkach, gdzie bedziemy  wykorzystywać klienta http i generować zapytania do naszej bazy. REST  API.
33 odcinek stworzymy service gdzie wykorzystamy klienta Http.Get i będziemy pobierać dane z naszej bazy korzystając z REST API.
34 odcinek dodamy Http.Post i będziemy tworzyć nowe zakładki  korzystając z REST API.
35 odcinek dodamy Http.Delete i będziemy usuwać zakładki korzystając z REST API.
36 odcinek dodamy Http.Patch i będziemy edytować zakładki korzystając z REST API.
37 odcinek czyszczenie zakładek,  poprawa wyglądu (responsywność),  obsługa błędów
38 odcinek jak sprawdzać poprawność formularza rejestracyjnego. Jako przykład utworzymy oczywiście formularz rejestracyjny.
39 odcinek dalej sprawdzamy poprawność formularza rejestracyjnego.
40 odcinek wyświetlamy odpowiednie komunikaty walidacyjne.
41 odcinek zakończenie pracy z formularzem rejestracyjnym.

Tworzenie komponentów w Angularze jest jednym z podstawowych aspektów pracy z tym frameworkiem. Komponenty są kluczowymi budulcami aplikacji Angular, umożliwiając tworzenie interaktywnych interfejsów użytkownika. Oto podstawowe kroki i funkcje komponentów 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.
Zarządzanie stanem w aplikacjach Angular jest kluczowym aspektem w tworzeniu responsywnych i dobrze zorganizowanych interfejsów użytkownika. Istnieje kilka metod i wzorców, które można wykorzystać w Angularze do efektywnego zarządzania stanem:

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.
4.8
4.8 z 5
opinie 5

Szczegóły oceny

5 ⭐️
4
4 ⭐️
1
3 ⭐️
0
2 ⭐️
0
1 ⭐️
0

{{ review.user }}

{{ review.time }}
 

Pokaż więcej
Proszę się zalogować, aby napisać opinię
Angular – Od Zera Do Bohatera
Kategoria:
4.8 z 5
4.8
5 opinii
Cena:
PLN 300 PLN 50