Angular – szybki start!

0
272
views

Od dwóch tygodni nie pojawił się żaden post związany z projektem Krauza. Na ten stan rzeczy składają się dwa powody: tydzień temu brałem udział w międzynarodowym hackathonie organizowanym przez bank ING (24hCodING), po którym potrzebowałem trochę czasu na regenerację, a poza tym w ostatnim czasie w projekcie nie działo się nic nadzwyczajnego i odkrywczego. Skupiłem się na dokończeniu komunikacji z bazą danych i API, jedyną ciekawą rzeczą, która pojawiła się w projekcie są migracje bazodanowe z wykorzystaniem narzędzia Phinx, jednak @adrianpietka już rozpisał się na ten temat więc zapraszam do jego posta.

Po uprzątnięciu warstwy backendowej przyszła pora na frontend i to dzisiaj chciałbym opisać, bo wspominałem już wcześniej, że chciałbym na front wrzucić najnowszego Angulara żeby poznać coś świeżego i nowego. Na razie ta część projektu jest na bardzo podstawowym poziomie, jednak jest już co opisać :smiley:. Już kiedyś pojawił się tutaj post z podstawowymi informacjami o tym frameworku świeżo po szkoleniu, ale dopiero teraz mogę zacząć pisać konkrety na przykładzie prawdziwego użycia w projekcie.

Angular CLI

Na wzór innych popularnych frameworków Angular wprowadził narzędzie Angular CLI, które znacząco przyspiesza pracę podczas developmentu. Myślę, że narzędzie będzie potrzebne każdemu początkującemu w tym frameworku bo dzięki niemu szybko utworzymy sam projekt jak i wszystkie elementy (komponenty, moduły , dyrektywy itp), ale oprócz tego dostępnych jest sporo innych udogodnień, jak np. wbudowany webserver, który jest automatycznie przeładowywany, a całość jest prekompilowana podczas każdej zmiany w kodzie.

Jedynie co trzeba zrobić to zainstalować globalnie node package.

Po zainstalowaniu warto zobaczyć jakie daje nam możliwości to narzędzie wyświetlając pomoc.

Utworzenie projektu jest ekspresowe

Po zainstalowaniu Angular CLI jesteś gotowy aby utworzyć pierwszy projekt. W konsoli wpisz poniższe polecenia:

Poczekaj chwilę, aż wszystko się pobierze i przekompiluje… Ok, aplikacja już widoczna w Twojej przeglądarce? Wow, to działa! Cały niezbędny zestaw do developmentu już ogarnięty i nie potrzebujesz instalować żadnych gruntów, gulpów czy webpacków, nie musisz konfigurować żadnych zadań w tych task runnerach bo te które są Ci potrzebne na teraz już są dla Ciebie skonfigurowane i wątpię czy będa Ci na razie potrzebne jakieś inne bajery.

Pierwsze komponenty

Lecimy dalej! Stwórzmy pierwsze komponenty np. header, footer, nawigacja i stronę startową.

Footer i header

W konsoli wpisz polecenia niezbędne do utworzenia nowych komponentów.

Powinny zostać dodane nowe foldery footer i header w katalogu src/app, w których dostępny jest plik html, css oraz dwa pliki w formacie TypeScript komponentu i testów. Na tę chwilę wystarczy wypełnić pliki html jakąś zawartością i w miarę potrzeb dodać jakieś style. Teraz aby nasze komponenty zostały wyświetlone w odpowiednim miejscu na stronie trzeba je dodać do pliku html głównego komponentu aplikacji (src/app/app.component.html).

Nawigacja

Stwórzmy prostą nawigację aby przechodzić między stronami. W moim wypadku nawigacja jest częścią headera, więc dodam ją jako podkomponent komponentu header.

Plik html (src/app/header/navigation/navigation.component.html) wypełniamy odnośnikami do podstron…

Następnym krokiem jest routing, otwieramy główny plik modułu (src/app/app.module.ts) i tam trzeba zadeklarować odpowiednie ścieżki. Poniżej wklejam kod, który należy dodać oprócz tego, który już tam istnieje.

Wypadałoby jeszcze wyznaczyć miejsce, gdzie poszczególne strony powinny się wyświetlać. Do pliku HTML, należy wrzucić <router-outlet></router-outlet>, czyli w wypadku poprzedniego przykładu z headerem i footerem, może wyglądać to następująco.

Uzupłenienie brakujących komponentów

Dodaliśmy trzy odnośniki do komponentów, które jeszcze nie istnieją, więc wypadałoby je utworzyć.

Teraz można zobaczyć stronę w przeglądarce i przechodzić między stroną Home i Boxes. Kiedy w adresie pojawi się nieznany URL to zostanie wyświetlona strona PageNotFound.

Podsumowanie

Rozstawienie projektu z Agularem jest ekspresowe i przyjemne, na razie jestem bardzo zadowolony. Jestem ciekaw jak potoczy się dalsza praca z tym frameworkiem. Obawiam się trochę zbyt dużych przywiązań i przyzwyczajeń do 1 wersji, jednak zobaczymy. Mam nadzieję, że będę mógł jeszcze napisać posta równie entuzjastycznego po dłuższej pracy z Angularem :smiley: