Omówienie projektu W tym projekcie utworzymy od podstaw aplikację w Angularze przy użyciu interfejsu CLI. Następnie wejdziemy w interakcje z podstawowymi funkcjami frameworka Angular i dokonamy w aplikacji drobnej zmiany. Na koniec nauczysz się budować i udostępniać aplikację przy użyciu rozszerzenia Nx Console.
Czas budowania: 15 minut. Rozpoczęcie pracy Do wykonania tego projektu potrzebne będą następujące programy:
1. Git — darmowy rozproszony system kontroli wersji o otwartym kodzie źródłowym. Można go pobrać ze strony https://git-scm.com.
2. VS Code — edytor kodu źródłowego dostępny pod adresem https://code.visualstudio.com.
3. Angular CLI — interfejs wiersza poleceń Angulara przedstawiłem w podrozdziale „Podstawowe koncepcje i kontekst”.
4. Pliki przykładów — przykłady kodu z tego rozdziału można znaleźć w katalogu r01 w archiwum dostępnym pod adresem https://ftp.helion.pl/przyklady/angdz3.zip. Tworzenie pierwszej aplikacji w Angularze Aby utworzyć w Angularze całkiem nową aplikację, musimy wydać polecenie interfejsu CLI ng new i podać w opcji nazwę aplikacji:
ng new my-app
Polecenie ng new służy do tworzenia nowej aplikacji lub obszaru roboczego Angulara. Obszar roboczy to projekt Angular CLI zawierający jedną lub kilka aplikacji, przy czym niektóre z nich mogą być bibliotekami. Za pomocą polecenia ng new utworzymy więc domyślnie obszar roboczy Angulara z jedną aplikacją.
W powyższym poleceniu nazwa aplikacji Angulara to my-app. Po jego wydaniu CLI Angulara zada nam kilka pytań, aby zebrać jak najwięcej informacji o tym, jakiego rodzaju aplikację chcemy utworzyć:
1. Na początku pojawi się pytanie o to, czy chcemy włączyć analizy Angulara:
Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.io/analytics. (y/N)
CLI Angulara zadaje to pytanie tylko raz, podczas tworzenia pierwszego projektu, i stosuje to ustawienie w całym systemie. Możemy je jednak zmienić w poszczególnych obszarach roboczych Angulara.
2. Następnie pojawi się pytanie o to, czy chcemy włączyć w aplikacji routing:
Would you like to add Angular routing? (y/N)
Chodzi tu o nawigowanie pomiędzy komponentami aplikacji przy użyciu adresu URL. Routing w tym projekcie nie jest nam potrzebny, naciśnij więc klawisz Enter, aby zaakceptować domyślną wartość tego ustawienia.
3. Potem CLI Angulara poprosi o wybranie formatu arkusza stylów, z którego będziemy korzystać w aplikacji:
Which stylesheet format would you like to use? (Use arrow keys)
Wybierz jeden format arkuszy stylów z listy i naciśnij klawisz Enter.
📘 NOWOŚĆ 🆕
🟥 Angular. Dziesięć praktycznych aplikacji internetowych z wykorzystaniem najnowszych rozwiązań technologicznych. Wydanie III 🟥 Angular umożliwia tworzenie aplikacji działających na wielu platformach, w sieci WWW, na komputerach i urządzeniach mobilnych. Co więcej, pozwala na użycie języka TypeScript, który lepiej niż JavaScript nadaje się do programowania profesjonalnych aplikacji internetowych. Angular zapewnia również możliwość korzystania z wielu nowoczesnych bibliotek.
Dzięki temu praktycznemu przewodnikowi sprawdzisz, jak działa Angular podczas tworzenia dziesięciu zróżnicowanych funkcjonalnych aplikacji internetowych! 🌐
Nauczysz się też integrować go z różnymi bibliotekami i narzędziami, takimi jak Angular Router, Scully, Electron, wątki robocze usług Angulara czy narzędzia Nx do zarządzania repozytoriami monolitycznymi. Poszczególnych technologii użyjesz do tworzenia ciekawych projektów: aplikacji pogodowej w technice PWA, mobilnej aplikacji do geotagowania zdjęć, biblioteki komponentów interfejsu użytkownika i innych. Dowiesz się też, jak dostosować interfejs CLI Angulara do swoich potrzeb 💪
Podobne tytuły, które mogą Cię zainteresować 💻👇
| Sprawdź naszą nową aplikację | |
