AngularJS 2 – Routing, REST API, logowanie – Część 5

Frontend! czyli AngularJS

W piątej części zajmiemy się ostatnim etapem czyli zapisem użytkowników do bazy, formularz do logowania a po zalogowaniu wyświetlimy listę użytkowników

Do dzieła!

Zaczniemy od wyświetlenia listy użytkowników na stronie głównej.

W którymś momencie umknął nam fakt, że nie mamy usługi która zwraca listę użytkowników. Na szybko takową utworzymy. W pliku server/routes/users.ts dodajemy kod

To póki co jedyna zmiana po stronie serwera. Kolejne będziemy wprowadzać w public. Na pierwszy ogień idzie plik index.html do którego musimy dodać lib obsługujący http w Angular 2 aby działały nam zapytania do naszego API

Do pliku main.ts musimy dopisać import biblioteki Rx dostarcza nam ona takie funkcje jak map, do które będą wykorzystywane podczas obsługi odpowiedzi z API.

Kolejnym krokiem będzie utworzenie klasy naszego użytkownika. Dodajmy plik public/app/models/users.ts o treści

Obsługę API zaimplementujemy w formie serwisu który będzie mógł być wstrzykiwany do komponentów. Tworzymy plik userService.ts w public/app/

Teraz wyżej poczynione przygotowania pozwolą nam wyświetlić listę użytkowników wyciągniętych z API a nie wpisanych na sztywno. Dodatkowo chciałbym zaznaczyć, że postanowiłem zrezygnować z szablonów w plikach html i pisać je bezpośrednio w komponentach, z racji tego katalog public/app/views nie będzie nam już potrzebny. Poniżej przedstawiam nową treść pliku public/app/components/users.ts

Brawo !!! Jest coś co działa i spina razem wszystkie elementy.

Teraz znowu przejdziemy do spraw bardziej organizacyjnych i przygotowawczych. Zajmiemy się podłączeniem Routingu aby utworzyć sobie miejsce do implementacji Rejestracji oraz Logowania.

Przejdźmy do pliku index.html gdzie musimy dodać kolejną bibliotekę

oraz zmienimy nasze body

spore zmiany pojawiły się w pliku mian.ts aktualnie ma taką postać

Utworzymy dwa nowe komponenty, które będziemy rozwijać w dalszej kolejności, będą to components/login.ts i components/register.ts póki co z minimalnie wymaganą treścią

Login

Register

I ostatni wymagany komponent do działania to ten startowy, odpalany przez metodę bootstrap czyli components/app.ts

Ostatnim już krokiem jest dodanie formularzy oraz ich obsługa.
Najpierw wprowadzimy drobne poprawki po stronie serwerowej. W pliku server/app.ts

zamieniamy

na

Następną drobną poprawką jest zmiana w API do logowanie które zwraca stringa zamiast JSON’a. Przechodzimy do server/routes/users.ts gdzie zamieniamy

na

Zaktualizujemy klasę UserService aby obsługiwała dodawanie nowego usera oraz wystawioną usługę logowania.

na górze pliku dodajemy import Headers z angular2/http

Przy okazji należy pamiętać aby poprawić url w metodzie getAllUsers z ‚/users’ na ‚/api/users’
Należy utworzyć nowy komponent components/login-form.ts będzie on odpowiedzialny za obsługę formularza do logowania. Szablon html jest przykładowy, znaleziony w sieci.

Postaram się wyjaśnić poszczególne części.

ngSubmit atrybut który przyjmuje jako parametr metodę która ma zostać wywołana podczas wysłania formularza. W naszym przypadku loginUser
ngFormModel jako parametr przyjmuje instancję formularza.

ngFormControl pozwala nam określić które pole z naszej instancji formularza ma obsługiwać dany input. Dzięki temu możemy operować na obiekcie formularza w komponencie.

Tutaj mamy warunek który pokazuje komunikat gdy formularz nie przechodzi walidacji.

Wyłączamy przycisk submit gdy formularz ma błędne dane.

W konstruktorze jest tworzona instancja naszego formularza, wraz z polami, domyślną wartością i walidacją.

Metoda którą mamy ustawioną do obsługi wysyłania formularza. Widać tutaj przekazanie danych z formularza do metody loginUser w klasie UserService

Teraz wystarczy użyć nowo utworzonego komponentu w klasie LoginComponent. Przechodzimy do pliku compontents/login.ts i zmieniamy jego zawartość na

Analogicznie działa metoda do rejestracji. Tworzymy plik components/register-form.ts

oraz aktualizujemy kod w components/register.ts

Podsumowanie

Z mojego punktu widzenia TypeScript jest całkiem przyjemny w połączeniu z Angular2 który swoją drogą pozytywnie mnie zaskoczył jeśli chodzi o prostotę wykorzystanie. Jednakże nie jest łatwo znaleźć działające kawałki kodu, ponieważ miedzy alpha a beta jest bardzo duża różnica (nie są kompatybilne), nawet dokumentacja na stronie projektu potrafi wprowadzić w błąd.

Strona serwerowa tj. Node, Expres i Mongo okazała się przystępna, dokumentacja oraz informacji w sieci jest bardzo dużo więc łatwo rozwiązuje się problemy. Ja co prawda wykorzystałem również TypeScript po stronie serwerowej ale jednak po dłuższym namyśle nie jest do najlepszy pomysł na początek przygody. Można by ewentualnie zastanowić się nad CoffeeScript’em.

GitHub

https://github.com/thehardway15/MEAN.TS