Angular: Przykłady Angular Material

Angular 6, 7, 8+

0:00Gdy mamy już zainstalowany angular material moglibyśmy

0:04po prostu przejść do korzystania z komponentów które zawiera ale

0:09nim zaczniemy omawiać poszczególne komponenty chciałem ci pokazać kilka wbudowanych

0:13przykładów które są załączone do właśnie angular material jeśli

0:17użyję narzędzia angular cli i opcja generate pozwala nie tylko generować

0:22wbudowana opcje takie jak komponenty usługi ale pozwala mi także wykorzystać generatory

0:27które zainstalowaliśmy czyli jak mamy angular material material

0:31to mogę tutaj po dwukropku podać nazwę

0:35generatora ja nie podam nazwy generatora tylko podam opcje help i zobaczymy

0:39jakie generatory są tutaj dostępne w wersji generatora

0:44w wersji schematics którą posiadam zainstalowaną jak przewiniemy sobie trochę

0:48niżej to mamy available schematics i collection tu

0:52jest zbiór dostępnych generatorów których możemy użyć mamy tutaj formularz

0:56dashboard nawigację i nim przejdziemy dalej chciałbym ci podać kilka gotowych

1:00przygotowanych przez twórców ekranów żeby się zainspirować

1:05zobaczyć jak to może wyglądać jak to może działać a następnie spróbujemy

1:09takie ekrany zbudować całkowicie samemu okej czyli zaczniemy od czegoś

1:13bardzo ogólnego powiedzmy od ekranu nawigacji czyli

1:17tak ng generate

1:22tak samo angular material i

1:27następnie podaję tutaj jedną z tych opcji będzie to nav i teraz

1:31nim to zrobię warto by także stworzyć sobie jakieś dodatkowy moduł żeby

1:36nie generować tego po prostu głównym katalogu więc jeszcze nim to zrobimy ng generate module

1:41nazwę to material examples material examples dołączę

1:46ten moduł do głównego modułu aplikacji skrótem m i wygeneruję od razu

1:50moduł routingu żebyśmy mogli sobie dodać nawigację

1:54do tych komponentów które utworzymy okej

1:59mamy tutaj moduł następnie do tego modułu wygeneruję

2:03odpowiednie komponenty czyli ng generate angular material

2:07tutaj ta opcja nav o której przed chwilą

2:11wspominęliśmy i tu podaję ścieżkę i nazwę komponentów ścieżka będzie wyglądała

2:16w ten sposób czyli najpierw ścieżka do modułu następnie mogę podać katalog na przykład

2:20pages tutaj zrobimy to jako layout od razu

2:24nazwa komponentu layout czyli będzie to layout dla naszego modułu i

2:28wygenerujemy go ze schematu angular material na material

2:33examples layout i zobaczymy tutaj powstał już moduł

2:38czyli jak zobaczymy sobie app module

2:42tu powinien być zamontowany nasz material examples module

2:46co zrobiła flaga m app następnie tutaj

2:50jak widzisz powstał layout module

2:58layout material examples routing module layout

3:03layout component i automatycznie tutaj widzisz zostały dodane komponenty materiala

3:08czyli z pakietu angular material zostały zainstalowane odpowiednio wszystkie elementy które zawiera

3:12ten nasz layout komponent czyli toolbar button site nav icon list

3:17i teraz tak jeśli przejdziemy do routingu to

3:22możemy od razu powiedzieć sobie że jeśli ktoś wejdzie na główną stronę aplikacji to

3:26ma mu się załadować właśnie nasz komponent layout layout

3:31komponent upewnijmy się jeszcze że w app component html

3:35nie ma niepotrzebnych rzeczy czyli na głównym ekranie załadujemy tylko nasz

3:39layout czyli router-outlet wyświetli tylko komponent layout i zobaczmy

3:43jak to się zaprezentuje na stronie tutaj jak widzisz jest mały problem bo niby

3:47style załadowaliśmy a coś tu jest nie tak załadowaliśmy style skórki

3:52jak tutaj widzisz komponenty się wyświetlają mają wymiary

3:57nie mają kolorów i tutaj mamy komunikat że nie udało się załadować

4:01głównej skórki główna skórka to jest coś co

4:05pamiętasz dodawaliśmy tutaj do pliku angular json właśnie

4:10samo nam się dodało przez generator i teraz za każdym razem jak ten plik

4:14się zmienia gdy coś dodajemy lub zmieniamy należy zrestartować serwer

4:19ja tu korzystając z okazji zmienię tę skórkę powiedzmy wybiorę

4:24sobie którąś z gotowych indigo pink listę skórek

4:28dostępnych można znaleźć na stronie tutaj angular material w dokumentacji i zrestartuję

4:34serwer czyli przerwa przerywam

4:38jeszcze raz uruchamiam ng serve

4:42w skrócie mogę użyć po prostu s i gdy to mi wystartuje

4:46powinien załadować jeszcze raz ten plik konfiguracyjny i zapytać

4:50nową skórę czyli na nasz tutaj suchy pusty komponent

4:54nie ma kolorów ma tego rozmiary rozmiary ładowane są bezpośrednio z komponentu natomiast

4:58kolory ładowane są ze skórki dzięki temu wiele komponentów może

5:03współdzielić te same style w przeciwieństwie do styli izolowanych

