Angular: Przygotowanie projektu

Angular 6, 7, 8+

0:00W tej lekcji przygotujmy bazową strukturę projektu z której

0:04będziemy korzystać w kolejnych lekcjach oczywiście w tym celu wykorzystamy angular

0:08cli i zanim to zrobię tutaj użyjemy visual studio code żeby

0:12przygotować sobie środowisko czyli wybiorę sobie tutaj jakiś folder powiedzmy

0:17katalog projekt i w tym katalogu utworzę edytor visual

0:21studio code tutaj powinieneś widzieć teraz wszystkie pliki które znajdują się w tym projekcie na razie jest

0:25to pusty folder jeśli chcemy korzystać z konsoli czyli z narzędzi

0:30tutaj z wiersza poleceń mamy opcje widok i integrated terminal

0:34lub control tylda control tylda ten znaczek tutaj przy klawiszu 1

0:39na klawiaturze ok ja tu sobie zrobie pełny ekran ok

0:45control tylda control b i wygenerujemy sobie tutaj nowy projekt

0:49ja w tym katalogu projekt utworzę jeszcze jeden katalog ale wykorzystam

0:53do tego celu nasze tutaj narzędzie ng czyli angular cli tu

0:57jest masa różnych opcji z poprzednią wersją jest tu kilka różnic co

1:02będzie dla nas istotne tak teraz będzie istotna tutaj możliwość dodania nowej biblioteki do

1:06projektu o tym trochę później generate czyli wygenerowania

1:11plików no i w tym momencie oczywiście wygramy sobie nowy projekt o

1:15pozostałych elementach później tutaj w dalszych częściach tego kursu czyli

1:20ng nie generate tylko new po ng new zaczynamy nowy projekt i zobacz sobie

1:24opcję help które są dostępne i jeśli generujesz nowy projekt

1:29to możesz wybrać sobie niestandardowe kolekcje czy niestandardowe

1:33schematy generowania jeśli użyłeś ng add i dodałeś jakąś bibliotekę

1:37to możesz użyć jakiś specyficznych zestawów jakby szablonów z których

1:41ma być utworzony projekt my skorzystamy z domyślnych katalog może na

1:46sucho to wypróbować możemy nadpisać plik jest możliwość dodania szablonów

1:50i styli wewnątrz komponentu ja tym razem tego nie będę

1:55robił prefiks aplikację zostawimy app wygenerujemy

1:59aplikacje od razu z routingiem niech nam scommituje pierwszą

2:03tutaj generowany kod do gita niech zainstaluje wszystkie

2:07zależności i tu jak widzisz jest opcja pominięcia testów w tym

2:11kursie będziemy chcieli napisać testy tak więc tą opcje tutaj nie będziemy jej używać

2:15domyślnie testy się wygenerują i rozszerzenie dla styli

2:19będzie tu u nas scss czyli to będzie sass ok

2:23czyli ng new nazwa projektu na przykład angular

2:28myślnik projekt okej dodajmy

2:32sobie tutaj jeszcze opcja routing opcje i dodamy opcję

2:36style scss zobaczmy

2:43utworzyły się pliki tu postawisz katalog

2:46za chwilkę przełączy się w ogóle z edytorem i jeszcze głębiej w ten katalog żebyśmy

2:50może byśmy byli już tylko w katalogu w którym znajdują się nasze pliki

2:55i tu się na dole instalują nasze wszystkie biblioteki czyli w package json

2:59tutaj w packege json on tu dodał wszystkie potrzebne biblioteki

3:03wszystkie narządzia i automatycznie za nas się instaluje ta opcja intall jej nie

3:07wyłączyłem czyli domyślnie nam się instaluje i mamy tutaj też pamiętaj skrypty czyli

3:12jeśli chcesz ten projekt uruchimić po raz kolejny to już nie musisz instalować globalnie angular

3:17cli wystarczy że tutaj wejdziesz do projektu uruchomisz npm

3:21install żeby pobrać wszystkie potrzeby zależności i wykonasz npm

3:25na przykład start albo npm run build i

3:29te skrypty wykonają się już z tego projektu z tego katalogu czyli nie musisz instalować

3:33gdzieś w systemie operacyjnym tych jeszcze raz tych wszystkich narzędzi

