Paweł Łukasiewicz
2019-12-16
Paweł Łukasiewicz
2019-12-16
Udostępnij Udostępnij Kontakt
Wprowadzenie

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": Angular 8: tworzenie nowej aplikacji

Struktura folderu

Przechodząc do wcześniej utworzonego folderu możemy zobaczyć, iż nowy projekt został utworzony: Angular 8: utworzenie nowego projektu

Wewnątrz utworzonego projektu możemy zobaczyć kolejne podfoldery oraz pliki. Najważniejszych z nich to src - jest to główny folder utworzonego projektu: Angular 8: struktura folderu

Równie istotny jest folder app (wewnątrz src), który zawiera pliki utworzone dla komponentów aplikacji: Angular 8: pliki wewnątrz folderu app


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.

Narzędzie można pobrać stąd: https://code.visualstudio.com

Po ukończonej instalacji możemy wczytać nasz nowo utworzony projekt: Visual Studio Code

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: ng serve - konsola linii poleceń
  • Drugi sposób to użycie termiana wbudowanego w Visual Studio Code i wykonanie tego samego polecenia: ng serve - visual studio code 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ę: Angular 8: pierwsza aplikacja

Jeżeli chcecie przerwać "wykonywanie" projektu należy skorzystać z kombinacji klawiszy Crtl + C: Angular 8: ng stop

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.