본문 바로가기

Angular

알아 두면 유용한 Angular CLI 1탄!

오늘은 알아 두면 유용한 Anaular CLI에 대해서 정리 해보도록 하겠습니다.

처음 Angular(version 2)로 프로젝트를 진행 할 때는 Angular CLI를 Angular 기본 구조와 문법을 익히는데 방해가 될 거 같은 느낌이 들어 일부러 잘 사용하지 않았습니다.


하지만 이번에 Angular CLI를 사용 해보면서 알아 두면 정말 Angualr로 개발을 진행 하는데 있어 정말 편하고 개발 시간을 조금이나마 단축 시킬 수 있을거 같아 정리 해봅니다.


우선 CLI를 사용 하기 위해서 Angular CLI를 install 해보도록 하겠습니다.


* Angualr CLI 설치


$ npm install -g @angular/cli

$ npm i -g @angular/cli


위에 보이는 둘 중 어느 명령어를 사용하여도 상관 없습니다.




$ng -v

$ng --version


위 명령어를 실행 하면 아래와 같이 설치 여부를 확인 할 수 있습니다.



그럼 본격적으로 Angular CLI에 대해 살펴 보겠습니다.


* 프로젝트 생성 


$ ng new <project_name>


가장 기본적으로 사용하는게 angular를 손쉽게 생성해주는 new 명령어입니다.

사용법은 위와 같습니다.

new 명령에는 다양한 옵션이 있습니다.


* ng new 


 옵션

 기능

사용 예 

 --dry-run( alias: -d )

생성 전에 생성 할 파일들을 보여준다. 

 $ng new <project_name> --dry-run

 --inline-style(alias: -is)

 css file을 생성하지 않고 line으로 style을 삽입 한다.

 $ng new <project_name> -is

 --inlin-template(alias: -it)

 html file을 생성하지 않고 line으로 template을 삽입 한다. 

 $ng new <project_name> -it

--directory(alias: -dir) 

앱의 디렉토리 이름을 지어준다. 

$ng new <project_name> -dir <dir_name>

 --prefix(alias: -p)

selector에 지정 해준 접미사를 삽입 시켜준다. 

 $ng new <project_name> -p <prefix_name>

 --routing

Routing module을 자동 생성 해준다. 

  $ng new <project_name> 

--skip-git

git 의 초기화를  건너뛴다.

  $ng new <project_name>

--skip-commit

git의 첫번째 커밋을 건너뛴다. 

  $ng new <project_name>

--skip-install

node_modules생성을 건너뛴다. 즉, npm install을 하지 않는다. 

  $ng new <project_name>

--skip-tests

spec file을 생성하지 않는다. 

  $ng new <project_name>


아래와 같이 프로젝트가 잘 생성 되었다.



다음 알아 볼 명령어는 serve입니다.

serve는 build와 webserver를 start 해주는 명령어입니다.


* ng serve 


 옵션

기능 

사용 예 

--host( alias: -h )

기본 localhost:4200으로 실행

$ng serve --host 

--live-reload ( alias: -lr )

수정시 페이지를 자동으로다시 로드 할 지 여부 

 $ng serve --live-reload

 --open ( alias: -o )

  웹서버를 가동 할 때 페이지를 오픈 해 준다.

$ng serve -o 

 --port ( alias: -p )

 임의의 포트번호를 지정해 줄 수 있다.

$ng serve -p <port_number>

 --ssl

 HTTPS로 서버를 가동한다.

$ng serve --ssl 

 --watch ( alias: -w )

 파일이 수정 되면 자동 빌드 한다.

 $ng serve -w


명령어를 입력하면 다음과 같이 실행 된다.



* ng generate


generate는 컴포넌트, 서비스, 클래스, 디렉티브, 파이프, 모듈, 인터페이스 등을 자동으로 만들어 주는 명령어입니다..

그럼 자세히 알아보겠습니다.


우선 generate 는 기본적으로 다음과 같이 사용 할 수 있습니다.

$ ng generate <generate_name> <name> [option]


  • class - $ng generate class <name> 
  • component - $ng generate component <name>
  • directive - $ng generate directive <name>
  • enum  - $ng generate enum  <name>
  • guard - $ng generate guard <name>
  • interface - $ng generate interface <name>
  • module - $ng generate module  <name>
  • pipe - $ng generate pipe <name>
  • service - $ng generate service <name>

* 참고 - ng generate 대신 ng g로 대체해서 사용 가능 합니다.


명령어의 실행 예는 이렇습니다.


      


src/app 밑에 css, html, spec, ts 파일 까지 자동 생성 해주는 것을 알 수 있습니다.




* ng doc

ng doc 은 angular https://angular.io/ 로 검색을 할 수 있습니다.


$ng doc <search_keyword>




[Reference] - https://cli.angular.io/


'Angular' 카테고리의 다른 글

Angular summary  (0) 2018.12.26
Google Analytics in Angular 적용기  (0) 2018.04.11
알아 두면 유용한 Angular CLI 1탄!  (0) 2017.12.11
Angular 내장 파이프  (0) 2017.06.28