Help
AngularJS
AngularCLI
#
Find similar titles
- (rev. 8)
- ㅎnㅂrㄹrㄱi
Structured data
- Category
- Programming
Table of Contents
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]
