Jak się uczę: Angular

Angular

Ostatnio na blogu było bardzo motywacyjne, głównie ze względu na wyzwnanie Programuj, dziewczyno! Ale na razie chwilowa przerwa w motywowaniu, bo dziś artykuł z tych konkretnych, czyli lista materiałów, z których uczę się Angulara.

Słowem wstępu – Angulara uczę się od kilku miesięcy. Zaczęłam od wersji 1, czyli AngularJS, w niej też tworzyłam aplikację na konkurs Daj Się Poznac. Jeśli chcesz poczytać o tym więcej, odsyłam do raportów z tworzenia projektu. Jak już wcześniej tłumaczyłam, zaczęłam od Angulara 1, bo założyłam (błędnie), że najpierw powinno się poznać jedynkę, a potem dwójkę. Dopiero po fakcie dowiedziałam się, że między obiema wersjami są tak duże różnice, że znajomość wersji jeden nie daje aż tak dużo, jeśli chcemy się uczyć wersji 2.

Jeśli chodzi o samo nazewnictwo, jakim będę się posługiwać – wersję jeden nazywać będę AngularJS, natomiast wersje wyższe – Angular. Przyjmuję więc filozofię stosowaną przez oficjalną stronę Angulara. Obecnie dostępna jest już wersja 4.0, która jest jednak rozszerzeniem wersji 2. Między 2 a 4 nie ma więc tak ogromnego przeskoku jak między 1 i 2. Zostały wprowadzone ulepszenia, ale nie odczuwa się bardzo skoku między wersjami. Ja obecnie pracuję w Angularze 4. Materiały natomiast będą dotyczyły głównie Angulara 2, dlatego, że Angular 4 jest jego rozszerzeniem, więc podstawa to i tak Angular 2.

Angular jest frameworkiem JavaScriptu, który pozwala na budować aplikacje webowe, desktopowe, mobilne, a także natywne. Nie będę się tutaj rozwodzić nad teorią, a odeślę Was po prostu na oficjalną stronę Angulara, która jest jednocześnie moim głównym źródłem wiedzy. Na sam początek polecam kierować się sugestiami właśnie z tej strony, znajdziecie je tutaj. Jak wskazują twórcy Angulara, najpierw warto zapoznać się z konfiguracją środowiska, potem przejść przez tutorial, a później do bardziej zaawansowanych kwestii. Mnie bardzo przydało się przejście przez tutorial aplikacji Tour of Heroes. Dzięki niemu poznałam podstawowe pojęcia związane z Angularem, a także mogłam pierwszym raz zobaczyć, jak wygląda TypeScript. W Angularze bowiem pisze się w TypScripcie, który jest swego rodzaju „nakładką” na JavaScript zawierającą typy oraz inne przydatne funkcje.

Na samym początku dużym problemem był dla mnie właśnie TypeScript, bo było to zupełnie coś innego niż JavaScript, który już trochę jednak znam. Typy nie wydawały mi się aż tak przydatne, by trzeba było się tak trudzić. Ale z czasem okazało się, że TypeScript to naprawdę fajna sprawa. W Angularze można pisać też w zwykłym JS, ale z tego co wiem, nie jest to popularne. Samego TypeScriptu uczyłam się równolegle z Angularem, to znaczy po prostu patrząc na kod w tutorialach albo podglądając kod źródłowy aplikacji na githubie. Myślałam, że to wystarczy, ale okazało się, że potrzebuję trochę nad samym TS przysiąść. I tak trafiłam na dokumentację na oficjalnej stronie TypeScript. Bardzo prosto wyjaśnia ona podstawowe zasady, jakimi TS się kieruje. Dodatkowo zrobiłam też kurs Introduction to TypeScript na Udemy. Kurs jest darmowy i dość krótki, ale pozwala poukładać podstawowe kwestie.

Nie skłamię, jeśli powiem, że dokumentację z oficjalnej strony Angulara mam cały czas otwartą w przeglądarce. Równolegle uczę się też pisania testów jednostkowych, dlatego sekcja dotycząca testowania jest obecnie jedną z moich ulubionych. Bardzo fajnie opisuje ona sposób testowania poszczególnych elementów aplikacji. Ale to na pewno zadanie do zrobienia już po poznaniu podstaw Angulara 🙂