3:37my jednak tutaj mamy je zainstalowane bo będziemy korzystać z nich nie tylko do

3:42budowania aplikacji ale także do właśnie generowania nowych projektów do generowania

3:46nowych plików nowych modułów w naszej aplikacji tutaj

3:50wszystko widzę poszło dobrze są tu jakieś warningi jednak tutaj

3:55przeważy te warningi jak też uruchomić npm audit fix npm audit żeby dowiedzieć się co to za warningi one

4:01przeważnie dotyczą nie tyle kodu angulara co kodu narzędzi te narzędzia

4:05mogą mieć jakieś dziury bezpieczeństwa tego typu rzeczy pamiętaj

4:09jednak to są tylko narzędzia to znaczy że one uruchomiamy tylko je na

4:13komputerze lokalnym komputerze dewelopera więc nie są one wystawiane

4:18jakby na świat zewnętrzny sprawdźmy

4:22czy ten nasz projekt działa mamy dwie opcje możemy użyć tutaj właśnie tego

4:26polecenia ng zainstalowanego w systemie globalnie żeby ng serve czyli

4:30zaserwuj uruchom serwer lokalny deweloperski ale jeśli mam projekt już

4:34zainstalowany tutaj pamiętasz mamy package json to mogę robić po prostu

4:38tutaj npm start które

4:43jak widzisz zmapowany jest na samo polecenie npm start jest o tyle wygodniejszy

4:47żeby każdy projekt może wystartować w ten sam sposób uwaga z którego katalogu to uruchamiasz

4:51bo jak widzisz mamy projekt i w projekt mamy dopiero angular projekt więc

4:55ja się tu przełączę jeszcze czyli plik otwórz katalog wejdę tu w głąb

5:00w ten nasz projekt także tutaj widzę jak widzisz na najwyższym

5:05poziomie mamy package json i jeszcze raz wykonam

5:09to samo polecenie npm start i

5:18tutaj jak widzisz nam serwer wystartuje na localhost port 4200 ten adres sobie

5:22skopiuję on tu się będzie budował ja w tym czasie się przejdę do angular tutaj

5:26to na przykład chroma polecam tobie także skożystać z przeglądarki

5:30chrome będzie tobie także wygodniej tu pokazywał jakieś opcje będę korzystał z narzędzi deweloperskich

5:34po prostu przykłady wszystkie przyciski opcje konfiguracyjne też będą w

5:38tym samym miejscu oczywiście możesz korzystać z firefoxa jeśli

5:43chcesz korzystać z innej przeglądarki starszej na przykład internet explorer to

5:47musisz pamiętać oczywiście tutaj w pliku polyfills żeby odkomentować

5:52polyfill'e tak czyli odkomentować pliki które uzupełniają brakujące funkcjonalności

5:57w starszych przeglądarkach jeśli chcesz na przykład 9 10 11 ja

6:01tutaj nie będę się skupiał na kompatybilności więc niektóre przykłady po prostu nie

6:06działać tutaj pozostawiam tobie to jeśli chcesz faktycznie

6:10wspierać starsze przeglądarki to gdzieś pojawia się błąd muszę zobaczyć czego brakuje

6:14i uzupełnić to to odpowiednim polyfill'em tutaj z tych brakujących

6:19jeśli wszystko zadziałało to powinniśmy zobaczyć taką ładną wizytówkę tutaj angulara

6:23linki tutaj do dokumentacji do tutoriala online

6:27czyli projekt jest skonfigurowany teraz nim przejdziemy dalej jeszcze jedna

6:31ważna rzecz tutaj w pliku angular json mamy konfigurację tego naszego narzędzia

6:36angular cli tu jeszcze może nam wyskoczyć node

6:40więc zezwalaj na dostęp chcemy żeby ten serwer był dostępny

6:44okej i teraz tak w jednym jakby katalogu wygenerowanym

6:48możemy mieć tak naprawdę kilka projektów jak widzisz tutaj jest mamy już

6:52dwa mamy angular projekt i osobne angular project służące

6:56do testów end-to-end czyli testów jakby integracyjnych testów

7:00funkcjonalnych i mam tutaj różne konfiguracje dla narzędzi

7:04z których składa się ten cały nasz ng mamy architekta który zajmuje się

