od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerPierwsze 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!
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.
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.
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!
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.
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+
Mamy już zainstalowane i skonfigurować
wszystkie narzędzia możemy przystąpić do pracy.
Ja tworzę swoje Visual Studio KOD.
Może być to dowolny też inny edytor i tutaj użyję terminala
możesz też innego terminala użyć farb mogli wykonywać polecenia
uruchamiać skrypty czy Angola celi które instalowane przed chwilą.
Czyli taki jest w katalogu Amber podstaw i chciałbym utworzyć katalog projekt i w
tym katalogu projekt wygenerować naszą aplikację.
Czyli używając naszego Engine czyli AMOLED celi polecenia New czyli nowy projekt
podaje nazwę katalogu w którym chciałem utworzyć nasz projekt.
Jednocześnie nazwa katalogu będzie nazwą naszego projektu.
Na początek żeby szybko zacząć używać takiej opcji jak Mini ma
opcja minimalna która nie będzie instalowania dodatkowych niepotrzebnych
nam rzeczy ruchome lub wymienne zadał mi też kilka dodatkowych pytań mógłby takie
pytania tutaj dodać pomyślmy też byłoby szybciej.
Sobie tutaj wpisz Running working można że nie chcemy żeby nie komplikować.
Zobaczymy z taką wersją absolutnie minimalistyczny.
Tutaj mamy różne opcje Casillas zostaniemy też z CSS.
W późniejszych projektach spróbują użyć innej opcji.
Teraz to co się stało ominęło generał masę
różnych plików ja ten edytor od razu mam utworzony we właściwym katalogu czyli
zrobiłem sobie fail Open folder i otworzyłem sobie wcześniej ten projekt.
Po zainstalowaniu możesz też to robić.
Otwórz folder i ustawić sobie żeby z boku żeby widzieć wszystkie nasze
katalogi pliki i zobacz co by się stało on nam wygenerował serce.
Katalog z plikami to też ciekawe rzeczy np.
Angole czasem sobie powiemy.
Pakiet Jackson czyli tutaj wszystkie
potrzebne biblioteki się nam instalują właśnie wedle tej listy.
I musimy poczekać chwilkę żeby właśnie
zainstalował te wszystkie pakiety i jeśli wszystko się udało bez problemu
to możemy przejść do katalogu którą otworzyliśmy.
Czy to się nazywało u nas projekt więc CD Director.
Stacja i nazwa naszego katalogu projekt jestem w projekcie i teraz będąc w
projekcie kupuję w tym projekcie pakiet Gibson wygenerował takie różne skrypty
które możemy uruchomić możemy uruchomić nasze cele.
Stąd mamy też specjalne skrypty start build test itd.
Czyli co możemy zrobić mógł sobie tutaj wykonać np.
n.p.m. start
i n.p.m. start powinien uruchomić mi tutaj polecenie NGC więc równie dobrze mógł też
wpisać bezpośrednio polecenie NGC serwer który uruchomi wbudowany serwer
deweloperski który będzie serwował już skomplikowaną wersję naszej aplikacji
do przeglądarki a oprócz tego bardzo fajną rzecz bo pozwoli nam
obserwować zmiany w plikach i przebudować dynamicznie.
Tutaj przy każdej zmianie czyli powiedzmy
jeśli mamy tutaj serce jest to indeks HTML indeks HTML już nie ma
żadnych skryptów mądre musi skomponować i dołączyć do tego HTML.
Skrypty są generowane tutaj z naszych plików tekstowych.
Tutaj większość generuje się z pliku AP komponent teraz czy nasz główny
komponent cechują mówił się o sobie co tu się dzieje.
Jak widzisz w tym pliku AP komponent tez znajduje się jakiś HTML.
Mamy tutaj walka herbem sam Linux
ją teraz z tego nam wygeneruje projekt i uruchomi nam lokalny serwer deweloperski.
Jak widzisz like Development Server
i mamy podany adres Local chaos 4200 tutaj ja to tworzę sobie w przeglądarce
Control i przycisk myszy po prostu kliknąć.
Muszę też skopiować i wklej to do przeglądarki po prostu tutaj 4200.
I powiedzmy ładnie zobaczyć tutaj coś takiego.
Wracam tu nazwa naszego projektu i to co tu widzisz to jest dokładnie ten
sam HTML który znajduje się w głównym naszym komponentu.
To i ciekawa rzecz jeśli coś usuną zmienię.
Powiedz mnie wyrzuca go jakiś tekst.
Kontrola jak kontrola
on wykryje zmianę buduje i sam odświeża przeglądarkę niż logo zniknęło.
Czyli automatycznie wszystkie zmiany powinny się przebudować i się odświeżyć.
Zmian nie widać.
Spróbuj tutaj odświeżyć sobie stronę ręcznie też musisz zawsze sprawdzić czy
jeśli coś jest nie tak to kontrola S czy przebudowy.
Jeśli byłby problem po prostu musiała tutaj Control C przerwać ten taki proces
i jeszcze raz wykonać n.p.m. start żeby wystartować.
Raczej nie powinno być z tym
problemu ale w razie czego gdzie wiesz jak uruchomić serwer czy start.
Jak przerwać jego działanie czyli Control C i ponownie start.
Gdybyś chciał chciała ponownie.
Projekt z jakiegokolwiek powodu Kukiełka.
No to mamy gotowy projekt.
Będziemy mogli teraz przejść do pracy nad głównym komponenty naszej aplikacji.