Wprowadzenie

W poprzednim wpisie utworzyliśmy domyślną aplikację korzystając z polecenia ng new nazwa_aplikacji. Nie wprowadzaliśmy żadnych zmian, nie zastanawialiśmy się jak wygląda proces ładowowania aplikacji.

Tym razem zaczniemy powoli modyfikować domyślny projekt celem zrozumienia jak dokładnie działa aplikacja.

Zaczniemy od prostej czynności jaką jest usunięcie zawartości pliku app.compoment.html - w tym miejscu wpiszemy swoją linię kodu HTML: Edycja komponentu aplikacji Angular 8 Zwróćcie uwagę, że po zapisaniu zmian dojdzie do automatycznego odświeżenia strony wyświetlanej w przeglądarce – wspominałem o tym w serii wprowadzającej do programiania w Angularze.

Równie istotny jest adres URL otwartej witryny: Domyślna aplikacja Angular 8 Jak widzicie nie ma żadnej informacji o pliku app.component.html w którym wprowadziliśmy zmiany – a jednak całość wyświetla się poprawnie. Głównym plikiem naszej witryny jest index.html. Angular pozwala na tworzenie Single Page Application, gdzie index.html jest pojedynczą stroną, która jest dostarczona przez serwer.

Zobaczymy jak wygląda wspomniany wcześniej plik:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MyFirstApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>
</html>
Powyższy kod wygląda jak zwykły HTML a znacznik title wyświetla tytuł aplikacji w zakładce przeglądarki. Różnice możemy jednak dostrzec w znaczniku body. Zawiera on w sobie app-root dostarczony przez CLI. Jest to domyślne zachowanie Angulara - wraz z momentem tworzenia aplikacji przy użyciu CLI dodawany jest domyślnie jeden komponent zwany: app component.

Aby uświadomić sobie działanie aplikacji musimy przejść do pliku TypeScript, tj. app.component.ts. Zwróćcie uwagę na właściwość selector: Angular 8: plik app.component.ts Zawiera wartość tekstową odpowiadającą znacznikowi zawartemu w pliku index.html. Angular wymaga tej informacji w celu wstrzyknięcia odpowiedniego szablonu komponentu do pliku głównego index.html.

W powyższym przykładzie jest to app.component.html.

Jak uruchamia się Angular?

Każde wywołanie komendy ng-serve buduje aplikację – powoduje to utworzenie „pakietów" i automatyczne dodanie ich do pliku index.html w czasie wykonywania. Pierwszym z tych „pakietów", który musi zostać wykonany jest kod znajdujący się wewnątrz pliku main.ts. Jest to główny plik od którego rozpoczyna się uruchamianie aplikacji Angular: Angular 8: plik main.ts

Metoda ładowania początkowego uruchamia aplikację Angular. Odnosi się ona do AppModule, która (jak możecie zobaczyć w linii 4 powyższego kodu), przeszukuje folder app w poszukiwaniu pliku app.module - jest to definicja wszystkich składników aplikacji: Angular 8: plik app.module.ts

Podsumowanie

W tym wpisie prześledziliśmy sposób ładowania aplikacji Angular. Wiem, połączenia pomiędzy plikami mogą wydawać się skomplikowane. Dodatkowo weszliśmy w nieznany dla nas świat TypeScript. Nie warto jednak się zniechęcać – idziemy dalej

Przypomnienie całego wpisu: ng serve -> main.ts -> app.module.ts -> app.component.ts -> index.html-> app.component.html

W następnym wpisie nieco poeksperymentujemy – przeorganizujemy strukturę projektu dodając folder oraz podfoldery dla komponentów oraz dodamy całkowicie nowy komponent, który wyświetlimy na stronie głównej naszego projektu – nic skomplikowanego, czysty HTML celem utrwalenia wiedzy zdobytej w tym wpisie.