[개발환경 구축] Angular

IntelliJ에서 Angular-CLI 프로젝트 생성

1) Angular CLI?

간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성요소를 선별적으로 추가할 수 있는 Command Line Interface다.
Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다.

Angular Cli 지원기능

• Angular 프로젝트 생성
• Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가
• LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행
• Unit/E2E(End-to-End) 테스트 환경 지원
• 배포를 위한 Angular 프로젝트 패키징

Angular CLI 공식 홈페이지

• https://angular.io/cli

2) Angular CLI 설치

Angular CLI는 Node.js 6.9.0, NPM 3.0.0 이상이 필요하다.

Angular CLI 명령어

1. Angular CLI 설치

$ npm install -g @angular/cli  

2. 프로젝트 생성 - Angular 스타일 가이드의 기본 어플리케이션 구조, 네이밍 룰, 코딩 컨벤션 등을 준수하여 생성된다.

$ ng new <project-name>

3. 프로젝트 실행 - 프로젝트를 로컬 환경에서 실행(preview)한다.

$ ng serve
$ ng serve --open #브라우저 자동실행
$ ng serve --port 4201 #포트 4201 사용

4. 프로젝트 구성 요소 생성

ng generate(축약형: ng g) 명령어를 사용한다.

# Component 생성
$ ng generate component <component-name> 
$ ng g c <component-name> # 축약형

# Directive 생성
$ ng generate directive <directive-name> 
$ ng g d <directive-name> # 축약형

# Module 생성
$ ng generate component <component-name> 
$ ng g c <component-name> # 축약형

# Service 생성
$ ng generate service <service-name> 
$ ng g s <service-name> # 축약형

# Class 생성
$ ng generate class <class-name> 
$ ng g c <class-name> # 축약형

5. 프로젝트 빌드

$ ng build

참고

# Angular CLI 삭제
$ npm uninstall -g @angular/cli

# 캐시 정합성 확인
$ npm cache verify

# Angular CLI 설치
$ npm install -g @angular/cli@latest

# Angular CLI version 확인
$ ng version

# Angular CLI 사용법 참조
$ ng help

3) IntelliJ Run Configurations

출처: https://poiemaweb.com/angular-cli