Kurs Java

Wprowadzenie do Angulara

Angular to framework, który pozwala kompleksowo zająć się tworzeniem frontendu aplikacji webowej. Implementacja kodu w tym frameworku jest całkowicie niezależna od kodowania po stronie backendu i w dużych projektach często zdarza się, że praca ta jest wykonywana przez specjalistę frontendowca, który nie zna Javy.
AngularPic
Nie oznacza to jednak, że Javowiec nie może tworzyć frontendu w Angularze. Może i nawet powinien, jeśli chce być fullstackowcem na miarę naszych czasów. Idąc tą drogą lub przynajmniej mając takie zainteresowania, ważne jest, aby właściwie podejść do tematu i skupić się na poznaniu kilku kluczowych zasad.

Na pierwszy ogień idzie lista narzędzi wymaganych do współpracy z Angularem. Zapoznaj się z nią, ale jeszcze niczego nie instaluj. Po prostu przywitaj się z narzędziami i ich nazwami. Instalację wykonasz za chwilę. Co ważne nie musisz uczyć się tych narzędzi od deski do deski. Na tym etapie wystarczy, że poznasz podstawy.
  • nodejs - środowisko do budowania i uruchamiania aplikacji napisanych w Javascript.
    Popularną komendą node'a, którą możesz kojarzyć, jest node.

    Link: nodejs.org
  • npmjs - menadżer pakietów (instalowany razem z nodejs), który pozwala na instalowanie zależności wymaganych w naszym projekcie (w dużym uproszczeniu możesz sobie go wyobrażać jako takiego Mavena dla Javascriptu).
    Komendą uruchomieniową jest npm.

    Link: npmjs.com
    Pamiętaj, że link jest dodany tutaj poglądowo. Narzędzie jest instalowane razem z nodejs.
  • AngularCLI, czyli Angular Command Line Interface - narzędzie pozwalające na łatwe tworzenie i aktualizację projektów w Angularze i jak sama nazwa wskazuje, jest to narzędzie linii komend. Komendą uruchomieniową jest ng i będziesz z niej często korzystał(a). AngularCLI posiada komendę ng serve, którą udostępni Twój frontend na domyślnym porcie 4200, dzięki czemu zobaczysz go w przeglądarce bez uruchamiania serwera Spring Boot (wrócimy do tego)!

    Link: github.com/angular/angular-cli
    Link jest dodany poglądowo, ponieważ instalację narzędzia wykonasz za pomocą npm.
  • IDE pozwalające na wygodną implementację (do wyboru):
    • Visual Studio Code - darmowe narzędzie posiadające pełno wtyczek i rozszerzeń, ale z naszych obserwacji wynika, że jest to narzędzie mniej popularne, szczególnie wśród Javowców przyzwyczajonych do IntelliJ-a.

      code.visualstudio.com
    • WebStorm - płatne, ale co najważniejsze oparte na IntelliJ (tak naprawdę jest to IntelliJ z dodatkowymi możliwościami). Posiada miesięczny trial, a więc możesz go używać za darmo przez cały miesiąc. WebStorm posiada wszystko to, czego używamy każdego dnia w pracy. Nie trzeba szukać i instalować wtyczek.

      jetbrains.com/webstorm
Możesz oczywiście używać dowolnego innego narzędzia, nawet swojego podstawowego IDE do programowania w Javie. Pamiętaj jednak, że wymienione narzędzia dają naprawdę znaczne wsparcie w tworzeniu kodu. Wystarczy wspomnieć o łatwości przechodzenia do metody Javascript (a w zasadzie do Typescript) bezpośrednio z edytowanego właśnie pliku html. Tak samo klikając w nazwę stylu, od razu odwiedzamy odpowiedni plik ze stylami. Takich ułatwień jest oczywiście dużo więcej.

Z racji tego, że w pracy na co dzień korzystamy z WebStorma, w kursie również korzystamy z tego narzędzia, jednak nie ma to żadnego wpływu na kod, który powstaje.

Instalacja