5:07styli komponentów które są specyficzne dla konkretnego komponentu

5:11okej tutaj nam załadowało i jak widzisz od razu

5:15nabrało nam to kolorów tutaj mamy menu i to

5:19jest główny komponent nawigacyjny zawiera pasek u góry zawiera menu i

5:24zawiera tutaj listę linków kiedy mamy więc główny komponent

5:28layoutu spróbujmy wygenerować kilka dodatkowych komponentów i

5:32zagnieździć je wewnątrz tego naszego głównego komponentu

5:37layoutu czyli tak jak poprzednio wygenerujemy sobie kilka nowych komponentów ng

5:42generate angular material i

5:47co tam jeszcze było tam był dashboard i tak

5:52samo jak wcześniej wygeneruje to w odpowiednim katalogu czyli tak jak poprzednio

5:56będzie to material examples i

6:02tutaj nazwa te podkomponenty wewnętrzne umieszczę w jakimś podkatalogu

6:06na przykład nazwę go pages żeby komponenty które są głównymi

6:10ekranami znajdowały się w osobnym katalogu nie mieszały się z pozostałymi komponentami

6:14i będzie to na przykład dashboard example

6:22i w ten sposób jeszcze kilka komponentów wygenerujemy i

6:26zamieścimy tutaj w layout komponencie i teraz te poszczególne komponenty

6:30będziemy tutaj umieszczać jako children

6:34czyli jako dzieci tego komponentu żeby

6:38one w wyświetliły się w htmlu tutaj wewnątrz

6:42tego komponentu mamy add content here czyli tutaj ta cała

6:46biała przestrzeń w tym miejscu chcemy żeby ładowały się komponenty więc zagnieździmy

6:50router outlet i

6:55teraz te wszystkie dzieci które to wymienię będą zagnieżdżały się wewnątrz

6:59layout komponentu czyli jak podam tu ścieżkę powiedzmy path i główną ścieżką

7:04będziemy ładowali dashboard example component to komponent

7:08zapisze i w tym czasie uruchomimy generowanie kolejnego

7:13przykładu oprócz dashboard tam była tabela

7:17z danymi okej

7:23i zobaczymy jak się zmienił nasz html ale w tym miejscu gdzie była

7:27informacja place content here tutaj umieściliśmy nasz dashboard i

7:32ładują nam się karty karta ma menu jakąś przykładową

7:36treść czyli jest to dashboard on powinien się też elegancko skalować

7:40i jeszcze jest fajny przykład bo dla różnych rozmiarów on

7:44wykrywa szerokość ekranu jak widzisz zmienia układ zależny od

7:48szerokości ekranu menu także jest zablokowane dla dużego

7:52ekranu dla mniejszego ekranu menu zwija się i zmienia

7:57swój tryb na overlay czyli pojawia się na wierzchu zamiast z boku

8:01są to bardzo fajne funkcjonalności i angular material dokładnie

8:06angular material component development kit zawiera masę tego typu przydatnych narzędzi

8:11ok tutaj musimy wygenerować komponent table

8:15więc ja uruchomię generowanie jeszcze jednego komponentu i na tym poprzestaniemy

8:19będzie to address form i

8:24tutaj także dopiszę sobie adres for tym razem nazwiemy

8:30ten link table table

8:35example component okej i następnie

8:40ostatni czyli formularz adresowy powiedzmy

8:44nazwiemy go adresowany address

8:52form example component i następnie już można przejść do tych komponentów w

8:57naszym layout'cie mam tutaj 3 linki więc odpowiednio je pozmieniamy

9:01będzie to dashboard data

9:10table powiedzmy i address form

9:16zamiast zwykłych linków użyje router link to już jest

9:20zwykłe linki odświeżały przygotowały mi stronę na temat router link przeładuje je

9:24przy użyciu javascript czyli będzie to odpowiednio pusty link do dashboardu table

9:29do naszej tablicy i adres dokładnie

9:33tak samo jak tutaj ta ścieżka to będzie ścieżka

9:38do której będzie kierował nasz link okej zapiszę to wszystko zobaczmy

9:44aplikację późniejszej 3 linki pierwszy link to

9:48jest oczywiście nasz tutaj dashboard drugi

9:52link to jest tabela która tutaj w przykładzie zawiera sortowanie

9:57filtrowanie paginacje i tak dalej bardzo

10:01fajny przykład i mamy w ostatni link nasz

10:05formularz adresowy który zawiera różne pola razem z animacjami

10:09z walidacją błędów format jest dynamiczny możemy dodawać pola

10:13mamy też różne typy kontrolek wysyłanie

10:18wyświetla komunikat jak widzisz mamy dużo fajnych

10:22przykładów już wbudowanych jest to też sposób na naukę polecam

10:27tobie właśnie zajrzeć przejrzeć zobaczyć jak wygląda wygenerowany kod źródłowy my

10:32nie będziemy korzystać z tych gotowców tylko omówimy sobie poszczególne elementy

10:36poszczególne komponenty tych api i zaczynając od małych przykładów

10:40postaramy się zbudować podobny interfejs podobny ui ale

10:46wiedząc krok po kroku co się dzieje mielibyśmy troszkę większą kontrolę tak

10:51więc do zobaczenia w kolejnych lekcjach