Angular v4 na start

Wygenerowałeś już pierwszy projekt angularowy. Nie ruszysz jednak dalej dopóki nie nauczysz się samego Angulara.

W tym wpisie przedstawię polecane materiały oraz sposoby nauki Angulara v4, bazując na własnych, świeżych doświadczeniach.

Co znajdziesz w artykule?

• Angular – czyli?
• Materiały do nauki
• Narzędzia, na które warto zwrócić uwagę i które wykorzystamy w dalszej pracy

Poziom: średniozaawansowany

Wymagania wstępne:

• Przynajmniej podstawowa znajomość HTML5, CSS, JavaScript.
• Przynajmniej podstawowa znajomość TypeScript.
• Przynajmniej podstawowa znajomość ES6.

Polecam również:

• Znajomość linii komend.
• Zainstalowany Node JS, umiejętność instalowania paczek (NPM).
• Znajomość Angular CLI.

Praca domowa:

Zacznij naukę Angulara. Skorzystaj z któregoś z polecanych kursów bądź materiałów. Za chwilę zaczniemy wykorzystywać tą wiedzę w praktyce, tworzyć pierwsze komponenty. Warto byś miał jakieś podstawy.

Pomocne informacje znajdziesz w artykule. W razie problemów -śmiało dawaj znać na naszej Tutorialowej Grupie Wsparcia.

Angular

Jeden z najbardziej znanych frameworków JavaScriptowych. Wspierany przez Google. Pozwala budować aplikacje webowe, mobilne, desktopowe.

Jego pierwsze wydanie miało miejsce w 2009 roku. Nie, nie mam na myśli Angulara v4, który jest dość młody (marzec 2017). Mam na myśli jego poprzednika – Angular JS.

Zdarzało mi się spotykać z pytaniem: od czego zacząć naukę Angulara? AngularJS czy Angular v2? A może Angular v4? Otóż między wersjami JS oraz v2 jest tak duża przepaść, że jeśli celujesz w samego Angulara v4, zacznij co najmniej od Angular v2, najlepiej od razu v4. Wiedza z AngularJS może być pomocna, ale nie ma sensu zaczynać od niej by prześć do Angular v4. Za dużo się zmieniło… Poczynając nawet od samego języka programowania. W Angular v2/4 korzystamy z TypeScriptu (o którym już pisałam).

Materiały (nie tylko) do nauki

Z czego skorzystałam ucząć się Angulara v4?

Kursy

Po pierwsze kursu, o którym już kilka razy trąbiłam na Fanpage’u NetteCode 😉 Angular Essentials (Angular 2/Angular 4 with TypeScript) by Maximilian Schwartzmuller. Kurs standardowo kosztuje 370 zł, ale jak wiecie na Udemy często pojawiają się promocje. W tej chwili np. widzę go za 42 zł. A niedawno kosztował 35 zł. Moim zdaniem warto swojej ceny.