Lubię sobie najpierw o jakimś zagadnieniu posłuchać, albo pooglądać tutoriale, zanim przejdę do praktyki. W nauce Angulara bardzo pomógł mi kurs Accelerating through Angular na CodeSchool. Kurs pokazuje jak krok po kroku stworzyć prostą aplikację, akurat w tym przypadku dotyczącą wyścigów samochodowych, a dokładniej części do samochodu. Tworzymy więć listę z odpowiednimi widokami, zapoznajemy się ze strukturą projektu, a także specyfiką TypeScriptu. Naprawdę porządna dawka wiedzy podana w fajny i prosty sposób.

Kolejnym wartym uwagi kursem jest moim zdaniem Get Started With Angular na EggHead. Kurs podzielony jest na krótsze fragmenty niż ten na CodeSchool, więc łatwo odnaleźć wybrane zagadnienie i szybko prześledzić, na czym ono polega. Według mnie fajnie jest najpierw zrobić kurs na CodeSchool, bo porusza szerszy aspekt, skupia się też na wytłumaczeniu bardziej ogólnych zagadnień. A kurs na EggHead jest dla niego świetnym uzupełnieniem, bo przekazuje małe porcje konkrentej wiedzy. Oba kursy są płatne, ale nie znalazłam niestety zbyt dużo materiałów z Angulara zupełnie za darmo.

Na sam koniec polecę jeszcze kurs Angular 4 (formerly Angular 2) – The Complete Guide na Udemy. Udało mi się go kupić w promocyjnej cenie, czyli 10 euro. Polecam więc śledzić, czy nie ma promocji 🙂 Na razie obejrzałam dopiero kilka lekcji, ale już widzę, że fajnie mi się będzie uczyło, bo materiału jest dużo, ale jest podzielony na sekcje, dzięki czemu łatwo da się przerobić interesujący nas w danej chwili aspekt. I dodatkowo mamy tutaj nowości z Angulara 4, co z pewnością jest dużym plusem.

Równolegle polecam poczytać też o strukturze projektów w Angularze, bo jest dość specyficzna. Nadal mam problemy z odpowiednim rozplanowaniem układu poszczególnych plików, ale walczę. Jako że struktura projektu w Angularze jest dość złożona, warto od razu zapoznać się z Angular CLI, który pozwala na generowanie odpowiednim plików (z odpowiednimi ścieżkami i szkieletami!) przez terminal. Naprawdę to ogromnie ułatwia zadanie, szczególnie, gdy na przykład musielibyśmy ręcznie tworzyć po kilka plików do każdego modułu i komponentu, a tutaj po prostu wpisujemy odpowiednią komendę i dzieje się magia 😉

Jak widzicie, Angular to naprawdę sporo wiedzy do ogarnięcia 😉 Nie chcę tworzyć bardzo dlugich wpisów, dlatego zostawiam Was dzisiaj z wymienionymi linkami i na pewno powrócę z drugą częścią. Zaznaczam, że nie trzeba umieć AngularJS, żeby zacząć uczyć się Angulara. Mnie trochę pomogła znajomość specyfiki AngularJS, tj. nie były mi obce takie zagadnienia, jak komponenty czy moduły, jednak Angular traktuje je momentami zupełnie inaczej niż AngularJS. Dlatego osobom, które chcą zacząć przygodę z Angularem, nie polecam AngularJS, tylko od razu wersje wyższe.

Jeśli chcesz być na bieżąco i wiedzieć od razu, kiedy pojawi się druga część artykułu, zapraszam do polubienia Wake up and Code na FB.

Czy wpis się przydał? Podziel się wrażeniami w komentarzach 🙂

Udanego kodowania!

