Angular: Zasoby statyczne i biblioteki
od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego się nauczysz
- Kompletne podstawy Angular
- Ciekawe, praktyczne projekty
- Budowanie własnego Portfolio
- Bardziej zaawansowane koncepcje
- Formularze i REST API
- I wiele więcej!
Dynamiczny HTML i CSS
Pierwsze dwa działy kursu są idealne dla osób które rozpoczynają swoją przygodę z Angularem i stanowią wprowadzenie do frameworka. Zaczynamy od prostych przykładów, gdzie budujemy formularz zapisu na newsletter. Jest to przykład pozornie prosty, ale dzięki łatwości z jaką Angular wprowadza dynamizm, manipulacje wyglądem a nawet animacje wcale taki nie będzie. Zobaczysz, że nawet prosty przykład możemy zamienić w interaktywny, dynamiczny interfejs, który wciągnie użytkownika!
Zbuduj Portfolio razem z kursem
W kolejnych sekcjach kursu nie robimy prostych ćwiczeń, ale krok po kroku budujemy prawdziwy projekt. Jeśli marzyło Ci się stworzenie i opubliklowanie eleganckiej strony WWW lub aplikacji z Twoim CV oraz listą projektów, to nie musisz marzyć dalej. Możesz podążać krok po kroku i z każdą lekcją budować własną stronę portfolio. Będziesz zaskoczony, że z podstawową znajomością JavaScript, HTML i CSS zaczniesz błyskawicznie tworzyć złożone eleganckie i interaktywne interfejsy użytkownika.
Produktywność i błyskawiczne tworzenie aplikacji
W kursie stawiam na produktywność. Koniec że żmudnym klepaniem setek lini HTML i CSS, koniec z zawiłym kodem jQuery. Wykorzystując bibliotekę Bootstrap i modyfikując gotowe elementy HTML możemy skupić się na tym co najważniejsze. Zobaczysz jak wykorzystać interpolacje i wiązania by struktura HTML i CSS zmieniała się sama po każdej akcji użytkownika. Dzięki poprawnemu użyciu mechanizmów Angulara, mozolna praca z DOM, którą znasz np. z jQuery staje się zbędna. Angular renderuje interfejs za Ciebie - prosto z danych które umieścisz w komponentach.
Formularze i komunikacja z REST API
Już w pierwszych sekcjach kursu dowiesz się jak wykorzystać moduł formularzy w praktyce, by tworzyć automatyczne dynamicznie generowany formularze i pobierać z nich dane. Dowiesz się także jak znając wyłącznie podstawy JavaScript połączyć naszą stronę portfolio z serwerem i pobrać pliki JSON, w tym nasze projekty, opisy i zdjęcia ze zdalnego serwera!
Jak działa Angular? Wykrywanie zmian i optymalizacje
Podczas pracy nad Twoim portfolio nie tylko poznasz podstawy pracy z angularem, ale w kilku lekcjach zagłębimy się na chwilę w samo działanie Angulara. O ile jest to wiedza zaawansowana, tak znajomość mechanizmów wykrywania zmian już na samym początku pracy z Angularem da Ci lepsze zrozumienie tego narzędzia i pozwoli pisać kod który będzie nie tylko prosty i czytelny ale też będzie działał błyskawicznie. W tym kursie nie tylko pokazuje jak czegoś użyć, ale kiedy, dlaczego oraz jak to działa od środka. Nawet jeśli Angular nie jest dla Ciebie nowością - ten kurs da Ci głębsze zrozumienie jego koncepcji.
Dla kogo jest ten kurs?
Ten kurs przygotowałem dla osób początkujących w Angularze, ale w taki sposób by mógł on służyć także do powtórzenia, uporządkowania wiedzy czy uzupełnieniu braków dla osób które pracowały już z Angularem. Jeśli jesteś front-end developerem, ale jeszcze nie miałeś okazji zapoznać się z Angular, lub chcesz uzupełnić szczątkową wiedzę o fundamenty - to jest kurs dla Ciebie! Dodatkowo, jeśli zaczynasz przygodę z front-end ale masz już podstawy HTML i JavaScript, to kolejny ważny krok na Twojej drodze do kariery!
Angular 10+
Jako że jest to pierwsza lekcja w nowej
sekcji kursu to otworzymy sobie zupełnie nowy projekt ja wyjdę z poprzedniego
projektu i korzystając tak jak pamiętasz spędzi dniu mogę utworzyć nowy zupełnie
projekt od podstaw czyli powiedzmy będzie to portfolio.
Stworzymy stronę portfolio różnych parametrów nie będę podawał.
Zobaczymy tym razem domyślną minimalną
taką myślą wersję i wybierzemy troszkę inną opcję.
Rudnik na tak. Zobaczymy.
Później rating
może zamiast zwykłych CDS ów muzy użyje po prostu powiedzmy w wersji S CSS.
Czyli rozbudowana wersja CSS ów z
kompilacją to oczywiście nam tutaj w tym katalogu wygeneruje całą strukturę plików
i tu będzie troszeczkę więcej niż w wersji minimalnej też ustawienia są troszeczkę
inaczej automatycznie będzie nam generowały komponenty razem z
patologiami na przykład powstaną też testy rating.
Troszeczkę więcej innych rzeczy.
W międzyczasie jak to się instaluje to pokaże tobie projekt który chcemy
zbudować czyli mniej więcej taką stronę jakiejś tam agencji kreatywnej która
tworzy aplikacje Wang plażę ziemniaki teksty jakieś interaktywne elementy też
troszkę elementów CSS owych ćwiczymy wszystkie elementy o których poziomie
wcześniejszych lekcjach ale zobaczymy też bardziej złożone
przykłady właśnie z komponentów mis interakcji których możemy tutaj użyć
żeby nie marnować za bardzo czasu na szczegóły typu właśnie CSS.
No to zacznijmy od tego żeby naszego
projektu dodać takie biblioteki na przykład możemy sobie buty Trap CSS
żeby nie poświęcać czas na pisanie ręcznie CSS ów skorzystam z gotowych CSS ów.
Połączymy też jakieś przykładowe biblioteki czcionki.
Poszukamy też sobie szybko jakiś przykładowy grafik który będzie mógł użyć
żeby ta nasza strona jakoś tutaj ładnie sensownie wyglądała.
Ten HTML będzie dostępny w źródłach obejmuje też elementy HTML bezpośrednio
przy kopiować stąd żeby też nie poświęcać czasu na wpisanie HTML a tylko byś mógł
się skupić na plażę i na tym co angola pozwala nam zrobić.
Już w przypadku takich prostych stron i w przypadku bardziej skomplikowanych
interakcji zobaczymy co dalej w kolejnych lekcjach.
Czy to już się nam zainstalował.
Zobaczmy.
Wygląda OK.
Uruchomić ten cały projekt jak pamiętasz.
N.p.m. start lub jeśli masz
zainstalowany hamulec celi no to serwer w skrócie S może być jeszcze opcją.
Czyli otwórz przeglądarkę
ja zostawię sobie to w ten sposób MGS i uważaj bo MGS musisz wykonać w katalogu z
projektem czyli wygenerować katalog portfolio.
Muszę najpierw przejść do katalogu portfolio uruchomić projekt.
W skrócie S.
To polecenie jest może chwilkę potrwać i zobaczyć jak się budują wszystkie moduły.
Mi to zajęło prawie dziewięć sekund.
Wyciągam jednak z wideo żebyśmy nie musieli czekać.
Tutaj pojawia się lokal choć 3200 czyli ten adres można skopiować można też
kliknąć i uruchomić go w przeglądarce tutaj żeby zobaczyć czy nasz nowy projekt
działa jak widać tutaj się pojawił jakieś przykładowy HTML.
Nie ma błędów.
Jest OK.
Jeśli taki błąd jak tutaj
na przykład coś takiego nie rozpoznany błąd 400 czy 200 port jest już w użyciu.
Gdzieś w którejś konsoli już działa Angola
trzeba tę konsolę zamknąć tutaj terminal i uruchomić to jeszcze raz i chcesz mieć
dwie aplikacje uruchomione już na innym porcie po prostu jest dopisać
port i podać sobie inny numer portu niż cztery tysiące dwieście.
Zielone działa Zobaczmy teraz co możemy z tym zrobić.
Ja bym chciał tutaj instalować buty atrapa
na przykład to też robi to w osobnej konsoli.
Tam sobie osobną konsolę.
Tutaj tego nie będę wyłączą
i w osobnej konsoli zobaczymy jak możemy zachować jakieś biblioteki np.
tutaj buty Trap Home Quick Start mógł kopiować CSS po prostu skopiować
i mógłbym je gdzieś do pliku indeks HTML na przykład tu i jest to jedno podejście.
Wtedy automatycznie ładuje nam się to z cdn a jeśli zapraszała to super tylko
ściągamy całego trupa nie mam żadnych możliwości wpływania modyfikacji.
Co możemy zrobić inaczej możemy go
zainstalować ściągnąć gdzieś tutaj do projektu.
Czyli jest to gdzieś Download Station.
Możemy użyć menedżera pakietów n.p.m. albo jar czyli n.p. Stal Budka.
Przy okazji zobaczymy jeszcze ściemy czcionki tak samo n.p.m. Tam
nastroje sobie powiedzmy tutaj jeszcze czcionki i niech to się w tle instaluje.
Muszę być od katalogu tak z naszym projektem
te biblioteki nam się dodadzą do pakietu są i tu będziemy mieli na liście za
chwilkę zapisane biblioteki natomiast pliki pojawi się w pakiecie tutaj
Jackson na liście i pliki mają się w NOT Models tutaj jako pod katalog Ok.
Wewnątrz zainstalowano tutaj but strop się pojawił.
I found on są natomiast jak możemy te pliki dołączyć mamy kilka sposobów.
Znowu możemy zrobić w indeksie czego nie polecam.
Dlatego że kiedy łączymy masę plików to
każdy z ich plików będzie się osobno ściągał.
My chcemy te pliki jakby zbudować razem z
projektem zintegrować w jeden plik wszystkie CSS powiedzmy więc możemy np.
w pliku Chandler Jackson.
Tutaj w sekcji Project nazwa projektu architekt Build.
Mamy ścieżki z wcześniejszych katalogów
do plików itd i mamy tutaj trzy takie opcje zasoby style i skrypty.
I teraz jeśli tutaj napiszemy ścieżkę do Styrii to teczkę z trudem połączone razem
w jeden plik będą też później przy kompilacji na końcu zmienić dane
zoptymalizowane więc byśmy musieli wysyłać do energii wielu wiele plików.
Czy ja mogę tego trupa poszukać powiedzmy gdzieś.
Gut strop jest
i tu jest kilka katalogów S CEZ czyli wersja S cesarzowa
źródłowe pliki i mamy też w wersjach już skomplikowaną CSS więc mogą sobie ścieżkę
do tego trupa gdzieś skopiować może w ten sposób.
I w pliku Englert Jackson spróbujemy ją w lecie czyli w ten sposób.
ścieżka oczywiście kierunki Leszek nie
zgadzają się tak bo jeśli pracuję na Windowsie
muszą trochę w tę stronę czyli z katalogu nut ultra Disc CSS CSS.
W załączonym pliku.
Jeśli ten plik teraz zapisze to tutaj naszej aplikacji niewiele się zmieniło.
Czyli to nie działa.
Jeśli wprowadzamy zmiany w tym pliku to
wymaga to od nas restart serwera czyli musimy kontrolę przerwać to i
jeszcze raz umyć ten cały serwer i jeśli wprowadzamy zmiany
w tym pliku Angola wygasa dopiero po starcie zobaczymy te zmiany.
Drugą opcją jest użycie po prostu Sasów
albo CSS ów czyli jeśli do pliku CSS to on już jest dołączony.
Jeśli my w głównym pliku Still z globalnym
zanim podejmiemy inne CSS to one też powinny być brane pod uwagę.
Zobaczmy tutaj gdzie coś się zmieniło.
Jeśli ja w tym pliku naszym AP AP
komponent HTML usuwał to wszystko to na razie sobie GIF H1.
Hello w portfolio to powiedzmy zobaczyć tutaj czcionka.
Dziś jest to zupełnie inaczej
więc jedyną możliwością dołączenia jest tutaj to w ogóle w to miejsce.
Druga opcja to jest właśnie w tych stylach.
Umieszczenie tutaj kolejnych Styrii czyli port nie robi import URL dlatego że to by
ściągnęło najpierw ten plik a później ściągnął go osobno
import i to w bardzo ciekawy sposób bo importuje to od razu tak.
Zamiast nut może być tutaj mogę podać
sobie taką taki znaczek i teraz zapisze kontrolę bez.
Jest OK. Tym się pomylił.
Pokażmy błąd że nie ma takiego pliku więc masz błąd.
Zobacz.
Nie może znaleźć i tu jest pokazane co jest nie tak.
Upewnić się że ta ścieżka jest OK.
I to też powinno nam działać.
Jest ból strat dla pewności co zrobię
jeszcze usunięto stąd i jeszcze raz ten serwer startuje żeby na
pewno ładować go z pliku steli a nie z pliku głównego ang.
Jackson czyli jeszcze raz z CSS może być atrapa.
Teraz możemy zobaczyć tę wersję
trupa którą tu mamy czyli tam z not Models jak but.
W pliku CSS też powinna zadziałać.
On powinien całą zawartość tego pliku po
prostu wciągnąć tutaj dołączyć do tego pliku wszystkie pliki
połączyć w jeden duży plik co jest bardzo optymalną fajnym podejściem.
Możemy też użyć wersji S CSS
czyli na przykład poszukaj sobie pliku nieco losowego tylko CSS przez CSS.
Kupię ścieżkę do niego plik.
I prawie to samo.
Tylko użyje tej ścieżki.
Do innego rodzaju pliku do pliku CSS.
W ten sposób możemy sobie tylko te moduły dynamicznie importować móc się
kopiować tutaj tylko te moduły których potrzebuje na przykład kart itd.
żeby niepotrzebnie używać tego buty.
I to też powinno działać.
On sam wykrywa końcówkę rozszerzenie pliku i sama blokuje zmiany i jeśli tworzymy
sobie plik bóstwa pies CS mamy wariant boss i Fang.
Czyli tu Widzisz jakbyś ten CSS nie skomplikowane ma zmienne parametry funkcje
czyli mogę poczuć że kolor primary to jest Blue niebieski.
I teraz jeśli powiedzmy w naszym pliku a komponent HTML ja powiem że to ma być
tekst primary czy jakieś gotowe style but trupa
to mamy niebieski jeśli wszędzie używamy tych podstawowych
klas mamy S CSS a ja mogę każdą z tych zmiennych konfiguracji np.
tą zmienną primary mogę ją zdefiniować jeszcze raz tu przedtem i powiedzieć np.
że nasz primary to jest powiedzmy kod King czyli różowy OK.
C piszę ten plik i teraz w HTML nie muszę nic zmieniać.
Wszystkie tekst czcionka kolor primary cały nasz aplikacji zmieni kolor.
Jeśli pracowałeś wcześniej z czasem no to wiesz jakie są tego możliwości.
Jeśli nie to polecam się tutaj zapoznać
z CSS można Muller to bardzo fajnie jak widzisz wspiera ja ten kolor różowy na
razie może komentuje sam w sobie też wyłączy tą wersję CSS ową.
Jak będziemy czegoś potrzebowali to zawsze
byś mógł się przełączyć w tej wersji CSS na s CSS 5 musimy napisać tutaj każdą z
tych opcji odstępy wymiary czcionki cienie.
Tym wszystkim będzie można tutaj sterować.
Towar został zostawia.
Gdybym chciał oprócz CSS ów dołączyć także
JavaScript jest podstawa to można to w HTML lub kopiować.
Może też zainstalować i dołączyć te pliki
do skryptu S w pliku Englert jest on tutaj w sekcji Script w ten sam sposób jak CSS.
Jak się nie mylę dołączył do skryptów dlatego że jak widzisz one tutaj wymagają
ode mnie czy qwerty my postaramy się jak najwięcej tej
interakcji zrobić właśnie przy użyciu samego Englerta i zobaczymy że
wcale nie jest potrzebne żeby robić różne ciekawe efekty.
Ok czyli to sobie zostawiamy czcionki na
razie też zobaczmy jeszcze zasoby czyli powiedzmy znalazłem sobie jakąś
grafikę niech będzie powiedzmy coś takiego co nam posłuży za tło.
Ja tu szukałem jakoś architekturę na tło
żebyśmy mogli coś co za bardzo nie ma sensu ale żeby ładnie wyglądało.
Biorę sobie tu jakąś powiedzmy większy taki rozmiar.
OK.
I 12.
W projekcie Mam Talent placek asset.
I tylko katalogi które tutaj są dopisane czyli np.
Corsa Nikon Corsa SEC.
Tylko te katalogi będą dostępne z przeglądarki dla naszej aplikacji.
Jeśli mamy jakieś czcionki
ikony grafiki to wszystko powinno się znaleźć się gdzieś w tych katalogach żeby
przy kompilacji Englerta wszystkie pliki kopiować do właściwego katalogu.
Więc ja nasz plik tutaj z grafiką jeszcze w katalogu asset.
Tu jest jego nazwa i użyć go w HTML CSS czyli np.
w CSS.
Dodam tu jakieś style.
I tu podaje względną ścieżkę asset.
I nazwa pliku też miał podpowiadać kiedy super ok.
Tam jakieś dodatkowe CSS żeby to ładnie wyglądało.
Powiedzmy w ten sposób
kilka przygotowanych inwestycji zapisze tutaj też czy to działa.
Fajną rzeczą jest to że pomysł masy
to weryfikuje czy to jest poprawne czy popełnić błąd to gdzieś tam też ładnie w
konsoli pokaże że w którymś pliku w której linii jest błąd brakuje silnika.
Warto czytać te błędy teraz jest OK.
Super tez mógł tych klas ułożyć gdzieś w
HTML wersji na razie nasz komponent komponent HTML
i pod tytułem dodam jakiś HTML to będzie te czasy których używam przed chwilą OK.
I tu w środę piszemy jakieś teksty ale to może za chwilę zobaczymy jak to wygląda.
Ok.
Mamy tytuł mamy tło trybem to na zasadzie dwóch warstw mamy jeden GIF z obrazkiem
naszym z grafiką nasz Luka brawo kto jest biały
i drugi GIF w środku który nakłada na to kolory i mamy bardzo fajny tutaj efekt jak
widzisz to tło zdarzeń szerokość się zmieniało.
Ok czyli wiesz jak przygotować projekt i jak wygenerować opcje CSS ową S CSS ową i
też wiesz jak przy tej konfiguracji zamontować odpowiednio różne zasoby typu
CSS S CSS Java skrypty czcionki ikony obrazki itd.
Po prostu te ścieżki muszą się zgadzać
tutaj i musi te pliki załączone albo tutaj albo za importowany gdzieś z któregoś
pliku CSS czy to właśnie zasoby czy chciałbyś CSS lub Case
ze zmiennymi Conquer bardzo fajnie sobie z tym radzi i na końcu te wszystkie pliki
ładnie nam łączy w całość i serwuje w przeglądarce OK.
Jest mamy przygotowane najważniejsze elementy w kolejnych lekcjach będziemy
mogli wykorzystać tutaj te biblioteki tekstowe CSS żeby bardzo szybko budować
kolejne elementy tego ekranu i skupić się już na tym co potrafi
i jak możemy naszą wiedzę na temat kombinowania składni wykorzystać do
budowania fajnych interaktywnych komponentów.