Skip to content

AngularJS AngularCLI #
Find similar titles

Structured data

Category
Programming

Angular CLI #

Angular CLI는 기본구조, 컴포넌트 생성, 빌드, 유닛테스트, 개발서버, 배포를 관리할 수 있도록 도와주는 커멘드라인 인터페이스이다.

Angular 배경 #

AngularJs 1.x는 DOM을 처리하는 과정에서 그 기능을 확장하는 방식이라서 기존 코드를 기반으로 해서 새로운 API 를 추가하는 것만으로는 구조적인 한계를 벗어나기 쉽지 않았다. 따라서 이런 한계를 극복하기 위해 Angular 2 에서는 코드의 기본 구조가 크게 바뀌게 되었다. Angular CLI 의 제공으로 빠르고 쉽게 Angular 개발환경을 생성하고 테스트할 수도 있게 되었다.

2016.09.14 Angular 2를 시작으로 route 버전 이슈 때문에 Angular 3은 건너 뛰고 2016년말 v4.0.0-beta.0를 선보였다.

Angular 4는 2.x 버젼과 대부분 호환되지만 더 빠르고 라이트해졌다. 이후 Animation, Router 관련기능의 추가 등 꾸준히 업데이트 되어왔고 2017.11.01 현재 Angular v5.0.0이 정식버젼으로 되었다.


설치 #

Angular CLI 는 node.js 프로젝트이므로 우선적으로 nodeJS가 설치되있어야 한다. 필수사항 : Node 6.9.0이상, NPM 3 이상

npm install -g @angular/cli@latest

명령어 #

도움말 보기 #

ng help [command]

프로젝트 생성 #

ng new [프로젝트명]

개발서버 실행 #

앱을 서버로 띄워주고 변경된 파일을 감지해서 자동으로 브라우저 리프레쉬되게 해준다.

cd [프로젝트명]
ng serve

컴포넌트, 디렉티브, 서비스, 파이프 생성 #

컴포넌트, 모듈, 클래스 등을 만들어 준다. 각 스케폴드별로 상세 옵션을 통해 인라인 템플릿, 스타일, 접두사추가 등 원하는 옵션을 추가해서 생성할 수 있다.

ng generate component [컴포넌트명]
ng generate <options...>

빌드 #

dist/ 폴더에 실제 서비스를 위한 빌드파일을 생성한다.

ng build

설정 #

프로젝트 관련 Angular CLI Configuration 을 설정한다.

ng set <options...>

테스트 #

카르마를 통한 유닛테스트를 진행하고 결과를 확인할 수 있다.(단위테스트)

ng test

End-to-end 테스트 #

ng e2e

추출 #

Webpack 설정파일을 밖으로 빼주어 프로젝트에 맞게 커스텀할 수 있게 해준다. 이 후 Webpack을 기반으로 한 Angular CLI에서 Webpack 프로젝트로 전환된다.

ng eject

웹 문서 보기 #

CLI로 Angular 웹 사이트의 API 레퍼런스의 검색결과 페이지를 열어준다.

ng doc [keyword]

Suggested Pages #

0.0.1_20140628_0