7:09jakby konfigurowaniem budowaniem generowaniem projektu i

7:13na przykład ten główny projekt możesz określić w którym katalogu czy możemy inną strukturę

7:17katalogu przyjąć domyślna możesz tutaj robić nowe projekty jeśli będziesz je tworzył kilka

7:21możesz wskazać mu inny katalog w który ma się znaleźć może być to aplikacja

7:25lub biblioteka prefiks komponentów i jak

7:29tutaj widzisz schematix jak wspomniałam wcześniej możesz doistalować dodatkowe biblioteki

7:33schematix pozwala tobie no właśnie dodać nowe generatory czyli na przykład tutaj

7:37jak widzisz mam ustawienia dla komponentu i jak pamiętasz przy generowaniu projektów

7:42wybrałem opcję scss czyli każdy wygenerowany na nowo komponent

7:46będzie miał plik nie css tylko powinien mieć wygenerowane automatycznie plik

7:51scss jak widzisz główny komponent aplikacji od razu ma plik typu sass

7:55czyli jest scss i jak zobaczymy komponent on to też ma odpowiedni prefiks

8:01tak zgadza się z konfiguracją więc zamiast zmieniać to za każdym razem w każdym pliku

8:05wygenerowanym właśnie możesz po prostu wejść sobie w angular json

8:09i tutaj także zwróć uwagę że mamy scheme co to znaczy

8:13oznacza to że tu ja nie muszę znać wszystkich poleceń na pamięć

8:18muszę szukać ich w dokumentacji tylko jeśli edytor obsługuje coś takiego

8:22jak json scheme to tutaj po prostu mogę wziąć control spacja jak

8:26widzisz on tutaj ma listę wszystkich dostępnych opcji na przykład flat

8:31i powiem tak że dokumentacja która mówi co ta opcja robi na przykład jeśli wstawię opcję

8:36flat to nowe komponenty będą generowane bez katalogów inline

8:41style oczywiście uwzględnij style w środku w pliku komponentu inline

8:45template uwzględnij template w komponencie możemy też ustawić inne tutaj domyślne

8:49opcje tu też możemy pominąć testy my tego także nie będziemy

8:53robić czyli tu już jakby nic więcej nie zmieniam wpisałem opcje domyślne

8:57jedną opcję którą zmieniłem to będzie scss żebyśmy mogli tutaj popracować sobie nad

9:01stylowaniem komponentów mam także opcję dla architekta

9:06dla różnych poleceń na przykład na build i serve tak czyli

9:11różne polecenia które możemy tutaj raz skonfigurować parametry

9:15żeby nie podawać ich za każdym razem co to znaczy że tutaj jeśli

9:19wykonam polecenie ng powiedzmy test to

9:23takie polecenie ma tutaj wiele różnych opcji i mogę te opcje za każdym razem podawać

9:28a mogę to wszystkie opcje po prostu skonfigurować tutaj raz zapisać

9:32tak więc później kto będzie uruchamiał każdy z tych poleceń będzie

9:37zawsze spójnie używał tych samych opcji czyli jak widzisz tutaj całę to narzędzie

9:41będzie składać się właśnie z takich właśnie wtyczek pluginów czyli to jest bardzo konfigurowalne możemy

9:45także definiować tutaj własne polecenia czasem tak bywa aby projekt był w jakiś sposób

9:50sprawdzony spakowany zdeployowany nie musimy używać narzędzi typu

9:54gulp grunt i tego typu można po prostu wykorzystać te

9:58skrypty architekta które tu już się znajdują ewentualnie skrypty schematics lub

10:02skrypty angular devkit które znajdziemy po prostu gdzieś w internecie i

10:09to tyle jeśli chodzi o generowanie i konfigurowanie projektu a

10:13przynajmniej na razie w kolejnych lekcjach zaczniemy już pracę z tym projektem

10:17oczywiśćie jest tu więcej opcji konfiguracji ale będę je

10:22umawiał dopiero kiedy będziemy ich używać w kolejnych sekcjach zajmiemy

10:26się testami no to mówię wtedy do czego służą pliki konfiguracyjne tutaj testów

10:30jakie są opcje możliwości dotyczące testów i tak dalej tak

10:35więc do zobaczenia w kolejnej lekcji