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+
Zanim będziemy mogli rozpocząć pracę z zespołem ang.
dolarem w tej lekcji pokażę ci jak przygotować Twoje środowisko.
Twój komputer właśnie do
pracy z ambulatorium i z narzędziami zrób nam potrzebne jest.
Czyli możesz zrobić sobie Start Uruchom. Uruchom.
Cm x lub dowolny terminal wiersz poleceń z którego korzystasz i
czy masz zainstalowane na Odrze jest po prostu polecenie not.
Jeśli pokaże że nie ma takiego polecenia
lub pokaże wersję która jest niższa niż wersja dwunasta albo tak bo czternasta no
to możesz zainstalować tę wersję nową lub zaktualizować do wyższej wersji.
Do pracy z
tymi które są w kursie potrzebne polecam wersję przynajmniej 12 14 lub wyższą.
Możesz też zarejestrować po prostu aktualną wersję nut.
Jest też wszystko powinno bez problemu działać.
Tutaj mamy główną stronę gdzie jest kropka org w google wyszukać
wchodzimy tutaj możemy od razu się wziąć stąd możemy też przejść do sekcji download
czy wersję stabilną RTS lub wersję bieżącą Karen też jest stabilna
tylko nie jest to wersja Long Term Support.
Jest to wersja o krótszym okresie życia.
Co nas interesuje.
Dla Windowsa chcemy pobrać tutaj wersję 4
bit dla Mac OS a jest to też instalacja plików pakietu.
Natomiast dla Linuksa polecam skorzystać z menedżera pakietów który jest w
dystrybucji Linuksa żeby zainstalować sobie właśnie odpowiednią wersję nuda
tutaj tak ja biorę 64 wersję 64 bitową wersję rejestratora MS i dla Windows.
Uruchomi pobrany plik.
Otworzymy się takie okienko wybieram praktycznie domyślne opcje.
ścieżka też domyśla co jest istotne tutaj te wszystkie opcje żeby były zaznaczone.
Szczególnie interesuje nas żeby testować n.p. pakiet menadżer będziemy korzystali i
chcemy żeby oba narzędzia n.p.m. stały się koniecznie w ścieżce paw.
Zaraz sprawdzimy jak to działa ale tutaj też polecam zainstalować
wszystkie dodatkowe narzędzia do kompilacji Pythona czy np.
studio puls.
Jeśli jakieś biblioteki wymagają
kompilacji źródeł może chciałbyś kupować CSS albo z innych dodatków bibliotek które
wymagają skupowania czegoś chcą to zainstalować.
Nie będzie też żadnych problemów z relacją różnych bibliotek dla ok Instal.
Instalacja normalnie chwilkę potrwa i od
razu pozwoliłem sobie wyciąć ten fragment przeskoczyć od razu do sukcesu.
Jeśli to się skończyło instalować to tutaj jeszcze urlop dodatkowy.
Taki terminal w którym przez Enix tu tu właśnie zostają też dodatkowe
narzędzia deweloperskie narzędzia służące właśnie do kompilacji dodatkowych
bibliotek kompilacji aktywnych rozszerzeń typu właśnie narzędzi.
Pytanie czy
odbili biletu czyli coś co pozwala nam właśnie rusza biblioteki instalować
dodatkowo razem z kodem i ponownie te kroki mogą potrwać zależnie
od szybkości łącza tutaj musi ściągać kilka rzeczy po instalować
więcej zostaw ten proces żeby się na spokojnie dokończył wszystkie rzeczy
i na końcu Enter Exit czyli przyciskiem enter to okienko powinno się wtedy
zamknąć i teraz ponownie można uruchomić terminal.
Nie mogę z tego samego terminala
skorzystać ale mam tutaj stare ścieżki muszę zamknąć ten terminal korzystałem
jeszcze aby otworzyć nowy wiersz polecenia i teraz ponownie spróbuję wpisać kod
wersja no to pokazuje mi wersję którą właśnie się zainstalowano.
Jest to powinno dać komunikat
jeśli nie ma tego że coś poszło nie tak z instalacją proponuję jeszcze raz sprawdzić
co na to że na pewno wszystkie kroki były wykonane do końca.
Tam nie było żadnych błędów
i ponownie uruchomić ten terminal może też ponownie robić komputer żeby na pewno te
wszystkie zmiany były zastosowane razem z hołdem.
Pamiętasz że robiliśmy także n.p.m.
czyli pakiet Manager w wersji szóstej powiedzmy 14 dziś może
wersje wyższe zaoferować nowsze wersje jest to jak najbardziej OK.
Najważniejsze żeby jeszcze w ścieżce tak zwanej afery systemowej
znajdowało się właśnie ścieżka do not Moll czyli gdzieś tutaj
trzeba poszukać na końcu bo to ostatnia rzecz postanowiliśmy tutaj
nazwę użytkownika nazwę szkodnika update roaming MP.
Ten katalog jest ważny dlatego że będziemy
instalować coś na przykład n.p.m. Instal z flagą Global czyli różnego rodzaju
narzędzia do pracy z dolarem czy innymi komórkami.
Powiedzmy sobie pierwszy lepszy pakiet HTTP server.
Coś co mogę przykładowo sprawdzić
jeśli ściągnie jakiś pakiet stąd on trafi do tego wspólnego katalogu.
Dzięki temu nie trzeba tych samych narzędzi instalować za każdym razem po
każdej aplikacji możesz sobie takie narzędzia raz zainstalować.
Tutaj do tego katalogu właśnie ta roaming opcja G minus czyli Global sprawia że
tabletka będzie dostępna z dowolnego miejsca np.
mogę sobie tutaj tworzyć katalog przejść do katalogu katalogu tworzyć sobie
jakiś plik powiedzmy obojętnie nie ma to znaczenia HTTP server i uruchomiony to
narzędzie z dowolnego miejsca powinno to zadziałać znaczy że nasz nos
jest ze sobą prawidłowo i że wszystkie ścieżki są poprawne mógł
zrobić Control C czyli zakończyć taki proces.
Ok możemy zamknąć okno i mamy zainstalowane.
No i możemy przejść do kolejnych kroków tworzenia naszej aplikacji.