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:

(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:
  
  JavaScript

  import { 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 { }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  import { 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ę:

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.