How to Use Angular

Angular CLI requires Node.js 6.9.0, NPM 3.0.0 or higher.

• Node.js install =>

• npm install =>

Angular Installation

$npm install -g @angular/cli

Delete existing version

$npm uninstall -g @angular/cli

• Delete Angular CLI

$npm cache verify

• Verify Cache Matching

$npm install -g angular/cli@latest

• Install Angular CLI

Option

$ng version

$ng help

Project Create

$ng new <project Name> [option]
$ng n <project Name> [option]

• A new project is created and the scaffolding is created.

$cd <project Name>

$ng serve
$ng serve -o
$ng serve --open

• Project lunch at localhost environment, -o , --open is automatically open browser.

$ng serve --port 4500

• Change the server port

Component Create Command

Create Component	Commend	Abbreviation
Component	ng generate component <name> [option]	ng g c <name> [option]
Directive	ng generate directive <name> [option]	ng g d <name> [option]
Pipe	ng generate pipe <name> [option]	ng g p <name> [option]
Service	ng generate service <name> [option]	ng g s <name> [option]
Module	ng generate module <name> [option]	ng g m <name> [option]
Guard	ng generate guard <name> [option]	ng g g <name> [option]
Class	ng generate class <name> [option]	ng g cl <name> [option]
Interface	ng generate interface <name> <type> [option]	ng g i <name> <type> [option]
Enum	ng generate enum <name> [option]	ng g e enum-name <name> [option]

[Option]

*-s* ( --inlineStyle = true | false )

: 인라인 스타일로 생성

(When true, includes styles inline in the component TS file.)

*-t* ( --inlineTemplate = true | false )

: 인라인 템플릿으로 생성

(When true, includes template inline in the component TS file.)

*-S* ( --skipTests = true | false )

: 대문자 S, 테스트 파일을 생성하지 않는다.

(When true, does not generate "spec.ts" test files for the new project.)

*-g* ( --skipGit = true | false )

: 깃 레포지토리를 초기화 하지 않음

(When true, does not initialize a git repository.)

Component Naming Convention

Angular CLI using kebab-case

projectComponent => project-component

ProjectComponent => project-component

Generated Component

./src/app

<Project Name>.component.html

<Project Name>.component.css

<Project Name>.component.ts

<Project Name>.component.spec.ts