Angular - poznaj zaawansowane techniki i koduj efektywniej!

Opanowałeś już podstawy Angulara i wykorzystujesz go w swoich projektach, ale masz poczucie, że nie wykorzystujesz w pełni potencjału tego potężnego narzędzia? Dobrze trafiłeś!

Angular pozwala na szybkie i sprawne tworzenie złożonych aplikacji. Dzięki wiązaniom renderowanie interfejsu jest bardzo wygodne, a automatyczne wykrywanie zmian sprawia, że Twoje dane w niemal magiczny sposób pojawiają się na ekranie. Aplikacje to jednak nie tylko sam interfejs użytkownika.

Bardzo łatwo jest dodawać kolejne funkcje i opcje - ale tylko do pewnego momentu.

Bez odpowiedniej struktury i architektury prosta aplikacja może bardzo szybko przerodzić się w rozbudowane monstrum, nad którym nie mamy żadnej kontroli. Na szczęście - w Angularze jest bardzo wiele mechanizmów, pozwalających od samego początku zapanować nad strukturą aplikacji. Wiele wbudowanych mechanizmów pozwala konstruować aplikacje w oparciu o sprawdzone wzorce projektowe i dobre praktyki.

CO JEST ZAWARTE  W KURSIE?

W kursie prowadzący poruszy takie tematy, jak

• wzorce projektów na praktycznych rozwiązaniach popularnych problemów

• mechanizmy wstrzykiwania zależności

• formularze, omówione na wielu praktycznych przykładach

• walidacja i manipulacja strukturą formularzy oraz związane z nimi przydatne triki

• ogromna dawka praktycznej wiedzy na temat RxJS

• komunikacja z serwerem REST, oraz logowanie i Autentykacja

• dynamiczny wielopoziomowy routing z kontrolą dostępu

Po przerobieniu całego materiału będziesz:

• znał techniki budowania struktury aplikacji

• potrafił w pełni wykorzystać mechanizmy, które oferuje Angular

• poznasz narzędzia pozwalające utrzymać porządek w kodzie oraz wysoką produktywność w pracy nawet wtedy, gdy aplikacja będzie bardzo rozbudowana

• będziesz potrafił tworzyć narzędzia i usługi wielokrotnego użytku, co znacznie ułatwia i przyspiesza pracę nad funkcjonalnościami Twojej aplikacji

  
  

BUDOWANIE STRUKTURY APLIKACJI

Już w pierwszej sekcji kursu przekonasz się, dlaczego wzorzec odwracania zależności i mechanizm wstrzykiwania są bardzo ważne dla utrzymania jakości kodu aplikacji.

Pokażemy Ci:

• jak można zarządzać zależnościami przy użyciu wzorca Fabryki i jak zwiększa to elastyczność aplikacji

• jak mechanizm Wstrzykiwania zależności dostępny w Angularze ułatwia ten proces

• jaka jest różnica pomiędzy statycznym i automatycznym odnajdywaniem zależności

• oraz poznasz sposoby podmieniania i przesłaniania zależności

Dzięki temu Twoje aplikacje będą bardziej elastyczne i podmiana lub przetestowanie funkcjonalności nie będą problemem.

WZORCE PROJEKTOWE W DZIAŁANIU 

Angular to nie tylko statyczna struktura i statyczna hierarchia.

Pokażemy Ci:

• techniki zarządzania modułami i usługami, pozwalające między innymi na używanie wzorca Sigleton dla globalnych współdzielonych danych

• jak dzięki hierarchiom tworzyć usługi o krótkim cyklu życia, które będą tworzone i niszczone wedle potrzeb

• kilka różnych technik określania zasięgu i dostępu do usług, tak, by tylko niektóre komponenty miały dostęp do usług, a inne nie

• na przykładzie usługi Selection zobaczysz, jak sprawić, by tylko wybrane komponenty mogły współdzielić informacje o zaznaczeniu

  
  

POPRAWNE BUDOWANIE FORMULARZY

W kolejnych dwóch sekcjach zajmiemy się dwoma podejściami do budowania Formularzy. Zobaczysz jak:

• zbudować formularz sterowany szablonem

• jak wykorzystać formularze reaktywne

• dlaczego formularze to odrębny mechanizm służący zarządzaniu i walidacji danych

• jakie są zalety modelu automatycznego, a jakie modelu własnoręcznie utworzonego

• formularze nie muszą być powiązane z widokiem, a ich struktura nie musi być nudna i statyczna
  

Podczas całego Kursu stworzymy kilka praktycznych formularzy, na których zobaczysz różne możliwości ich budowania, dynamicznej modyfikacji oraz manipulacji stanem oraz danymi formularza. Zobaczysz, że formularz może zostać rozbity na komponenty, a nawet być wstrzyknięty jako usługa, co pozwala na jego wielokrotne użycie.

WALIDACJA DANYCH

Nie pominiemy także kwestii walidacji danych. Zobaczysz:

• jak prawidłowo wykorzystywać wbudowane walidatory

• jak przekazywać parametry i konfigurować walidatory

• jak dzięki wzorcowi obserwatora obsługiwać asynchroniczne walidacje z serwera

  
  

Na koniec sekcji poświęconej walidacji zobaczysz sposoby na ułatwienie sobie pracy poprzez zautomatyzowanie walidacji i wyświetlania błędów w prostym, uniwersalnym komponencie walidacji.

OBIEKTY OBSERWOWALNE RxJS

Nie zapomnieliśmy też o komunikacji z serwerem i obsłudze asynchronicznych danych. Całą sekcję Kursu poświęcono efektywnemu pobieraniu danych do zaprezentowania w interfejsie aplikacji. Na początku zobaczysz:

• jak skonfigurować moduł HttpClient i pobrać dane z prostego serwera, który załączony jest do kursu

• omówimy różne praktyczne techniki pracy z obiektami obserwowalnym

• jak uniknąć zduplikowanych zapytań do serwera

• jak zbudować efektywny cache zapytań

• jak prawidłowo obsługiwać błędy występujące w strumieniach

KOMUNIKACJA Z SERWEREM

W kolejnych lekcjach zobaczysz jak krok po kroku zbudować kod do komunikacji z API typu REST, poczynając od pobierania obiektów i list, po zapisywanie zmian na serwerze. W każdej z lekcji pokazujemy Ci mechanizmy wysyłania parametrów i nagłówków w zapytaniu, jak i praktyczne techniki, takie jak filtrowanie wyników czy dynamiczne stronicowanie.

LOGOWANIE I AUTORYZACJA UŻYTKOWNIKA Z JSON-WEB-TOKEN

Komunikacja z API nie może obejść się bez logowania i autentykacji użytkownika. Na przykładach zobaczysz:

• jak obsłużyć logowanie

• jak pobrać i zapisać token

• jak dołączyć dane autoryzacyjne do zapytań

• jak rozwiązać globalnie problem autentykacji dzięki wzorcowi Łańcucha zobowiązań i mechanizmowi multi wstrzykiwania interceptorów

• poznasz wiele praktycznych kwestii związanych z Strumieniami zdarzeń i biblioteką RxJS

• zobaczysz przykłady zimnych i ciepłych źródeł oraz przykłady emisji zdarzeń typu unicast i multicast

WIELOPOZIOMOWY, DYNAMICZNY INTERFEJS UŻYTKOWNIKA 

Ostatnia sekcja kursu poświęcona jest routingowi, gdzie zobaczysz

• jak zorganizować wielopoziomowy interfejs i wstrzyknąć do niego dane

• jak prawidłowo obsłużyć nawigację i przejścia pomiędzy ekranami aplikacji

• jak dzięki nazwanym gniazdom dynamicznie podmieniać sekcje aplikacji

• jak obsłużyć parametry w adresie strony

• jak doładować moduły aplikacji na życzenie

• jak wykorzystać ten sam komponent dzięki strategiom routingu

• oraz o wiele więcej 

  
  

Oczywiście routing to nie tylko interfejs. Zobaczysz jak opóźnić ładowanie i poczekać na dane a także jak przekazać je do komponentu. Dzięki wzorcom kompozytu i adaptera zobaczysz jak zbudować czystą architekturę aplikacji pozwalającą na swobodną reorganizację wyglądu twojej aplikacji.

AUTORYZACJA I ROUTER

Na koniec zobaczysz także jak połączyć mechanizmy autoryzacji i routingu, by nie tylko ograniczyć dostęp niepowołanym osobom do wybranych części aplikacji, ale także by załadować i uruchomić moduły zależnie od uprawnień aktywnego użytkownika.

ROZWIĄZYWANIE CZĘSTYCH PROBLEMÓW

Chociaż kurs prezentuje techniki zaawansowane, to przygotowany został w taki sposób, by każdy, kto zna podstawy Angulara mógł wykorzystać przedstawione w nim techniki. Jeżeli przerobiłeś Kurs Angular od podstaw, oraz rozumiesz komponenty i wiązania - to bez problemu dasz sobie radę z przyswojeniem zawartej w Kursie wiedzy. 

Dla kogo jest ten kurs?

Kurs jest świetnym wprowadzeniem zarówno do koncepcji Angular jak i praktycznego zastosowania tego narzędzia w projektach. Polecany jest wszystkim, którzy chcą usprawnić, przyspieszyć i usystematyzować sposób, w jaki budują aplikacje internetowe - a w szczególności aplikacje typu single page.

Jest to kurs na poziomie wprowadzającym dla osób, które znają podstawy HTML, CSS i JavaScript.

W pierwszych sekcjach kursu omówione są różnice między podejściem klasycznym do pracy z przeglądarką a podejściem bardziej produktywnym, które oferuje Angular. W kursie używane są sporadycznie najnowsze technologie front-end, takie jak WebPack, EcmaScript, TypeScript oraz Rx.JS. Nie musisz jednak znać żadnej z tych technologii.

Kurs wykorzystuje je w minimalny sposób, tak, by pokazać ich możliwości we współpracy z Angular i zachęcić do ich dalszego poznawania.