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+
Aby wykonywać ćwiczenia z tego kursu musiał zejść z dowolnego edytora.
Ja natomiast będę korzystał tutaj akurat z
Wisłą studio KOD i polecam Tobie też ten edytor do naszego kursu dlatego że mam
bardzo dobre wsparcie dla HTML CSS a Java skryptu typu skryptu a nawet przy
udzielaniu odpowiedniej wtyczki świetnie wspiera też samego dolara.
Więc tej lekcji pokażę ci szybko tutaj.
Jak przygotować kod pobieramy wersję dla
systemu operacyjnego ja biorę dla Windowsa wersję stabilnością 4 19 to Intel Atom.
Uruchomienie.
Koło.
Pierwszy język.
Akceptuje i praktycznie wybieram sobie do
domyślne ustawienia nie zmieniam specjalnie za wiele w ścieżce.
To się może nam przydać.
Dodatkowo ja sobie jeszcze żebym mógł
otworzyć po prostu prawem klikając że mógł to zrobić otwór OK nie jest to też
super istotne czyli praktycznie wszystkie domyślne opcje instalacji są jak
najbardziej OK to wystarczy do pracy sam samolotem natomiast co będzie
istotne to będę musiał do samego vs Skoda czy lunch się uruchomi.
Dodatkowo mi jeszcze wtyczkę rozszerzenie zainstalować i otworzyć sobie nowe okno.
OK. I teraz co możemy zrobić.
Film Open folder plik Otwórz folder mogę z
nim pracować i tam utworzyć sobie nasz projekt.
Nim to zrobimy jednak to wartość to
rozszerzeń Extended EMS i wyszukać czegoś takiego jak Angola.
Language serwis.
I tutaj masz zainstalowane jak nie masz.
Robisz Instal.
Jeszcze nie ma informacji że jest tutaj but.
Naucza jeszcze włączy się w to było aktywne
włączyć czy aby na pewno ta wtyczka była aktywna przez dodatkowe rozszerzenia.
Lara można sobie zainstalować tutaj coś takiego jak np.
Sniper żeby podpowiadał dodatkowe rzeczy.
Niemniej najważniejszą rzeczą z rozszerzeń jest anglo Language serwis
bez tej wtyczki bardzo ciężko się pracuje dlatego że w HTML nie ma żadnych
podpowiedzi byśmy wszystko że tak powiem z głowy pisać.
Stąd też chcą zwłaszcza w kolejnych lekcjach byśmy mieli
bardzo fajne odpowiadanie od razu w HTML u tak jak widzisz nam pokazuje same metody
dostępne dane sporo też błędów automatycznie będzie
wykrywane w tym miejscu więc najważniejszą rzeczą jest ta wtyczka.
Serwis.
Większość pozostałych ustawień zostawił
tutaj domyślne tak żebyś nie musiał niczego specjalnie zmieniać skonfigurować
po prostu domyślne ustawienia bieżącego kodu.
Polecam ten sam edytor dlatego że będę pokazywał pewne rzeczy to
będzie też łatwo podążać za tymi elementami aczkolwiek tak jak wspomniałam
wcześniej dowolny edytor który dobrze wspiera Mullera sztorm Inteligo itd.
Powinny także jak najbardziej się sprawdzić w naszym kursie.
Angole.