Angular: Instalacja Material Design

Angular 6, 7, 8+

0:00Na pewno słyszałeś o google material design czyli

0:04zestawie styli i komponentów do budowania bogatych złożonych

0:09interfejsów w tej lekcji skorzystamy z angular material

0:13czyli właśnie material design zasad komponentów przygotowany specjalnie

0:17no właśnie do współpracy z angularem tutaj na stronie material

0:21angular jak wpiszemy sobie to guides no to w sekcji getting started

0:25oczywiście krok po kroku jest proces instalacji i on składa się z sześciu

0:29kroków i teraz możemy po kolei wykonać te wszystkie kroki ręcznie

0:34a możemy także skorzystać z alternatywy a mianowicie

0:38skorzystać z mać z angular schematics zwany inaczej devkit czy jest zestaw takich

0:42generatorów które pozwalają doinstalować do naszej aplikacji pewne wtyczki

0:46pluginy tu skorzytam z polecenia ng add i po ng add możemy

0:50podać nazwę pakietu który zawiera generatory tak pakietów jest

0:54więcej my na razie skorzystamy sobie z tego ng add ja

0:59to wkleję do terminalu czyli tutaj terminal ng add angular material

1:03zainstalujemy to przy użyciu właśnie tych gotowych

1:07schematów gotowych generatorów a następnie żeby nie było tu automatycznie

1:12coś się zmienia nie wiemy dlaczego sprawdzimy po kolei z tymi

1:16krokami czy faktycznie generator prawidłowo te kroki wykonał więc jeśli będziesz

1:20chciał chciała wykonać te kroki ręcznie możemy możesz prześledzić

1:24to razem ze mną jeśli nie można po prostu użyć

1:28tego generatora polecam do końca te lekcji zostać zobaczyć po

1:32kolei te kroki będziemy wiedzieli co ten generator za nas zrobił więc

1:36w przyszłości gdy użyjemy tego generatora nie będzie też niespodzianek będziemy wiedzieć co

1:40się stało w aplikacji i tutaj jeśli spojrzymy on nam zadaje pytania

1:45ten generator między innymi pyta jakiej skórki chcemy użyć jeśli przejdziemy na stronę

1:49tutaj material to zobaczysz że możemy tutaj wybrać sobie różne skórki

1:53czyli różne zestawy kolorów material design opisuje

1:58skórki palety dużo bardziej dużo

2:02bardziej rozbudowany sposób on tu zostawia palety kolorów o tym

2:07możesz tutaj wszystkim poczytać na stronie material my nie będziemy się tym skupiać

2:11my skupimy się na części angularowej czyli wybiorę

2:15sobie którąś tutaj skórkę może być indigo pinik albo deep purple

2:20amber w razie czego będziemy mogli tą skórkę później zmienić kolejne

2:24pytanie które zadaje nam generator to czy chcemy tutaj użyć biblioteki

2:28hammer js do obsługi gestów i ja to włączę być można w każdej

2:32chwili też pokażę ci w którym miejscu wyłączyć no a my wybierzemy sobie wszystkie możliwe opcje

2:36zobaczymy co ten generator wygeneruje w naszym projekcie czy

2:40chcemy moduł animacji uruchomić także akceptuje tutaj wszystkie opcje

2:44dostępne najwyżej będziemy mogli wyłączyć to czego nie będziemy używać i

2:49co się stanie on do naszego pliku package json doda potrzebne biblioteki

2:53a następnie zaciągnie je pobierze z repozytorium

2:57npm czyli note package management czyli npm'em

3:01zainstaluję te wszystkie elementy ta skórka którą wybraliśmy powinna wyglądać

3:05mniej więcej w ten sposób to jest ta którą wybraliśmy i teraz zobaczymy

3:10po kolei czy on wprowadził zmiany spójrz tutaj update

3:14mamy listę plików które zostały zmienione więc tak pierwszym krokiem tutaj

3:18powinno być faktycznie zainstalowanie tych zależności i on tutaj zrobił za nas czyli zainstalował

3:22angular material angular cdk angular animations hammer js

3:26wszystkie potrzebne biblioteki nam tutaj za nas automatycznie zainstalował

3:31następnie jeśli chcemy mieć animacje tutaj powinniśmy dodać moduł

3:35browser animations module do naszego głównego modułu więc

3:41sprawdźmy czy to się faktycznie stało otworzę app module i tu jak widzisz mamy browser animations

3:47module zaimportowany dołączony tutaj do importu pierwszy krok wykonany

3:51został za nas gdybyśmy nie chcieli tych animacji no to

3:55trzeba i tak ten moduł załączyć aczkolwiek zamiast browser animations dołączamy noop

4:00animations module czyli gdybyśmy nie chcieli animacji tutaj zamiast tego browser animations module

4:04trzeba było umieścić właśnie taki noop animations module i

4:08tutaj go dodać także do naszych modułów okej

