본문 바로가기

Web/Angular

개발 준비

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

- 접속

http://localhost:4200/


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