1. Node.js 설치 (https://nodejs.org/ko)
- npm 업데이트
$ npm install -g npm@latest
2. NPM을 이용한 개발서버 실행
- package.json 파일 생성
$ npm init
3. 타입스크립트 설치
$ npm install -g typescript
$ tsc -v
4. Angular 프로젝트 구성
- Angular CLI 설치
$ npm install -g @angular/cli
- Angular CLI 프로젝트 만들기
$ ng new my-app
$ cd my-app
- 개발 서버 실행
$ ng serve --open
- 접속
5. ng 명령어 활용
- 포트 변경
$ ng serve --port 4202
- 빌드
/src/environments/environment.ts 파일의 개발환경 설정 정보를 이용해 개발 환경 빌드 수행
$ ng build
- 빌드(프로덕션용)
/src/environments/environment.prod.ts 파일의 설정 정보를 이용해 프로덕션용 빌드 수행
$ ng build -prod
- 구성요소 추가
명령어 |
역할 |
ng g component 컴포넌트명 | 컴포넌트 추가 |
ng g directive 지시자명 | 지시자 추가 |
ng g pipe 파이프명 | 파이프 추가 |
ng g service 서비스명 | 서비스 추가 |
- 주요 명령어
명령어 |
|
ng -help |
CLI 도움말을 확인 |
ng new 프로젝트명 |
새로운 Angular2 프로젝트를 생성 |
ng test |
단위 테스트를 실행 |
ng build |
개발을 위한 빌드 명령어 |
ng build -prod |
프로덕션을 위한 빌드 명령어 |
ng e2e |
종단 테스트(end to end tests)를 수행 |
ng serve |
개발 서버를 실행 |
ng serve --port 4201 --live-reload-port 49153 | 서버 포트는 4021번으로, 라이브 리로드 서버 포트는 49153번으로 실행 |
'Web > Angular' 카테고리의 다른 글
Angular CLI에서 Bootstrap3 사용하기 (0) | 2017.03.16 |
---|---|
Angular CLI 소개 (0) | 2017.03.10 |
Angular2의 특징 (0) | 2017.03.09 |