Stworzenia nowego projektu o nazwie first-project to otwarcie terminala
i wykonanie następującego polecenia: ng new first-project
samo polecenie ng to skrót od słowa angular, jeżeli po wykonaniu tego polecenia i naciśnięciu "Enter" pojawi się poniższy komunikat:
musimy wykonać następujące polecenie: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
po wykonaniu ponownie polecenia ng new -first-project angular zada kilka pytań, na które należy odpowiedzieć następująco:
- Would you like to add Angular routing? Yes
- Which stylesheet format would you like to use? CSS
Jeżeli nie mamy zainstalowanego narzędzia kontroli wersji, pojawi się następujący komunikat:
jeżeli mamy zainstalowany git na komputerze, ale mimo wszystko chcemy stworzyć projekt bez systemu kontroli wykonujemy polecenie: ng new -first-project --skip-git
Po wygenerowaniu projektu otwieramy nasz projekt w Visual Studio Code, czyli:
File -> Open Folder...
- katalog node_modules - zawiera wszystkie pakiety
- katalog src - to nasze źródła zawierające komponenty, moduły i serwisy
- plik app.component.css zawiera arkusze stylów
- plik app.component.html zawiera szablon html
- plik app.component.ts zawiera kod TypeScript opisujący logikę widoku
- plik app.module.ts zawiera zawiera TypeScript opisujący definicje wszystkich zależności
Plik na który należy zwrócić szczególną uwagę to package.json. Zawiera on wszystkie pakiety niezbędne dla uruchomienia aplikacji. Plik ten składa się z następujących sekcji:
- dependencies - lista pakietów potrzebna do uruchomienia aplikacji, czyli jej wdrożenia
- devDependencies - lista pakietów potrzebna do tworzenia aplikacji
W celu korzystania w projekcie np. z "bootstrapa css" należy wykonać następujace kroki:
⏩ krok pierwszy- w pliku package.json dodać zależność "bootstrap" do sekcji dependencies
i wykonać polecenie "npm install", które tę zależność pobierze i umieści w katalogu node_modules
efekt tego możemy zobaczyć w katalogu node_modules\bootstrap
i to wszystko. Teraz możemy skompilować i uruchomić projekt pleceniem "ng serve", który domyślnie uruchomi się na porcie 4200. Jeżeli chcemy uruchomić projekt na innym porcie np.1000, korzystamy z polecenia "ng serve --port 1000 --open"
domyślny szablon projektu Angulara wygląda tak jak poniżej
📌warto wiedzieć, że poza npm install które ściąga dla projektu wszystkie paczki od nowa i umieszcza w katalogu node_module, jest także polecenie ng update które pozwala na aktualizację bieżącej aplikacji i wszystkich zależności, podobnie działa polecenie npm update. Z koleji npm init stworzy plik package.json, który zawiera informacje o naszym projekcie.
Uruchomienie serwera to ng serve, natomiast żeby go zatrzymać musimy skorzystać z kombinacji klawiszy [ctrl]+[c] albo [ctrl]+[shift]+[c]. Jeżeli to nie zadziała, zostaje nam jeszcze zamknięcie portu na którym chodzi serwer:
C:\>netstat -ano | findstr :4200
TCP 127.0.0.1:4200 0.0.0.0:0 LISTENING 3860
TCP 127.0.0.1:4200 127.0.0.1:54534 TIME_WAIT 0
TCP 127.0.0.1:4200 127.0.0.1:54535 TIME_WAIT 0
TCP 127.0.0.1:4200 127.0.0.1:54541 ESTABLISHED 3860
TCP 127.0.0.1:4200 127.0.0.1:54542 ESTABLISHED 3860
TCP 127.0.0.1:4200 127.0.0.1:54543 ESTABLISHED 3860
TCP 127.0.0.1:4200 127.0.0.1:54544 ESTABLISHED 3860
TCP 127.0.0.1:54541 127.0.0.1:4200 ESTABLISHED 17028
TCP 127.0.0.1:54542 127.0.0.1:4200 ESTABLISHED 17028
TCP 127.0.0.1:54543 127.0.0.1:4200 ESTABLISHED 17028
TCP 127.0.0.1:54544 127.0.0.1:4200 ESTABLISHED 17028
C:\>taskkill /PID 3860 /F
SUCCESS: The process with PID 3860 has been terminated.
Brak komentarzy:
Prześlij komentarz