Angular chapter5 Angular CLI

Angular CLI 란

간단한 명령어를 사용하여 angular 프로젝트를 생성, 실행, 빌드 할 수 있는 커맨드 라인 인터페이스

• 설치방법
  1 node 6.9.0이상 npm 3.0.0 이상 필요
  https://nodejs.org/en/

2. 터미널에 명령어 입력

1
2
3
4
5
6

npm install -g @angular/cli
``
3. 설치가 완료되면 ng 명령어로 버전 확인

``cmd
ng version

angular 프로젝트

1. 프로젝트 생성하기

1

ng new my-app

프로젝트를 생성하면 angular router를 사용할 건지, stylesheet는 어떤 언어로 할 건지(css /scss 등등) 질문이 나옴
고르고 enter

2. 프로젝트 로컬 서버 실행하기

   1 2 3 4 5

   cd my-app // 서버 실행 ng serve // 또는 ng s

브라우저 주소창에 localhost:4200을 입력하여 개발용 서버에 접속 가능
만약 포트 4200을 이미 사용하고 있다면 포트번호를 변경해야함

1
2

ng serve -open // 로컬서버가 실행되면서 동시에 브라우저 열림 
ng serve --port 4100

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

   프로젝트에 새로운 구성요소를 생성하기 위해서는 ng generate 명령어를 사용한다. (또는 ng g)

• 컴포넌트 생성

1
2
3
4

ng generate component <컴포넌트 이름>
ng g c <컴포넌트 이름>

ng generate component home

컴포넌트를 생성하면 angular cli는

1) src/app 폴더에 home 폴더를 생성한다.
2) home 폴더 안에 다음 4개의 파일을 생성한다.
home.component.html
home.component.css
home.component.ts
home.component.spec.ts
3) app.module.ts에 새롭게 생성된 컴포넌트를 등록함

• 파일명 변경

  angular cli는 지정된 컴포넌트의 대소문자를 구별하여 정해진 규칙에 따라 파일명을 암묵적으로 변경한다.

1
2
3
4
5
6
7
8
9
10

ng g c newComponent
/**

CREATE src/app/new-component/new-component.component.html (28 bytes)
CREATE src/app/new-component/new-component.component.spec.ts (671 bytes)
CREATE src/app/new-component/new-component.component.ts (303 bytes)
CREATE src/app/new-component/new-component.component.scss (0 bytes)

**/
`

만약 newComponent라는 컴포넌트를 생성하면 실제로는 저렇게 하이픈(-)으로 파일명이 변경되어 컴포넌트가 생성된다.

• 디렉티브 생성

1
2
3
4
5
6
7
8
9
10

ng generate directive <디렉티브명>
ng g d <디렉티브명>

ng generate directive highlight
/**

CREATE src/app/highlight.directive.spec.ts (236 bytes)
CREATE src/app/highlight.directive.ts (147 bytes)

**/

디렉티브 생성시 별도의 폴더는 생성되지 않으며 src/app 폴더에 2개의 파일을 생성한다.

• 모듈 생성

  1 2 3 4 5 6 7 8 9 10

  ng generate module <모듈명> ng g m <모듈명> ng generate module todos /** CREATE src/app/todos/todos.module.ts (191 bytes) **/

모듈을 생성하면 마찬가지로
1) src/app 폴더에 todos 폴더를 생성한다.
2) home 폴더 안에 todos.module.ts 파일을 생성한다.
3) 모듈을 사용하려면 다른 모듈의 imports 프로퍼티로 등록해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewComponentComponent } from './new-component/new-component.component';
import { HighlightDirective } from './highlight.directive';
import { TodosModule } from './todos/todos.module';

@NgModule({
  declarations: [
    AppComponent,
    NewComponentComponent,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TodosModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 서비스 생성

1
2
3
4
5
6
7
8
9
10
11

ng generate service <서비스명>
ng g s <서비스명>

ng generate service data

/**

CREATE src/app/data.service.spec.ts (347 bytes)
CREATE src/app/data.service.ts (133 bytes)

**/

서비스 생성시 별도의 폴더는 생성되지 않으며 src/app 폴더에 2개의 파일을 생성한다.

1
2
3
4
5
6
7
8
9

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
}

서비스 안의 @Injectable 안의 providedIn 프로퍼티의 값으로 ‘root’를 설정하면
루트 인젝터에게 서비스를 제공하여 전역에서 서비스를 주입할 수 있다.

• 클래스 생성

1
2
3
4
5
6
7
8
9

ng generate class <클래스명>
ng g cl <클래스명>

/**

CREATE src/app/user.spec.ts (146 bytes)
CREATE src/app/user.ts (22 bytes)

**/

클래스 생성시 별도의 폴더는 생성되지 않으며 src/app 폴더에 2개의 파일을 생성한다.

• 프로젝트 빌드

  프로젝트 개발 후 배포를 위해서는 ng build를 사용한다.
  빌드가 완료되면 루트에 빌드 결과물이 포함된 dist 폴더가 생성된다.

1

ng build

• 기본 옵션 변경

  프로젝트에 기본으로 적용되는 옵션을 변경하기 위해서는 angular.json을 수정한다.