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:
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:
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:
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.
