Wpisy z tagiem: web

[ Moja nauka Angulara 7, wpis nr 4 – część 3/3 ]

Ten wpis należy do serii wpisów o mojej nauce Angulara 7.

Tu można zobaczyć poprzedni wpis z tej serii: [ Moja nauka Angulara 7, wpi...

Tutaj można zobaczyć wpis nr 1, w którym opisałem całość przedsięwzięcia w szczegółach: [ Moja nauka Angulara 7, wpi...

Jak zawsze, proszę o wypunktowanie wszelkich błędów oraz literówek (a także ewentualne recenzje, jakby ktoś miał ochotę). Może to być w komentarzach albo w wiadomości prywatnej. :)

Rekapitulacja już opisanej nauki

Do tej pory opisałem:

• zgodnie z planem:
  • plan mojej nauki,
  • początkową wersję listy głównych źródeł materiałów (szybko stała się nieaktualna, ale nadal można zobaczyć tę wersję tutaj);
• lekko niezgodnie z planem:
  • pierwszą część nauki podstaw podstaw;
  • drugą część nauki podstaw podstaw;
  • pierwszą część poznawania struktury początkowej aplikacji szkieletowej Angulara;
  • drugą część poznawania struktury początkowej aplikacji szkieletowej Angulara.

W tym wpisie, także lekko niezgodnie z planem, postaram się opisać trzecią i ostatnią część mojego poznawania struktury początkowej aplikacji szkieletowej (w dokumentacji: initial skeleton application) Angulara.

Plan przewidywał opisanie najważniejszych zagadnień, na jakie trafię. Jednak uznałem, że nie znając prawie w ogóle Angulara będzie trudno, i że należy jakoś zapoznać się z nim w inny sposób. Być może opis struktury początkowej aplikacji szkieletowej będzie mógł mi służyć jako wstęp do dowiedzenia się, które zagadnienia są najważniejsze.

Finalnie okazało się też, że muszę podzielić ten wpis na trzy wpisy.

W tym wpisie będę korzystać głównie z dokumentacji Angulara. W przypadkach korzystania z innych źródeł będę wzmiankować ich nazwy/linki/itp.

Struktura początkowej aplikacji szkieletowej Angulara, część 2/3

Spis treści

• Folder {nazwa projektu}/src

Folder {nazwa projektu}/src

Dotyczy: aplikacji root-level application.

Zawiera: pliki źródłowe aplikacji root-level application.

• Podfoldery (opisy w poszczególnych sekcjach poniżej):
  • app
  • assets
  • environments
• Pliki:
  • Pliki wykorzystywane, utworzone lub definiowane przez narzędzia lub projekty zewnętrzne w stosunku do Angulara:
    • browsersList – jest częścią projektu Browserslist. Zawiera konfigurację target browser i ułatwia współdzielenie tej konfiguracji między różnymi narzędziami używanymi na front-endzie (np. Autoprefixer oraz eslint-plugin-compat). Więcej informacji w dokumentacji projektu Browserslist na GitHubie.
    • tslint.json – zawiera konfigurację narzędzia TSLint dla aplikacji root-level application.
    • tsconfig.app.json – zawiera konfigurację TypeScripta dla aplikacji root-level application. Więcej informacji o konfiguracji TypeScripta w dokumentacji Angulara do niej.
    • tsconfig.spec.json – zawiera konfigurację TypeScripta dla testów aplikacji root-level application (ale jakich?). Więcej informacji o konfiguracji TypeScripta w dokumentacji Angulara do niej.
  • Pliki wykorzystywane, utworzone oraz definiowane przez Angulara oraz projekty powiązane:
    • favicon.ico – zawiera ikonę do użycia w przypadku dodania linku do tej aplikacji do zakładek.
    • karma.conf.js – używany przez narzędzie Karma (jest to test runner; narzędzie to wydaje się być powiązane z Angularem). Zawiera jego konfigurację. Więcej informacji o tym pliku w dokumentacji konfiguracji Karmy.
    • index.html – ?. Według dokumentacji Angulara jest to "the main HTML page that is served when someone visits your site." Więcej informacji o tym pliku można przeczytać w tym artykule na dev.to.
    • main.ts – ?. Według dokumentacji Angulara jest to "the main entry point for your application". Więcej informacji o tym pliku można przeczytać w jego dokumentacji na stronie Angulara oraz w tym wątku Stack Overflow.
    • polyfills.ts – zawiera tzw. polyfills używane w przeglądarkach (ale czy tylko?). Więcej informacji o polyfills w dokumentacji Angulara do nich oraz w artykule Wikipedii o nich.
    • styles.css – ?. Najprawdopodobniej ten plik odpowiada za globalne ustawienia CSS dla projektu. Nie znalazłem niestety wyraźnej informacji o nim. Więcej informacji można zobaczyć w tej, nieaktualnej już, dokumentacji tzw. "stylów globalnych" CSS Angulara na GitHubie.
    • test.ts – ?. Według dokumentacji Angulara ten plik jest "the main entry point for your unit tests, with some Angular-specific configuration".

Więcej informacji o tym folderze: dokumentacja tego folderu na stronie Angulara.

Folder {nazwa projektu}/src/app

Dotyczy: aplikacji root-level application.

Zawiera: logikę oraz dane aplikacji root-level application (ale co dokładnie?).

• Podfoldery (opisy w poszczególnych sekcjach poniżej): (brak)
• Pliki:
  • Pliki wykorzystywane, utworzone oraz definiowane przez Angulara oraz projekty powiązane:
    • app.component.css – według dokumentacji Angulara zawiera "the base CSS stylesheet for the root AppComponent" (ale co to znaczy?).
    • app.component.html – zawiera szablon HTML komponentu AppComponent, czyli tzw. komponentu głównego (w dokumentacji: root component) aplikacji root-level application.
    • app.component.spec.ts – zawiera testy (czy jeden test?) dla komponentu AppComponent.
    • app.component.ts – zawiera logikę komponentu AppComponent.
    • app.module.ts – zawiera AppModule, czyli tzw. moduł główny (w dokumentacji: root module) aplikacji root-level application. (Modułem głównym może być każdy inny moduł, jak jest opisane w tym artykule na Medium.)

Więcej informacji o tym folderze: dokumentacja tego folderu na stronie Angulara.

Folder {nazwa projektu}/src/assets

Dotyczy: aplikacji root-level application.

Zawiera: zasoby programu, takie jak obrazy; zostaną one skopiowane as-is podczas budowania aplikacji.

• Podfoldery (opisy w poszczególnych sekcjach poniżej): (brak)
• Pliki:
  • Pliki wykorzystywane, utworzone oraz definiowane przez Angulara oraz projekty powiązane:
    • .gitkeep – umieszczenie tego pliku w folderze assets jest obejściem mechanizmu Gita. Mechanizm ten to nieśledzenie pustych folderów. Umieszczenie w pustym folderze pustego pliku spowoduje, że folder ten będzie śledzony przez Gita. Może on się nazywać .gitkeep lub jakkolwiek inaczej, nie musi też być pusty. Istotna jest sama jego obecność w (uprzednio) pustym folderze. Więcej informacji w tym wątku na Stack Overflow.

Folder {nazwa projektu}/src/environments

Dotyczy: aplikacji root-level application.

Zawiera: konfiguracje budowania aplikacji root-level application dla różnych środowisk docelowych.

• Podfoldery (opisy w poszczególnych sekcjach poniżej): (brak)
• Pliki:
  • Pliki wykorzystywane, utworzone oraz definiowane przez Angulara oraz projekty powiązane:
    • environment.prod.ts – zawiera konfigurację budowania dla środowiska prod (skrót od ang. production).
    • environment.ts – zawiera konfigurację budowania dla nienazwanego środowiska tzw. standard development environment.

Rekapitulacja

W tym wpisie przedstawiłem trzecią i ostatnią część mojego poznawania struktury początkowej aplikacji szkieletowej Angulara. Opisałem w nim folder {nazwa projektu}/src.

Dla porządku: wpis jest niezgodny z planem przedstawionym we wpisie nr 1. Plan w ogóle nie przewidywał tego wpisu.

Do zobaczenia!

#angular #framework #oprogramowanie #web #moja-nauka-angulara