15 Replies to “Jak się uczę: Angular”

  1. Super wpis! W zupełności popieram. Ja również zaczęłam kilka miesięcy temu na potrzeby konkursu DSP naukę Angulara w wersji 2 i zdecydowanie polecam. Wersja 4 jest faktycznie ulepszona, ale nie wymagana na początek. Warto też, tak jak wspominasz, zaprzyjaźnić się z Angular CLI, ponieważ pozwala zaoszczędzić sporo czasu i skupiać się na ważnych rzeczach – a nie na ręcznym tworzeniu kilku plików dla każdego modułu.

    1. Dziękuję! Tak, Angular CLI to mój największy przyjaciel przy pracy z Angularem 🙂

  2. Super 🙂 zwłaszcze że własnie startuję z nauką tego 🙂

    1. Cieszę się, że wpis się przydaje 🙂 Powodzenia z nauką!

  3. Bardzo przydatny dla mnie wpis. Trafiłem tutaj przypadkiem, ale już dodałem bloga do ulubionych. Liznąłem trochę Angulara na YT, ale nic do mnie nie trafiało. Po, zaledwie, kilku godzinnym obczytaniu wymienionych materiałów, już wszystko się klaruje. Dziękuję za te wskazówki i Powodzenia wszystkim uczniakom 😉

    1. Super! Cieszę się, że materiały się sprawdzają. Dla mnie były one naprawdę świetne na początek i dlatego postanowiłam się nimi podzielić 🙂 Niestety nic na YT nie zwróciło jakoś szczególnie mojej uwagi, a też oglądałam sporo filmików tam.

  4. Świetny artykuł! Podpowiesz z czego się uczysz RxJS?

    1. Głównie z dokumentacji, czyli stąd http://reactivex.io/rxjs/. A jeśli chodzi o Redux w ogóle, nie tylko RxJS, to kursy na egghead 🙂

  5. Michał
    A gdyby, ktoś tak metodycznie od początku, krok, po kroczku, bez zbędnych komentarzy i linków, (tych potrzebnych do instalacji tak), od instalacji potrzebnych narzędzi, do instalacji Angulara i uruchomienia prostego projektu, przy pomocy przeglądarki, ale np na Ubuntu.
    Byłoby super.
    Pozdrawiam

    1. Praca z Angularem na Ubuntu nie różni się od tej na Windowsie czy Macu. Także można śmiało stosować dostępne tutoriale 😉

  6. Już trocę czasu minęło od tego wpisu, ale teraz bardzo był dla mnie przydatny.
    Koniecznie potrzebuję poznać podstawową wiedzę jak chodzi o Angular-a i dzięki temu wpisowi dowiedziałam się co mogę i powinnam ogarnąć aby mó cokolwiek na ten temat się wypowiedzieć (krótka prezentacja na zajęciach)

    Poczytam, pogoogluje, potutorialuje (co to za słowa :D) i zobaczę na ile ten Angular to dla mnie sprawa, może zagłebie się bardziej i przygotuję jakąś większą apkę…? 🙂

    1. Powodzenia w nauce! I pochwal się koniecznie apką, jak już jakąś zakodujesz 🙂

  7. Hej, skończyłem ostatnio naukę JavaScript na potrzeby stworzenia aplikacji webowej, która będzie moją pracą inżynierską i chcę wykorzystać kochanego Angulara 🙂 Widzę jednak, że od wersji 2 językiem popularnym jest TypeScript. Zatem, której wersji Angulara użyć przy braku znajomości TypeScript? Wiem, że wersja 1 jest przestarzała a w nowszych wersjach wskazany jest TypeScript 🙂 Pozdrawiam 🙂

    1. Nie polecam używania teraz Angulara 1, bo to bardzo stara technologia. No i jest zupełnie inny niż 2+, więc będziesz musiał się właściwie uczyć dwa razy. Co do TypeScript – to jest właściwie tylko „nakładka” na JS, więc wszystko działa tam tak samo, możesz jedynie dodawać typowania (których np. możesz na początku nie robić), ale jest to dość proste w opanowaniu i naprawdę przydatne. Da się też pisać w Angularze 2+ bez TS, ale TS jest naprawdę przydatny i nie ma dużego nakładu pracy, aby się go nauczyć

      1. W takim razie biorę się do nauki 🙂 dziękuje 🙂

Dodaj komentarz