4:13kolejnym krokiem tutaj jest dodanie odpowiednich komponentów które

4:17będziemy używać więc on tego nie zrobił dlatego że tutaj pizza party module

4:21czegoś takiego nie mamy w aplikacji więc to będziemy musieli zrobić ręcznie a o tym za chwilkę

4:25skórkę tutaj on dołączył skórkę tą którą wybraliśmy

4:29czyli możemy do pliku styles.css dołączyć sobie taki import

4:33jak najbardziej takie coś zadziała czyli jeśli takie

4:38coś bym dołączył do naszego pliku styles scss tutaj

4:43jak najbardziej można by to zrobić tutaj

4:48zobacz też co zrobił z tego wysokość html body na 100%

4:53dlatego że budujemy aplikację nie stronę internetową czyli chcemy żeby ta

4:57strona miała całą wysokość ekranu a także usunął do domyślne

5:01marginesy z przeglądarki żeby nie było obramówki

5:05dookoła tutaj czcionkę roboto czyli czcionkę domyślną

5:10dla material oczywiście te wszystkie opcje musisz zmienić polecam tobie jednak

5:14zostawić na pewną wysokość 100% jeśli będziesz w aplikację a nie stronę internetową bo o tym

5:18sobie powiemy usunąć marginesy żeby aplikacja nasze była od deski do

5:22deski mówiąc kolokwialnie żeby nie było tutaj żadnych odstępów marginesów

5:27dookoła naszej treści okej obsługa gestów

5:31hammer js i hammer js musi być dodany w pliku main więc

5:35zobaczymy czy ten krok został także wykonany za nas main ts mamy hammer js

5:40tutaj nic więc już nie trzeba robić hammer js musi być tylko podpięty żeby on nasłuchiwał

5:44odpowiednich zdarzeń biblioteka angular jeśli wykryje tego hammer js

5:48no to automatycznie nasłuchuje odpowiednich zdarzeń gestów takie

5:52jak przesuwanie powiększanie i tak dalej material-icons

5:56dla angulara tutaj widzisz po prostu można by dołączyć w ten

6:00sposób domyślnie i teraz te style widzisz tutaj one

6:04się nie pojawiły i spojrzymy na angular json

6:08czyli na konfigurację tutaj budowanie aplikacji style pojawiły się tu jest

6:13to wydajniejszy sposób bo on nie musi rekompilować razem z sass'ami

6:17tylko te css'y są po prostu dołączone tutaj sklejone razem

6:21ze wszystkim stylami możesz oczywiście dołączyć je tutaj ale będzie

6:25to spowodowało jeszcze dłuższe budowanie css'ów tu po prostu dołączaj je gotowe okej

6:30w takim razie gdzie on tutaj dołączył nasze czcionki

6:34tutaj jak widzisz mamy dwa linki mamy link do czcionki

6:38w trzech tutaj rozmiarach 300 400 500 z trzech różnych

6:42wariantach grubości tej czcionki a także mamy

6:46tutaj link do czcionki zawierające ikony czyli jest

6:51to icon font czyli ikony nie są jako pojedyncze pliki które będą się

6:55jeden po drugim pobierać tylko wszystkie ikony material możemy pobrać od razu

6:59jako jeden plik czcionki o tym sobie jeszcze powiemy tutaj

7:03masz dwie możliwości tutaj jak widzisz on to ładuje bezpośrednio z cdn google i ma to tą zaletę

7:07że jeśli ktoś już był na innej stronie która z tego korzysta jest szansa że ma

7:11to zacache'owane w przeglądarce jeśli chcesz nie ma

7:15problemu żeby te pliki po prostu pobrać dodać tutaj do katalogu assets

7:20i załączyć lokalnie z twojej aplikacji ja zostawię

7:24tą wersję z cdn czyli content delivery network co

7:28nam zostało tu jest konfiguracja modułów tego nie musimy robić

7:32czyli wszystko wygląda dobrze jedyne co pozostało nam zrobić to faktycznie

7:36używać tego angular material design spójrzmy

7:41więc jak to wygląda w przeglądarce tutaj na localhost 4200

7:45jest chroniona przeglądarka i jeśli się przyjrzymy

7:49to jest tutaj inna czcionka i jest to dokładnie nasza

7:53czcionka roboto taka czcionka tutaj nam się znajduje i jak spojrzymy tutaj

7:58tutaj na body margines 0 wysokość

8:02100% czyli jak widzisz po bokach nie mamy marginesów to nam się przyda jeśli będziemy

8:06aplikację aplikacje która będzie miała paski na górze na dole nawigację

8:11boczną żeby to wszystko ładnie przylegało do krawędzi okej

8:15czyli mamy zainstalowany tutaj material design components ale

8:19żadnych komponentów jeszcze nie używamy tym zajmiemy się już

8:24w kolejnej lekcji tak więc do zobaczenia