Ale uwaga! Ja sama nie zapłaciłam za niego ani grosza. Miałam go po prostu zapisanego na koncie. Prawdopodobnie przy okazji jednej z promocji, które codziennie pojawiają się na Wykopie (tag: #kursyudemy). Kiedy usiadłam do nauki Angulara przejrzałam ofertę dostępnych, darmowych kursów. A ponieważ zarówno o autorze jak i kursie słyszałam już pozytywne opinie – skorzystałam z kursu i przerobiłam (w 92%, a cały ma 112 lekcji, więc to było wyzwanie). To był świetny start!

Ten kurs możecie upolować za darmo. Jednak gdybym miała wybierać jeszcze raz skorzystałabym z kursu Angular 4 (formerly Angular 2) – The Complete Guide, tego samego autora. Oznaczony jako BestSeller, 27 tys. ocen, średnia ocena: 4,7, prawie 98 tys. zapisanych uczestników – w tym ja, ponieważ sama się skusiłam zapłacić za ten kurs. Świetny autor, a tym razem 396 lekcji zamiast 112. Mocno rozszerza poprzedni. Przy czym autor cały czas dodaje kolejne moduły. Nie jestem przekonana, czy możecie go dostać za darmo na wykopie. Przynajmniej ja się jeszcze nie natknęłam 😉 P.S. Do tego kursu zaglądałam na razie wyrywkowo, pewnie już nie przysiądę do całości.

Wskazówka: jeśli na Udemy widzisz kurs w cenie standardowej – wejdź w trybie Incognito bądź skasuj cookies i wejdź jeszcze raz 😉

Jeśli chodzi o kursy, zaufałabym również jakości EDX oraz Egghead.io. Sama na egghead.io uczyłam się Angular JS lata temu. Tym razem niestety nie dotarłam do tego źródła, uczę się dalej w praktyc e.

Na egghead za darmo można skorzystać z kursu Get Started with Angular, bazującego na Angular v2.

Na EDX ciekawie wygląda Developing Dynamic Web Applications Using Angular by Microsoft. Również bazuje na Angular v2 i wyżej.

Przypominam, że kursy na EDX są darmowe. Jeśli wydaje Ci się inaczej – zajrzyj do artykułu Coursera, EDX – jak darmowe? jak płatne!

Jednak nic tak nie działa jak nauka poprzez praktykę. Nie rób dziesięciu kursów, nie poprzestawaj na słuchaniu. Działaj. Najlepiej równolegle do kursów. A następnie już tylko działaj. Korzystając z materiałów, dokumentacji, Google, Stackoverflow, itd.

Angular – oficjalna dokumentacja (do aktualnie stabilnej wersji – w tej chwili 4.4.3)

Tutorial Tour of Heroes – również świetne wprowadzenie do Angulara

Polecam również zajrzeć na stronę Angular Resources. Nie wiem czy tak bardzo pod kątem samych materiałów do nauki, ale zdecydowanie materiałów do pracy 😉

Angular Resources

Development

Po pierwsze mamy sekcję Development. Znajdziemy w niej m.in. propozycje IDE. Wśród nich takie opcje jak IntelliJ IDEA, WebStorm oraz Visual Studio Code.

IntelliJ IDEA oraz Webstorm to produkt JetBrains, różnią się głównie „celem”. WebStorm jest ukierunkowany na aplikacje webowe. Oba narzędzia są niestety płatne, a tylko w szczególnych wypadkach dostępne za darmo, np. dla studentów – w tej paczce (jeśli studiujesz – skorzystaj, warto!).

Visual Studio Code jest z kolei edytorem kodu oferowanym przez Microsoft. Za darmo. Popełniłam już krótkie wprowadzenie do niego w ramach tej serii.

Przyznam szczerze, że na co dzień korzystam z Webstorma. Na potrzeby tego tutorialu postanowiłam jednak używać darmowego rozwiązania – Visual Studio Code. I byłam dość pozytywnie zaskoczona 😉

Co prawda z czasem wkurzyła mnie nieco konieczność szukania i podpinania rozszerzeń, które Webstorm daje mi już na starcie. Z drugiej strony – mając już skonfigurowane środowisko pracy, może być naprawdę wygodną, a co więcej – darmową, alternatywą.

Co dalej?

Tooling

Narzędzia, na które warto zwrócić uwagę. A zwłaszcza pierwsze z nich – Angular CLI. Zdecydowanie ułatwia operowanie projektem. Generowanie nowego projektu, dodawanie nowych komponentów (jedną linijką w terminalu, zamiast tworzyć min. trzy pliki dla każdego komponentu), uruchamianie aplikacji, itd.

Na temat Angular CLI i struktury generowanego przez niego projektu również już pisałam.

Data Libraries

A w nich m.in. Angular Fire, z którego skorzystamy w naszej aplikacji. Jest to oficjalna biblioteka dla Firebase i Angulara. Przypominam, że z Firebase skorzystamy w celu zapewnienia aplikacji co najmniej hostingu i bazy danych (a być może i autoryzacji – zobaczymy czy aż tak rozwiniemy aplikację przykładową).

Firebase w ogóle dość mocno wspiera Angulara. Może dlatego, że za nim również stoi Google.

UI Components

A wśród nich m.in. ng-bootstrap, z którego skorzystamy w naszej aplikacji.

Fajną alternatywą jest również Angular Material 2, z której nawiasem korzystam w aplikacji Meals Planner (demo). Jeśli komuś skojarzyła się z moją inną aplikacją – Social Media Planner, to słusznie 😛 W Social Media Plannerze również korzystam z Material Design, ale piszę ją w React’cie, nie Angularze.

Cross-Platform Development

Do tworzenia tzw. crossed-platform apps, tj. aplikacji mobilnych (m.in. Ionic, React Native) oraz desktopowych (np. Electron). Może kiedyś poruszymy i ten temat na blogu.

To tyle na dzisiaj! Przyjemnej nauki! Bez Angulara w dalszej części serii ani rusz.