W celu przygotowania środowiska do pracy z Angularem wykonaj następujące kroki:
  • Wejdź na stronę https://nodejs.org i ściągnij node'a LTS:
  • Zainstaluj ściągnięte narzędzie, przeklikując kolejne strony wizarda (niczego nie zmieniając).
  • Po instalacji wpisz w linii komend node -v i jeśli wszystko poszło zgodnie z planem, zobaczysz informację o wersji (w naszym przypadku na konsoli zostanie wypisane: v14.17.0).
  • Instalator node'a wykonał również instalację narzędzia npm. Możesz to też sprawdzić, wpisując w linii komend npm -v. Wersja npm będzie oczywiście inna niż narzędzia node. Na przykład u nas jest to v6.14.13.
  • Korzystając z narzędzia npm, instalujemy AngularCLI. Wystarczy wpisać poniższą komendę, a narzędzie zostanie ściągnięte z repozytorium w internecie i zainstalowane na komputerze. Ustawienie -g oznacza instalację globalną, dzięki czemu każdy z naszych projektów w dowolnym miejscu na komputerze będzie miał dostęp do AngularCLI. Tak więc uruchamiamy polecenie npm install -g @angular/cli:
    Na tym etapie interesuje nas tylko tyle, aby proces doszedł do końca oraz by wyświetlił podsumowanie o wykonanych instalacjach lub aktualizacjach:
    Powyższe zdjęcie jest przykładowe, abyś wiedział(a), czego możesz się spodziewać. Liczby mogą różnić się od tych ze zdjęcia. Ważne jest, aby w trakcie instalacji nie wystąpiły błędy, które doprowadzą do jej przerwania.
    Appa Notka. W przypadku gdy chcesz dowiedzieć się więcej o instalacji albo na przykład chciał(a)byś odinstalować istniejącą wersję AngularCLI, zerknij do zwięzłej i przejrzystej dokumentacji na stronie: github.com/angular/angular-cli
  • Zainstaluj narzędzie deweloperskie, w którym będziesz implementował(a) kod. Polecamy WebStorm-a ze względu, że jest gotowy do użycia beż potrzeby instalowania dodatkowych wtyczek. Poza tym przez miesiąc jest całkowicie darmowy, a po miesiącu możesz przesiąść się na darmowe narzędzie, np. Visual Studio Code. Wtedy będziesz już wiedział(a), jakie masz potrzeby podczas tworzenia kodu w Angularze i łatwiej Ci będzie wyszukać odpowiednie wtyczki do Visuala.

Stworzenie pierwszego projektu

Na początek mała uwaga. Ten rozdział jest przeznaczony dla wszystkich, których interesuje stworzenie własnego projektu całkowicie od zera. Warto to zrobić w celach szkoleniowych, aby zaznajomić się z tym, jak to ogólnie działa. W dalszych rozdziałach przejdziemy do projektu naszej aplikacji z kursu. Nie wymaga ona generowania, ponieważ jej źródła są dostępne po wykupieniu pakietu i wystarczy je zaimportować oraz zbudować.

Narzędzie AngularCli umożliwia łatwe tworzenie struktury nowego projektu. Należy uruchomić poniższą komendę, a narzędzie zrobi wszystko za nas: 
ng new startappa-project
Struktura nowego projektu będzie wyglądać tak:
Teraz pozostało nam tylko zaserwować nową aplikację w systemie, tak aby była dostępna pod adresem url: 
ng serve
Wtedy pojawi się widok podobny do poniższego:
Oznacza to, że możemy zerknąć do przeglądarki, w której pojawi się nasza wygenerowana aplikacja:
Mamy szkielet prostej aplikacji w Angularze. Wszystko to osiągnęliśmy po uruchomieniu zaledwie kilku komend. Wow!

W tym miejscu zataczamy koło i wracamy do początku tego rozdziału, w którym wspominaliśmy, że "Implementacja kodu w tym frameworku jest całkowicie niezależna od kodowania po stronie backendu". Właśnie dlatego ściągałe(a)ś osobne narzędzie deweloperskie (WebStorm) i z tego samego powodu jest Ci potrzebny AngularCLI.

Angular ma to do siebie, że "lubi być postrzegany" jako framework niezwiązany z żadną konkretną technologią backendową. Nie ma dla niego znaczenia czy po stronie backendu uruchmiony jest kod w Javie (np. w Springu), czy też jest to kod C# lub dowolnym innym języku, czy frameworku.

