Angular 5 – Pierwsze komponenty

W dzisiejszym odcinku kursu postanowimy zaimplementować szkielet naszej głównej aplikacji do zarządzania listą użytkowników, produktów i wypożyczeń.

Jak pisałem w pierwszym wpisie, Angulara w wersji 2 i wyższej charakteryzuje silne przywiązanie do komponentów. Oznacza to, iż wszystkie elementy naszego systemu możemy opisać za pomocą komponenetów, które to dodatkowo mogą być dowolnie zagnieżdżane tworząc rozbudowane struktury. W pierwszym wpisie zaznaczyłem, iż takie podejście ma wiele zalet, przede wszystkim możliwość ponownego użycia raz stworzonych elementów.

Jaki jest więc pierwszy proces tworzenia aplikacji opartej o Angular? czy możemy od razu odpalić IDE i tworzyć kod? Nie. Warto na samym początku zastanowić się, jakie elementy systemu musimy stworzyć. Idąc tym tropem możemy przedstawić następujące komponenty

  • komponent główny aplikacji – app-root
  • komponent navbar – będzie przechowywał nawigację pomiędzy podstronami serwisu
  • komponent users, w skład tego komponentu wejdą:
    users-listlista użytkowników
    user-detail – szczegóły użytkownika
    user-form – formularz modyfikacji użytkownika
  • komponent rents, w skład którego wejdą:
    rent-list – lista wypożyczeń
    rent-detail – szczegóły wypożyczenia
    rent-form – formularz modyfikacji wypożyczalni
  • komponent products, w skład którego wejdą:
    product-list – lista produktów
    product-detail – szczególy produktu
    product-form – formularz modyfikacji produktu

Oczywiście są to komponenty najpotrzebniejsze. System można rozbudowywać o kolejne, czy to np. stopkę, czy kolejne funkcjonalności.

Ok. Mamy podstawowy schemat naszego systemu, łącznie z app-root będzie tam 14 komponentów. Czas je fizycznie stworzyć. W tym celu otwieramy konsolę i wywołujemy z głównego katalogu aplikacji:

(jest to skrót od ng generate component navbar)


Co się właśnie wydarzyło? Kolejno:

  • utworzone (create) zostały elementy naszego komponentu navbar, w tym plik css, szablon html, główny plik kontrolera i plik do obsługi testów (spec)
  • zaktualizowany (update) zostaje plik app.module.ts, a co dokładnie? Jeśli do niego zajrzymy to zobaczymy, iż w części ‘declarations’ dodany został komponent NavBar, a także zaimportowane zostały odpowiednie pliki:

Pierwszy komponent dodany, czas na resztę:

W rezultacie tych poleceń powinniśmy otrzymać taką strukturę katalogów:

Pora na kilka modyfikacji naszego kodu. Tak byśmy faktycznie mogli stwierdzić, czy nasze komponenty działają. Rozpoczynamy od modyfikacji głównego komponentu aplikacji:

  • przechodzimy do pliku app.component.html, usuwamy całą treść i dodajemy znaczniki naszych komponentów głównych (app-users, app-rents, app-products). Nasz plik będzie więc wyglądał:

  • zagłębiając się w kolejne komponenty przejdźmy do widoku komponentu users (users.component.html w katalogu users), tam dodajemy kolejne znaczniki, tym razem nasz komponent użytkowników będzie zawierał komponenty listy użytkowników:

  • finalnie przechodzimy do widoku  user-list-component.html i dodajemy znacznik odwołania do komponentu app-user-detail

Co osiągneliśmy przez wszystkie te czynności? Przede wszystkim zagnieżdziliśmy wywołania naszych poszczególnych komponentów: w komponencie głównym odwołaliśmy się do komponentu users. W nim to kolejno odwołaliśmy się do komponentu user-list. Tam to też umieściliśmy komponent user-detail. Zagnieżdżenie widać gołym okiem 🙂

Co teraz się stanie gdy uruchomimy nasz serwer? (przypominam ng serve z katalogu głównego aplikacji i localhost:4200 w przeglądarce)

Naszym oczom powinien ukazać się widok:

Analogicznie jak w przypadku users zagnieżdżamy też komponenty rent-list, rent-detail, product-list i product-detal. Czyli:

  • plik products.component.html:

  • plik product-lists.component.html

Pliki rents.component.html i rent-lists.component.html już chyba nie muszę wyjaśniać 🙂
Po dodaniu wszystkich komponentów, wywołanie naszego projektu wygląda następująco:

Pozostaje nam już tylko dodanie na samej górze komponentu navbar, czyli modyfikacja pliku app.component.html:

W efekcie aplikacja będzie wyglądała tak:


Mamy już działający szkielet naszej aplikacji. Komponenty stworzone, odpowiednio wywołane (oprócz formularzy, ale do nich dojdziemy). Na dziś praca skończona, możemy śmiało przejść do kolejnego etapu – tworzenia modeli i próby odwołania się do nich w naszych komponentach. Ale o tym już w następnym odcinku.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

This site uses Akismet to reduce spam. Learn how your comment data is processed.