Najbardziej wyczekiwany wpis dla osób początkujących, utworzenie pierwszej aplikacji Angular 8. Nie chciałem zaczynać od tego wpisu ponieważ uważam, że zanim zaczniemy na poważnie pracę przy użyciu tej platformy warto mieć solidne fundamenty. Niektóre z pojęć omówionych wcześniej staną się jasne. Najważniejsze, że zaczynając i tworząc swój pierwszy projekt mamy solidne podstawy.
W tym wpisie omówimy również po krótce strukturę aplikacji, zainstalujemy narzędzie Visual Studio Code i "odpalimy" nasz pierwszy projekt.
Tworzenie aplikacji
Przechodzimy od razu do konkretów – przy użyciu poniższego polecenia utworzymy pierwszą aplikację:
ng new nazwa_aplikacji
Warto jednak wcześniej utworzyć folder w którym będziemy przechowywać swoje projekty, przejść do danej lokalizacji przy użyciu konsoli i utworzyć pierwszą aplikację podając nazwę zamiast parametru "nazwa aplikacji":
Struktura folderu
Przechodząc do wcześniej utworzonego folderu możemy zobaczyć, iż nowy projekt został utworzony:
Wewnątrz utworzonego projektu możemy zobaczyć kolejne podfoldery oraz pliki. Najważniejszych z nich to src - jest to główny folder utworzonego projektu:
Równie istotny jest folder app (wewnątrz src), który zawiera pliki utworzone dla komponentów aplikacji:
Omówienie plików w folderze aplikacji Angular 8:
folder src: folder zawierający główne pliku kodu związane a aplikacją;
folder app: folder zawierający pliki utworzone dla komponentów aplikacji;
app.component.css: plik ten zawiera kod kaskadowego arkusza stylów CSS;
app.component.html: plik szablonu HTML używany przez Angular do tzw. data-binding (powiązanie danych);
app.component.spec.ts: plik testów jednostkowych aplikacji, które mogą zostać uruchomione przez Angular CLI przy pomocy polecenia ng test;
app.component.ts: najważniejszy plik TypeScript, który zawiera w sobie logikę widoku kryjącą się za komponentem – komponentami nazywamy podstawowe elementy tworzące aplikację Angular;
app.module.ts: plik TypeScript zawierający definicję wszystkich zależności dla budowanej witryny;
app-routing.module.ts - jest plikiem pozwalającym na konfigurowanie ścieżek w aplikacji. Polecaną praktyką w Angular jest konfiguracja routera w osobnym pliku, który jest następnie importowany przez moduł główny AppModule:
// Zawartość pliku app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Polecana praktyka w Angular
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Instalacja Visual Studio Code
Tak jak wspominałem już wielokrotnie – jest to moje ulubione narzędzie do tworzenia front-endu. Jest lekkie, łatwe w konfiguracji, posiada szereg wbudowanych funkcjonalności pozwalających na edycję, formatowanie czy refraktoryzację kodu. Co równie ważne – jest narzędziem darmowym. Ogromna ilość wtyczek w znaczący sposób wpływa na poprawę wydajności (ale i również łatwości pracy). Jeżeli chcesz zobaczyć z jakich wtyczek korzystam tworząc projekt w technologii Oracle JET zapraszam do jednego z poprzednich wpisów: VS Code: Popularne wtyczki.
Po ukończonej instalacji możemy wczytać nasz nowo utworzony projekt:
Uruchomienie aplikacji
Jest to ostania część tego wpisu – uruchomienie naszego pierwszego projektu. Polecenie, którego będziemy używać to:
ng serve
W tym miejscu zatrzymamy się na chwilę i spojrzymy na dwa różne sposoby uruchomienia aplikacji:
Pierwszy z nich to wykonanie polecenia przy użyciu konsoli linii poleceń. W tym celu, w pierwszym kroku przechodzimy do folderu naszego projektu a następnie wykonujemy powyższe polecenie:
Drugi sposób to użycie termiana wbudowanego w Visual Studio Code i wykonanie tego samego polecenia:
Zwróćcie uwagę na powyższy zrzut ekranu na którym możecie zobaczyć jak włączyć terminal.
W każdym z przypadków możecie zobaczyć, że serwer nasłuchuje na localhost:4200. Po uruchomienie adresu w przeglądarce możemy zobaczyć działającą aplikację:
Jeżeli chcecie przerwać "wykonywanie" projektu należy skorzystać z kombinacji klawiszy Crtl + C:
Przydatne polecenie, którego warto używać (jeżeli nie checie sami otwierać adresu na którym nasłuchuje serwer) to:
ng serve -o lub ng serve -open.
Po poprawnej kompilacji dojdzie do otwarcia nowego okna (lub zakładki) domyślnej przeglądarki w zależności od obecnego stanu.