Bilbioteka RxJS

Programowani reaktywne - paradygmat programowani oparty na zdarzeniach (strumieniach danych oraz zmianach zachodzących w tych strumieniach - min. wymiana danych przy pomocy równoległych strumieni).

RxJs - biblioteka do reaktywnego programowania, w Angularze wykorzystywana (domyślnie) w kontekście routingu, zapytań do bazy danych (HTTP), formularzy. Pełni istotną funkcję w kontekście obsługi asynchroniczności oraz …

Angular serwisy

Wstęp

Klasa TyperScriptowa - stworzona do centralizacji danych/zarządzania danymi (a docelowo stanem aplikacji). Jej zadaniem jest - dostarczania danych na potrzeby komponentów (np. poprzez komunikacja z API, komunikacja pomiędzy komponentami, przechowywanie stanu aplikacji).

Serwis posiada swój dekorator @Injectable - ten wskazuje na to, że dana klasa jest serwisem i jej …

Client-side rendering - bez zapytania do serwera (wymaga konfiguracji serwera tak aby zwracał index.html skąd angular przejmuje tworzenie ścieżki)

app.component.html - wykorzystanie <router-outlet></router-outlet> dyrektywy w celu wskazania, w którym miejscu powinien pojawić sie komponent związany z routingiem

<div class="container">
    [...]
    <div class="row">
        <div class="col-xs-12">
            <!-- load router …

Tabela przedstawiająca life cycle hooki (wg kolejności ich życia)

*Uruchamiane wielokrotnie

Dyrektywy podobnie jak komponenty mogą korzystać z haków cykli …

Podstawowe komendy

Proste generowanie komponentu

ng generate component nazwaKomponentu

np. ng generate component menu
> informacja o wygenerowanych plikach oraz o aktualizacji app.module.ts

--skiTests true // generowanie bez pliku testów

Zapis tej komendy można wykorzystać również w skróconej wersji

ng g c nazwaKomponentu

ng g c navbar --skipTests true
CREATE …

Mały projekt - cytaty z Gwiezdnych Wojen

Zainiscjowanie projekty przy pomocy Angular-CLI

ng new star-wars-quotes-app

dodanie frameworku css-owego materialize-css do zależności

npm install materialize-css@1.0.0

Konfigurowanie zależności stylowej w angular.json // wskazanie zarówno na styl css oraz na jego plik js

"styles": [
    "src/styles.css",
    "./node_modules/materialize-css/dist …

Przy pomocy ng-content można przekazywać treść oraz różne komponenty

ng-content jest swego rodzaju wskaźnikiem/selektorem pozwalającym na opakowanie elementu komponentem, innymi słowy na zagnieżdżenie innego komponentu, fragmentu kodu html lub treści (stringa) w ramach innego komponentu.

<button class="btn-floating teal add-button" (click)="clickButton.emit()">
  <ng-content></ng-content>
</button>

zastosowanie

<app-button (clickButton …

Angular i model MVC

Angular działa wg modelu MVC (Model/View/Controler)

Model - logiczna struktura danych w aplikacji (struktura kodu reprezentująca dane)

View - struktura kodu, która reprezentuje Interface aplikacji, z którym styka się użytkownik (wygląda aplikacji)

Controller - pośredniczy pomiędzy widokiem a modelem (reprezentuje logię działania aplikacji)

Inne pojęcia zw. z …

Angular umożliwia stworzenie 2 rodzajów formularzy tzw. reaktywnych (reactive) oraz szablonowych (template-driven)

Reaktywne formularze -zapewniają bezpośredni dostęp do obiektów modelu. Są bardziej skalowalne i łatwiejsze w ponownym użytkowaniu. [forma walidacji: funkcja, przewidywalność: synchroniczna, model danych: ustrukturyzowany i niezmienny]

Szablonowe formularze - uzależnione są od dyrektyw w tworzeniu i manipulowaniu obiektu modelu …

@Input oraz @Output

1) przekazanie danych 'w dół' (od rodzica do dziecka)

@Input - Dekoratory pozwalające na rozbicie logiki aplikacji na mniejsze części/komponenty i komunikowanie się danymi pomiędzy nimi. Dekorator @Input można porównać do właściwość (property/props) komponentu w React tzn. pozwala na przekazanie do komponentu danych np.

// rodzic
<app …

Angular wprowadzenie

Angular opraty jest o TypeScript

Aplikacje budowane są z modułów, które składają się komponentów (w przypadku małej aplikacji może istnieć jeden moduł - root module). Każdy z komponentów składa się z klasy pisanej w TS oraz szablonu w HTML. Pierwszy z nich odpowiada za informacje, które powinny być widoczne …