Od dwóch tygodni nie pojawił się żaden post związany z projektem Krauza. Na ten stan rzeczy składają się dwa powody: tydzień temu brałem udział w międzynarodowym hackathonie organizowanym przez bank ING (24hCodING), po którym potrzebowałem trochę czasu na regenerację, a poza tym w ostatnim czasie w projekcie nie działo się nic nadzwyczajnego i odkrywczego. Skupiłem się na dokończeniu komunikacji z bazą danych i API, jedyną ciekawą rzeczą, która pojawiła się w projekcie są migracje bazodanowe z wykorzystaniem narzędzia Phinx, jednak @adrianpietka już rozpisał się na ten temat więc zapraszam do jego posta.
Po uprzątnięciu warstwy backendowej przyszła pora na frontend i to dzisiaj chciałbym opisać, bo wspominałem już wcześniej, że chciałbym na front wrzucić najnowszego Angulara żeby poznać coś świeżego i nowego. Na razie ta część projektu jest na bardzo podstawowym poziomie, jednak jest już co opisać :smiley:. Już kiedyś pojawił się tutaj post z podstawowymi informacjami o tym frameworku świeżo po szkoleniu, ale dopiero teraz mogę zacząć pisać konkrety na przykładzie prawdziwego użycia w projekcie.
Angular CLI
Na wzór innych popularnych frameworków Angular wprowadził narzędzie Angular CLI, które znacząco przyspiesza pracę podczas developmentu. Myślę, że narzędzie będzie potrzebne każdemu początkującemu w tym frameworku bo dzięki niemu szybko utworzymy sam projekt jak i wszystkie elementy (komponenty, moduły , dyrektywy itp), ale oprócz tego dostępnych jest sporo innych udogodnień, jak np. wbudowany webserver, który jest automatycznie przeładowywany, a całość jest prekompilowana podczas każdej zmiany w kodzie.
Jedynie co trzeba zrobić to zainstalować globalnie node package.
$ npm install -g @angular/cli
Po zainstalowaniu warto zobaczyć jakie daje nam możliwości to narzędzie wyświetlając pomoc.
$ ng help ng build <options...> Builds your app and places it into the output path (dist/ by default). ng completion <options...> Adds autocomplete functionality to `ng` commands and subcommands. ng doc <keyword> Opens the official Angular documentation for a given keyword. ng e2e <options...> Run e2e tests in existing project. ng eject <options...> Ejects your app and output the proper webpack configuration and scripts. ng generate <blueprint> <options...> Generates and/or modifies files based on a blueprint. ng get <options...> Get a value from the configuration. Example: ng get [key] ng help <command-name (Default: all)> Shows help for the CLI. ng lint <options...> Lints code in existing project. ng new <options...> Creates a new directory and a new Angular app eg. "ng new [name]". ng serve <options...> Builds and serves your app, rebuilding on file changes. ng set <options...> Set a value in the configuration. ng test <options...> Run unit tests in existing project. ng version <options...> Outputs Angular CLI version. ng xi18n <options...> Extracts i18n messages from source code.
Utworzenie projektu jest ekspresowe
Po zainstalowaniu Angular CLI jesteś gotowy aby utworzyć pierwszy projekt. W konsoli wpisz poniższe polecenia:
$ ng new PROJECT-NAME $ cd PROJECT-NAME $ ng serve --open
Poczekaj chwilę, aż wszystko się pobierze i przekompiluje… Ok, aplikacja już widoczna w Twojej przeglądarce? Wow, to działa! Cały niezbędny zestaw do developmentu już ogarnięty i nie potrzebujesz instalować żadnych gruntów, gulpów czy webpacków, nie musisz konfigurować żadnych zadań w tych task runnerach bo te które są Ci potrzebne na teraz już są dla Ciebie skonfigurowane i wątpię czy będa Ci na razie potrzebne jakieś inne bajery.
Pierwsze komponenty
Lecimy dalej! Stwórzmy pierwsze komponenty np. header, footer, nawigacja i stronę startową.
Footer i header
W konsoli wpisz polecenia niezbędne do utworzenia nowych komponentów.
$ ng generate component header $ ng generate component footer
Powinny zostać dodane nowe foldery footer
i header
w katalogu src/app
, w których dostępny jest plik html, css oraz dwa pliki w formacie TypeScript komponentu i testów. Na tę chwilę wystarczy wypełnić pliki html jakąś zawartością i w miarę potrzeb dodać jakieś style. Teraz aby nasze komponenty zostały wyświetlone w odpowiednim miejscu na stronie trzeba je dodać do pliku html głównego komponentu aplikacji (src/app/app.component.html
).
<app-header></app-header> <app-footer></app-footer>
Nawigacja
Stwórzmy prostą nawigację aby przechodzić między stronami. W moim wypadku nawigacja jest częścią headera, więc dodam ją jako podkomponent komponentu header.
$ ng generate component navigation
Plik html (src/app/header/navigation/navigation.component.html
) wypełniamy odnośnikami do podstron…
<div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="/">Home</a></li> <li><a href="/boxes">Boxes</a></li> </ul> </div>
Następnym krokiem jest routing, otwieramy główny plik modułu (src/app/app.module.ts
) i tam trzeba zadeklarować odpowiednie ścieżki. Poniżej wklejam kod, który należy dodać oprócz tego, który już tam istnieje.
import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: '', component: HomePageComponent }, { path: 'boxes', component: BoxesComponent }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ] })
Wypadałoby jeszcze wyznaczyć miejsce, gdzie poszczególne strony powinny się wyświetlać. Do pliku HTML, należy wrzucić <router-outlet></router-outlet>
, czyli w wypadku poprzedniego przykładu z headerem i footerem, może wyglądać to następująco.
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
Uzupłenienie brakujących komponentów
Dodaliśmy trzy odnośniki do komponentów, które jeszcze nie istnieją, więc wypadałoby je utworzyć.
$ ng generate component HomePage $ ng generate component Boxes $ ng generate component PageNotFound
Teraz można zobaczyć stronę w przeglądarce i przechodzić między stroną Home i Boxes. Kiedy w adresie pojawi się nieznany URL to zostanie wyświetlona strona PageNotFound.
Podsumowanie
Rozstawienie projektu z Agularem jest ekspresowe i przyjemne, na razie jestem bardzo zadowolony. Jestem ciekaw jak potoczy się dalsza praca z tym frameworkiem. Obawiam się trochę zbyt dużych przywiązań i przyzwyczajeń do 1 wersji, jednak zobaczymy. Mam nadzieję, że będę mógł jeszcze napisać posta równie entuzjastycznego po dłuższej pracy z Angularem :smiley: