Angular2 | Angular 설정 | Angular CLI로 설치


Angular를 이용하려면 몇 가지 방법이 있다. 다만, 누군가 바로 생각할 수 있는 것이 “파일을 다운로드하여 프로젝트에 복사한다"라고 하는 방법일 것이다. 그러나 유감스럽게도 현재 시점에는 준비되어 있지 않다. Angular 사이트에서 파일 다운로드를 하지 않는다.

다음 생각나는 것이라면 npm을 이용하는 방법이다. 명령 프롬프트 또는 터미널에서 Web 응용 프로그램 디렉토리로 이동하여 아래와 같이 실행을 하게 되면 설치가 된다.

$ npm install angular2

아래는 실행 결과이다.

npm WARN deprecated angular2@2.0.0-beta.21: This version of Angular has been
... 생략 ...
npm WARN Angular2 No license field.

+ angular2@2.0.0-beta.21
added 1 package in 6.706s

그러나 현재점(2017년 12월)에서 npm install angular2에 설치되는 것은 베타이며, 이후에 RC 버전은 준비되어 있지 않은 것 같다. (npm install angular는? 라고 생각한 사람이 있을 수 있는데, 그렇게 하면 이전 1.x가 설치되어 버린다)

그럼 어떻게 하는 것이 좋은가. 아마도 가장 좋은 방법은 Angular CLI를 이용하는 방법이다. 이 방법은 Angular를 이용하기 위한 전용 도구로 아래의 URL에 공개되어 있다.

https://cli.angular.io/

그런데, 이 사이트에서 파일을 다운로드하는 것은 아니다. 여기에서는 사용법 등의 문서가 있다. 설치는 npm을 사용한다. 명령 프롬프트이나 터미널을 시작하여 아래와 같이 실행한다.

$ npm install -g @angular/cli

이것으로 Angular CLI가 설치된다.

혹시 설치중에 권한 관련 문제가 생기면 아래 링크로 해결하길 바란다.

https://docs.npmjs.com/getting-started/fixing-npm-permissions

■ Angular 설치

이 Angular CLI는 커멘드 라인에서 실행하는 도구이다. Angular를 사용하려면 먼저 명령 프롬프트 등을 시작하고, 프로젝트를 만들 위치에 cd 명령으로 이동한다. (cd {디렉토리명})

그리고 다음과 같이 명령을 실행한다.

$ ng new 프로젝트명

이것으로 Angular를 이용하는 프로젝트가 생성된다. 예를 들어 “myapp"라는 이름으로 작성한다면 ng new myapp라고 실행하면 “myapp"폴더가 만들어 지고, 그 안에 필요한 파일이 생성된다.

$ ng new myapp

■ 응용 프로그램 실행

응용 프로그램의 실행도 Angular CLI를 사용 할 수 있다. cd 명령으로 프로젝트 디렉토리로 이동하고 ng serve라고 실행한다.

$ ng serve

이것으로 내장 서버를 기동하고, 다음 주소에서 응용 프로그램에 액세스할 수 있다. (다만, 처음에는 빌드를 위해 시작하는데 조금 시간이 걸린다)

http://localhost:4200/

화면에 “Welcome to app!“라는 문구와 함께 로고가 표시되면, 응용 프로그램이 제대로 실행되고 있는 거다. 아래 화면이 이 예제에서 생성되는 Angular 어플리케이션의 Web 페이지 화면이다.

Welcome to App!