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-list – lista 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:
1 |
ng g c navbar |
(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:
123456789101112131415161718import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NavbarComponent } from './navbar/navbar.component';@NgModule({declarations: [AppComponent,NavbarComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }
Pierwszy komponent dodany, czas na resztę:
1 |
ng g c users |
1 |
ng g c users/user-list |
1 |
ng g c users/user-detail |
1 |
ng g c users/user-form |
1 |
ng g c rents |
1 |
ng g c rents/rent-list |
1 |
ng g c rents/rent-detail |
1 |
ng g c rents/rent-form |
1 |
ng g c products |
1 |
ng g c products/product-list |
1 |
ng g c products/product-detail |
1 |
ng g c rents/rent-form |
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.