To właśnie dlatego narzędzie AngularCli posiada komendę serve, która uruchomia serwer nasłuchujący na żywo na zmiany wykonane w kodzie przez dewelopera (Angular Live Development Server).
Appa Notka. Dzięki Angular Live Development Server nie musisz odświeżać własnoręcznie widoku w przeglądarce po każdej zmianie w kodzie frontendu. Wystarczy, że zmienisz coś w pliku (np. *.html albo *.ts) a widok w przeglądarce zostanie automatycznie przeładowany.

Import pierwszego projektu

Otworzymy teraz wygenerowany projekt w WebStorm, który jest bardzo popularnym narzędziem do pracy z Angularem, często wybieranym zarówno przez frontendowców, jak i deweloperów Java:
Tak będzie wyglądał nasz projekt otwarty w WebStorm (tryb ciemny):

Struktura projektu

Plik app.component.html zawiera cały widok wygenerowanego projektu. Możesz spokojnie usunąć zawartość tego pliku, a następnie wprowadzić tam dowolny tekst, np. "Kurs Javappa". Po zapisie zmian nowy widok zostanie automatycznie wyświetlony w przeglądarce.

Projekt Angular ma ściśle zdefiniowaną strukturę. Wszystkie pliki, które widzisz na zdjęciu, mają swoje konkretne przeznaczenie. Kilka z nich musisz poznać od razu na początku swojej przygody z Angularem (pogrubieniem i kolorem wyróżniliśmy te elementy, które są dla Ciebie najważniejsze i na które koniecznie musisz zwrócić uwagę):
  • environments

    Zawiera wszystkie zależności, z których będzie korzystał nasz projekt (biblioteki i podprojekty). To co znajduje się w tym katalogu jest silnie związane z plikiem package.json, w którym znajdują się nazwy i wersje zależności.
  • src

    Zawiera źródła naszego projektu (pliki html, typescript, css).
  • .editorconfig

    Zapewnie nam kompatybilność ustawień (np. kodowanie, rozmiar wcięć, czy max. długość linii) miedzy różnymi edytorami.
  • angular.json

    Główny plik konfiguracyjny, w którym możemy np. definiować ścieżki do plików ze stylami czy do plików javascript. To w tym miejscu możemy zdefiniować prefix naszego projektu (prefix).
  • browserlist

    Definiuje wersje przeglądrek, z którymi mają być kompatybilne źródła naszego projektu. W przypadku gdy użyjemy rozwiązania niezgodnego z zapisanymi tu wersjami dostaniemy komunikat o błedzie podczas kompilacji.
  • karma.conf.js

    Przechowuje konfigurację testów frontendowych naszych funkcjonalności.
  • package.json

    Plik zawiera zależności wraz z zwersjami. Na ich podstawie dociągane są wymagane pliki z internetu wraz z plikami powiązanymi. Tak jak pisaliśmy wcześniej, pliki są wgrywane do katalogu node_modules.
  • package-lock.json

    Plik jest generowany gdy uruchomimy komendę npm install. Zawiera on informacje o naszych zależnościach. Możemy tu znaleźć między innymi informacje o url, z którego dana zależność jest pobierana.
  • tsconfig.app.json

    Tutaj mamy konfigurację typescripta dla aplikacji.
  • tsconfig.json

    Konfigurację typescripta dla workspace'a (może on zawierać więcej niż jeden projekt/aplikację). Bardzo ważną sekcją tego pliku jest compilerOptions, w któej możemy ustawiać parametry dotyczące kompilacji kodu typescript.
  • tsconfig.spec.json

    Konfiguracja typescripta dla testów frontendowych.
  • tslint.json

    Zawiera reguły dotyczące składni naszego kodu, które pomagają utrzymać w nim porządek.

Struktura źródeł, czyli src

