AngularJS – uruchomienie podstawowej wersji – Część 4

Frontend! czyli AngularJS

W czwartej części dorzucimy trochę frontendu. Podłączymy Angulara 2 oraz prosty template z użyciem Bootstrap’a

Do dzieła!

Zaczniemy od zrobienia małej reorganizacji projektu. Wyniknęła ona z problemów przy kompilowaniu TS do JS ponieważ po stronie serwera używamy RequireJS do ładowania modułów a po stronie klienta SystemJS.

W pierwszej kolejności zadbajmy o to aby struktura aplikacji wyglądała tak jak poniżej

Teraz zainstalujemy bowera do zarządzania zależnościami po stronie klienta.

Uruchamiamy poniższe polecenie

co utworzy nam plik bower.json, kreator zada nam kilka pytań. Wybieramy domyślne wartości, przy pytaniu o

wybieramy es6

Następnie w katalogu aplikacji tzn. na tym samym poziomie co utworzyliśmy plik bower.json tworzymy plik .bowerrc o treści

co sprawi, że wszystkie instalowane przez bowera biblioteki będą lądowały w podanej lokalizacji.

następnie uruchamiamy polecenie które pobierze nam Bootsrrapa od Twittera

W pliku bin/www musimy odnaleźć linijkę

i zamienić na

wynika to z reorganizacji kodu.

Kolejny na celownik bierzemy sobie package.json i upewniamy się, że sekcja dependencies wygląda jak poniżej. Niestety Angulara 2 jeszcze nie ma w Bowerze dlatego instalujemy go przez npm’a a następnie przy pomocy Gulpa przeniesiemy sobie potrzebne rzeczy.

Skoro jesteśmy przy Gulpie to wprowadzimy tam drobne zmiany, teraz wygląda on tak:

Dockerfile również doczekał się drobnych poprawek

W katalogu server znajduje się plik tsconfig.json o treści

Ostatnim krokiem przed przejściem do pracy nad stroną Frontendową będzie zmiana w pliku server/routes/index.ts aby strona główna nie zwracała listy użytkowników a plik html.

Przejdźmy teraz to etapu gdzie podłączymy jakiegoś Angulara.
Wszystkie następne operacje będziemy wykonywać w katalogu app/public
Docelowo do pierwszego uruchomienia uzyskamy następujący rezultat

Plik index.html ma mieć następującą postać

tworzomy katalog app i umieszczamy plik tsconfig.json o treści

następnym plikiem będzie główny plik naszej aplikacji frontendowej czyli main.ts

Utworzymy teraz komponent który podmieni nasz tag na listę użytkowników.
Tworzymy katalog components a w nim plik users.ts

Następny będzie katalog z szablonami. Tworzmy views i wewnątrz plik users_list.html

Przejdziemy do uruchomienia aplikacji. Na początek wróćmy do katalogu głównego naszej aplikacji i wykonajmy poniższe instrukcje:

Po przejściu na stronę aplikacji ukaże nam się taki o to widok

Zrzut ekranu 2016-02-11 o 23.18.10

Na tym zakończymy ten wpis. W kolejnym zepniemy frontend i backend razem, tzn. sprawimy, że aplikacja Angular’owa będzie korzystała za API wystawionego przez ExpressJS.

GitHub

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