console.log("연록")

[Angular] 로컬 개발환경, 워크스페이스 설정하기 본문

bone up/Angular

[Angular] 로컬 개발환경, 워크스페이스 설정하기

연 록 2022. 3. 1. 21:43
728x90

 

 

Angular 가이드

Angular 가이드

angular.kr

 

Angular 로컬 환경에 설치 전 준비하기

  • Node.js
  • npm 패키지 매니저

나는 이미 설치되어 있음

(확인 방법 : cmd 창에 node -v, npm -v 치기 -> 설치되어 있으면 버전이 나옴)

 


Angular CLI 설치하기

 

cmd에 아래 명령 실행

npm install -g @angular/cli

 

 

 

여기까지 진행사항


워크스페이스, 기본 애플리케이션 생성

 

애플리케이션은 Angular 워크스페이스 영역에서 개발

 

1. Angular CLI ng new 명령 실행 

- Angular CLI는 cmd창에서 ng 명령으로 실행 가능

- my-app을 이름으로 지정

ng new my-app

 

2. 기타 설정(내 마음대로 지정)

- Would you like to add Angular routing? y

(찾아보니 Y를 누르면 Angular의 라우터가 자동으로 프로젝트에 라우팅을 해준다고 함)

- Which stylesheet format would you like to use? CSS

(잘 모르겠어서 그냥 가장 익숙한 CSS로)

Succesfully initialized git.

성공


애플리케이션 실행하기

 

Angular CLI는 서버 기능 내장 -> 로컬 환경에서 앱을 빌드하고 서비스 할 수 있음

 

1. 워크스페이스 폴더로 이동(my-app 폴더, Change Directory)

2. ng serve 명령 실행

cd my-app
ng serve --open

cmd에 ✔️ Compiled successfully. 가 뜨고 나면 자동으로 사이트가 열림