IntelliJ에서 Angular2 사용하기 with Angular CLI

주변에 보면 Angular 를 하고는 싶으나 진입이 어렵다고들 하십니다.

타입스크립트 ES6 등등 처음 접해보는 개념들과 용어들, 그리고 처음에 뭔가 셋팅이 많이 필요해서 일지도 모릅니다.

 

(보통 AngularJS 1.x 는 AngularJS로 Angular2.x이후는 Angular로 불립니다.)

 

Angular-CLI 를 이용하면 Angular2 프로젝트 초기 셋팅에 들어가는 수고를 덜 수 있습니다.

따라서 처음에는 Angular CLI 로 시작해보시길 권장합니다

https://github.com/angular/angular-cli

 

 

 

 

---

---

 

1. NPM을 이용해서 angular-cli 를 설치

npm install -g angular-cli

 

*npm 이 없으시다면, NODE js를 설치하세요

 

2. Angular 프로젝트 생성

ng new {PROJECT_NAME}

 

3. Angular 프로젝트 실행

cd {PROJECT_NAME}  ng serve

 

이제 브라우저에서 http://localhost:4200/ 으로 접속해보시면 app Works! 메세지를 보실 수 있을 겁니다.

 

 

 

 

 

 

 

 

 

---

---

 

콘솔에 익숙하지 않으신분들 위해 IntellJ 를 이용하여 Angular CLI를 사용해보겠습니다.

JetBrains에서는 아래와 같이 안내를 해주고 있습니다.

 

https://www.jetbrains.com/help/idea/2016.3/using-angular-cli.html

 

 

(사전작업) Plugins 에서 AngularJS와 NodeJS를 설치합니다. 

로컬에 node가 없으신분은 최신버젼 Node JS도 설치해줍니다. ( https://nodejs.org/ko )

 

 

 

1. Languages & Frameworks > Node.js and NPM 에서 angular-cli 를 설치합니다.

(+ 를 클릭해서 angular-cli 검색한 뒤 Install Package 로 설치합니다.)

 

 

 

2. 이제 New > Project 로 angular-cli 프로젝트를 생성합니다.

 

 

 

필요 모듈 다운로드 및 설정중

 

 

새 프로젝트 설정 완료

 

 

 

3. 신규 생성된 Angular 프로젝트를 실행해보겠습니다.

하단의 npm탭을 클릭한 뒤 start에서 Run 'start' 실행합니다

 

 

끝났습니다~!

브라우저에서 http://localhost:4200 으로 접속해봅니다.

 

 

 

 

 

 

 

 

 

---

---

 

추가로 Intellij와 NetBeans에서 Angular2 사용 비교 포스팅 링크 첨부합니다.

 

https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html#intellij