Angular · BoardGamesNook · C# · Daj Się Poznać 2017 · Programowanie · TypeScript

CRUD w Angularze

Moja aplikacja BoardGamesNook jest napisana w C#, korzysta ze wzorca MVC i wykorzystuje framework Angular. Oznacza to, że jest rozdzielona na stronę backendową (logika biznesowa w C#) i frontendową (odpowiedzialną za wyświetlanie danych użytkownikowi). Poniżej widać drzewo solucji głównego projektu. Folder src zawiera pliki typescryptowe do obsługi żądań i htmlowe do wyświetlania danych.

solutionmvc.PNG solution

Utworzony w backendzie przykładowy model Gamer

gamer

ma swoje odzwierciedlenie w części związanej z frontendem

aGamer

Póki co obydwa modele się pokrywają, ale docelowo będą się różnić (np. użytkownik nie będzie musiał znać informacji o dacie utworzenia i edycji gracza).

W części backendowej istnieje GamerController, który zawiera 5 metod: Get(), GetAll(), Add(), Edit() i Delete() odpowiedzialne kolejno za zwrócenie informacji o graczu, o liście graczy, a także do dodawania, edycji i usuwania gracza.

GamerControllerP1

GamerControllerP2

Po kliknięciu na odpowiedni przycisk na stronie, wywołuje się odpowiednia metoda z pliku komponentu i odpowiednio zserializowany obiekt lub jego propercje zostają wysłana metodą GET lub POST do kontrolera. Na przykład po kliknięciu ostatniego przycisku z napisem Save wywoła się metoda save() z pliku gamer-detail.component.ts

gamerdetail.PNG

component

W metodzie save() widzimy, że zostaje wywołana metoda update() z gamerService:

service.PNG

W metodzie tej wysyłamy w części body zserializowany obiekt gamer żadanie POST przez url „Gamer/Edit”, więc (zgodnie z routingiem) do metody Edit kontrolera Gamer.

edit

Sami widzicie, że połączenie Angulara z MVC nie jest wcale aż tak trudne.

Dalsze plany to utworzenie obiektu Game i połączenie go z obiektem Gamer.

3 thoughts on “CRUD w Angularze

  1. Ciekawi mnie czy są już jakieś eleganckie sposoby, żeby współdzielić taki prosty (pod względem typów) model jak Twój „Gamer” między front-endem i back-endem. Pozwoliłoby to uniknąć definiowania go w dwóch miejscach („Don’t Repeat Yourself”). A może taki coupling front-endu i back-endu jest niepożądany? Muszę poszperać w internetach zanim zacznę klepać we własnym Angularze 🙂

    Polubienie

    1. Niestety nie wiem nic o eleganckich sposobach – jeśli jakieś poznasz, to się koniecznie podziel:) Tak jak pisałam – prawdopodobnie będę traktować model w Angularze jak taki ViewModel z danymi przydatnymi tylko dla użytkownika.

      Polubienie

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s