W tym katalogu będziemy tworzyć kod naszego projektu. Podstawowa struktura wygląda następująco (ponownie - pogrubieniem i kolorem wyróżniliśmy te elementy, które są dla Ciebie najważniejsze i na które koniecznie musisz zwrócić uwagę):
  • app

    Zawiera pliki html, typescript,i pliki ze stylami. W typowej aplikacji znajdują się tutaj jeszcze katalogi z podziałem na komponenty, serwisy, klasy domenowe i inne istotne elementy. Dla porównania katalog app aplikacji z kursu wygląda tak:
  • assets

    Tutaj znajdują się pliki statyczne, na przykład grafiki.
  • environments

    Przechowujemy tutaj ustawienia w zależności od trybu, w któym uruchamiamy aplikację (np. deweloperski lub produkcyjny). Ustawienia między trybami mogą się różnić, stąd potrzebujemy dla nich osobnych plików.
  • index.html

    Zawiera główny plik startowy aplikacji webowej. Tam są dąłaczane pliki ze stylami , javascriptwoe, ścieżki zewnętrznych źródeł. Tam też w body strony znajdziesz tag <app-root>, pod którego Angular podstawia bieżący widok aplikacji.
  • main.ts

    Wskazuje moduł, któy jest miejscem, od któego zaczyna się kompilacja kodu.
  • polyfills.ts

    Plik konfiguracyjny zapewniający kompatybilność między przeglądarkami.
  • styles.css

    Style dostępne w we wszystkich miejscach aplikacji. Mogą być nadpisywane przez style znajdujące się w podkatalogach katalogu app.
  • test.ts

    Przechowuje konfigurację uruchomieniową testów frontendowych.

Podstawowa architektura Angulara

Poznałe(a)ś już strukturę typowego projektu Angular, więc teraz przyszedł czas na zapoznanie się z podstawowymi składowymi tego frameworka oraz tym jakie występują między nimi relacje.

Podstawową jednostką podziału Angulara jest moduł, który zawiera komponenty i serwisy. Może również zawierać inne moduły. W komponencie bardzo często pojawiają się dyrektywy i oraz pipes. Komponent współpracuje bezpośrednio z widokiem z jednej strony i z serwisem z drugiej. Serwis jest odpowiedzialny za nawiązanie komunikacji po REST Api z serwerem.
  • Moduł

    Każda aplikacja Angular ma przynajmniej jeden moduł, który nazywamy modułem głównym lub bazowym. W naszych projektach znajduje się on w pliku app.module.ts. W nim znajdują się informacje o tym jakich modułów, komponentów i serwisów używamy w aplikacji. To tutaj "zaczyna się" aplikacja w Angularze.
  • Komponent

    Komponent współpracuje z widokiem html zdefiniowanym albo w postaci szablonu, albo (najczęściej) w osobnym pliku html. W komponencie będziemy odwoływać się do elementów widoku, a także obsugiwać zdarzenia generowane w trakcie pracy użytkownika z widokiem (np. kliknięcie przycisku, zapis formularza i wiele innych).

    Podstawowym komponentem w Angularze jest AppComponent zdefiniowany w module bazowym. Kolejno dodawane przez nas komponenty będą tworzyły drzewo komponentów, dla których rootem będzie AppComponent.
    Appa Notka. W Angularze każdy komponent musi być zadeklarowany w module. W przypadku gdy tego nie zrobimy, otrzymamy błąd w konsoli i frontend aplikacji nie będzie dostępny.
    • Serwis

      Serwisy podobnie jak to miało miejsce w AngularJS, służą do wysyłania, odbierania i przetwarzania danych. Stanowią one również główne miejsce wykonywania zadań autoryzacyjnych użytkowników.

      Najczęściej w serwisie wysyłamy i odbieramy żądania http. W scenariuszu wysyłającym dane, serwis przyjmuje od komponentu przygotowane obiekty, które następnie albo jeszcze obrabia i wysyła na serwer, albo od razu wykonuje wysyłkę.

      W scenariuszu, w którym dane są odbierane z serwera, serwis buduje obiekty domenowe na podstawie otrzymanych danych i dostarcza je kontrolerowi do wyświetlenia.

      Tak wygląda zestaw wspomnianych plików w projekcie z kursu:

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy: stackshare
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .

Starter   Jak to działa   Aplikacja  
Facebook Obserwuj nas   Polityka Cookies   Regulamin   Licencja   Ochrona prywatności  
Pozycjonowanie stron: Grupa TENSE