[angular] 앵귤러 간단한 프로젝트 console에서 테스트

angularjs가 버전이 높아지면서 기능 및 사용법이 많이 변경이 되었습니다.

초창기에는 그저 jQuery 비스무리 하구만 했는데 이제는 “이걸 어떻게 배우지?”

할정도로 강력한 개발 도구가 되었습니다.

 

1. node.js 설치

angular는 npm을 이용하여 설치 합니다.

그런데 npm은 node.js에 포함되어 있어 node.js를 설치할 때 같이 설치가 됩니다.

node.js가 설치되지 않았다면 먼저 node.js를 다운받아 설치 합니다.

 

https://nodejs.org/ko/

설치 방법은 다운받은 파일을 그냥 단순하게 next만 클릭 해주면 됩니다.

설치 참조 : node.js 다운로드 및 설치하기

설치된 디렉토리 구조를 볼까요?

잘 설치가 되었있군요.

 

2. angular-CLI 설치

이제 Angular CLI를 설치하겠습니다.

 

windows console창을 하나 열고 설치 명령어를 입력 합니다.

 

npm install -g @angular/cli

 

 

angular/cli@7.0.4 버전이 설치되었습니다.

설치가 잘 되었는지 확인해 봅니다.

angular를 설치하면 같이 설치되는 모듈들의 리스트도 있습니다.

ng –version

잘 설치 된 것 같습니다.

 

이렇게 하면 angular의 설치는 완료된 것 입니다.

3. angular 프로젝트 생성

이제 프로젝트를 생성하고 개발을 시작 하면 됩니다.

myNgProject 라는 이름으로 프로젝트를 생성 하겠습니다.

프로젝트 생성 명령어를 입력 합니다.

 

ng new myNgProject

angular에 routing을 추가하는지와 css를 어떤것으로 할것인지 선택을 합니다.

키보드 위,아래 화살표 이동키로 움직이면 한칸씩 이동합니다.

저는 그냥 익숙한 CSS로 style을 작업하는 것으로 했습니다.

주르륵 프로젝트 관련 디렉토리와 파일들이 생성 됩니다.

파일 구조를 볼까요.

이제 생성된 프로젝트를 실행해 보겠습니다.

 

먼저 프로젝트 디렉토리로 이동을 합니다.

 

그리고 프로젝트를 실행 합니다.

 

ng serve

서버가 실행하면서 4200 port로 대기하고 있다는군요.

브라우저를 하나 열고 접속을 해봅니다.

 

http://localhost:4200

기본적인 테스트는 잘 되는군요.

- copy coding -