Jak skonfigurować Angular w kodzie VS [Przewodnik]

Angular to framework aplikacji internetowych typu open source, który wykorzystuje JavaScript. W przeciwieństwie do niektórych innych frameworków lub języków programowania, aby ten framework działał, musisz skonfigurować zmienną środowiskową w systemie Windows. Dlatego musimy nauczyć się konfigurować Angulara w VS Code i napisać kod demonstracyjny, to właśnie zrobimy.

Jak skonfigurować Angulara w VS Code

Aby skonfigurować Angular w VS Code na komputerze z systemem Windows, wykonaj kroki wymienione poniżej.

1. Zainstaluj kod programu Visual Studio
2. Skonfiguruj NodeJS
3. Skonfiguruj zmienną środowiskową
4. Zainstaluj Angulara

Porozmawiajmy o nich szczegółowo.

1] Zainstaluj kod Visual Studio

Aby rozpocząć naszą przygodę z kodowaniem w świecie Angular, musimy zainstalować Visual Studio Code. Aby zrobić to samo, przejdź do code.visualstudio.com i pobierz aplikację dla swojego środowiska. Po pobraniu przejdź do folderu Pobierz, uruchom nośnik instalacyjny i zainstaluj aplikację.

2] Skonfiguruj NodeJS

Należy pamiętać, że chociaż do edycji Angulara można używać VSCode, nie można go uruchomić bezpośrednio w edytorze. Angular jest w rzeczywistości wykonywany w NodeJS, czyli środowisku JavaScript będącym częścią lokalnej konfiguracji tworzenia stron internetowych. Dzięki NodeJS możesz uruchomić Angular na lokalnym hoście w przeglądarce internetowej. Za każdym razem, gdy wprowadzasz zmiany w kodzie Angular w VSCode, zostanie on automatycznie przeładowany w przeglądarce, co jest znane jako „przeładowanie na gorąco”. Ponieważ jednak Angular działa w NodeJS, musisz najpierw zainstalować NodeJS. Możesz to zrobić, przechodząc do nodejs.org .

Instalując Node JS do uruchomienia Angulara, wybierz lokalizację łatwą do zapamiętania, na przykład prostą i krótką ścieżkę. Będzie to pomocne, jeśli będziesz musiał później używać NodeJS. Zatem zamiast instalować aplikację w Plikach programów, zainstaluj ją w D:\NodeJS, aczkolwiek nie ma to znaczenia.

3] Skonfiguruj zmienną środowiskową

Następnie musimy skonfigurować zmienną środowiskową dla NodeJ, zanim przystąpimy do instalacji Angulara. Aby zrobić to samo, wykonaj następujące kroki.

• Naciśnij Win + S, wpisz „Zmienna środowiskowa”, a następnie otwórz ją.
• Po zakończeniu musisz skopiować lokalizację NodeJS. Dla porównania, nasz to D:\NodeJS.
• Kliknij opcję Zmienna środowiskowa.
• Teraz wybierz Ścieżkę w sekcji Zmienna systemowa i kliknij Edytuj.
• Kliknij Nowy, wklej lokalizację i kliknij OK.

W ten sposób wprowadziłeś zmienną środowiskową NodeJS. Aby sprawdzić, czy działa, otwórz Wiersz Poleceń, a następnie uruchom node –version. Jeśli poda ci wersję, możemy zainstalować Angular.

4] Zainstaluj Angulara

Po stworzeniu odpowiedniego środowiska poprzez instalację NodeJS przystąpimy do instalacji Angulara. Aby zrobić to samo, wykonaj czynności wymienione poniżej.

• Otwórz kod programu Visual Studio.
• Przejdź do lokalizacji, w której chcesz utworzyć plik Angular, używając polecenia CD lub Zmień katalog. Utworzyliśmy nowy katalog na dysku D, aby utworzyć projekt, sprawdź załączony zrzut ekranu.

• Aby zainstalować angular w folderze, musimy uruchomić następujące polecenie.npm install -g @angular/cli
• Następnie uruchom następujące polecenie, aby utworzyć nowy projekt.ng new foldername
• Teraz wejdź do tego folderu, używając „cd foldername” i uruchom serwer za pomocą ngserver.

Mamy nadzieję, że teraz możesz uruchomić Angulara bez żadnych problemów.

To polecenie nie jest dostępne podczas uruchamiania Angular CLI poza obszarem roboczym

Kiedy uruchomiłem polecenie „ngserver”, wystąpił błąd informujący, że polecenie jest niedostępne. Wiele osób podejrzewa, że ​​Angular nie jest zainstalowany w ich systemie, podczas gdy w rzeczywistości jedynym problemem jest to, że nie znajdujesz się we właściwym katalogu. Aby rozwiązać ten problem, po prostu wykonaj polecenie „cd” do katalogu, w którym znajduje się projekt, a nie do lokalizacji głównej, ale do rzeczywistej lokalizacji projektu. Tak więc na początku, kiedy uruchomiłem polecenie, byłem w AngularProject, który jest moim folderem głównym, więc to nie zadziałało. Jednak zadziałało bezproblemowo, gdy zmieniłem katalog na sampleFolder i uruchomiłem to samo polecenie.

Zalecanym rozwiązaniem jest otwarcie Eksploratora plików, przejście do lokalizacji, w której przechowywany jest projekt, kliknięcie prawym przyciskiem myszy pustego ekranu i wybranie Terminal > Wiersz poleceń. A potem biegnij i serwuj.

Jak skonfigurować projekt Angular w kodzie Visual Studio?

Aby skonfigurować projekt Angular, musisz najpierw zainstalować NodeJS na swoim komputerze. Po zakończeniu musisz skonfigurować zmienną środowiskową i zainstalować Angulara za pomocą polecenia npm install -g @angular/cli . Teraz śmiało utwórz nowy katalog za pomocą polecenia ng new foldername. Aby dowiedzieć się więcej, sprawdź kroki wymienione wcześniej.

Jak wygenerować Angular VSCode?

Angular File Generator to przydatne rozszerzenie dla Visual Studio Code, które umożliwia tworzenie plików Angular za pomocą zaledwie kilku kliknięć. Jest zbudowany na Angular CLI i wykorzystuje te same schematy co CLI. Dodatkowo zapewnia opcję generowania plików bezpośrednio z terminala.