Angular CLI 사용법

Angular CLI

앵귤러4에서 앵귤러를 제대로 사용하기 위해서는 앵귤러CLI(Command Line Interface)의 사용법을 배울 필요가 있다.

프로젝트 생성, 서버가동, 컴포넌트 등 각종 클래스 생성 및 배포용 앱 작성 까지 다양하게 사용할 수 있다.

 

설치

홈페이지 : https://cli.angular.io

설치 : npm install –g @angular/cli

도움말 : ng help

 

프로젝트 생성 : ng new PROJECT-NAME

 

서버 가동 : ng serve

서버 가동 후 호출 URL : http://localhost:4200/

서버 가동시 디폴트 호스트 및 포트설정 : ng serve –host 0.0.0.0 –port 4201

 

서버 가동 및 브라우저 호출 : ng serve –o

 

ng generate(컴포넌트, 디렉티브, 파이프, 서비스 생성)

명령어 : ng generate 또는 ng g

 

컴포넌트 생성 : ng g component my-new-component –flat

hero-detail컴포넌트를 생성해 보자

명령어 : ng g component hero-detail –flat

--flat옵션은 hero-detail 폴더를 생성하지 않음

D:\angular\angular-tour-of-heroes> ng g component hero-detail --flat installing component   create src\app\hero-detail.component.css   create src\app\hero-detail.component.html   create src\app\hero-detail.component.spec.ts   create src\app\hero-detail.component.ts   update src\app\app.module.ts

 

src/app/hero-detail.component.ts

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-hero-detail',   templateUrl: './hero-detail.component.html',   styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit {     constructor() { }     ngOnInit() {   }   }

 

src/app/hero-detail.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';   import { HeroDetailComponent } from './hero-detail.component';   describe('HeroDetailComponent', () => {   let component: HeroDetailComponent;   let fixture: ComponentFixture<HeroDetailComponent>;     beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [ HeroDetailComponent ]     })     .compileComponents();   }));     beforeEach(() => {     fixture = TestBed.createComponent(HeroDetailComponent);     component = fixture.componentInstance;     fixture.detectChanges();   });     it('should be created', () => {     expect(component).toBeTruthy();   }); });

 

src/app/hero-detail.component.html

<p>   hero-detail works! </p>

 

hero-detail.component.css파일은 빈파일로 만들어진다.

 

app.module.ts파일에 컴포넌트가 자동으로 추가됨(--flat옵션을 사용한 경우에만 변경됨)

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgModule } from '@angular/core';   import { AppComponent } from './app.component'; import { HeroDetailComponent } from './hero-detail.component';   @NgModule({   declarations: [     AppComponent,     HeroDetailComponent   ],   imports: [     BrowserModule,     FormsModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

 

서비스 생성 : ng g service hero –m app

hero서비스를 생성하고 모듈의 providers에 추가함

src/app/hero-search.service.ts

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';   import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map';   import { Hero } from './hero';   @Injectable() export class HeroSearchService {     constructor(private http:HttpClient) { }     search(term:string): Observable<Hero[]>{     return this.http     .get(`http://localhost:3000/heroes/?name=${term}`)     .map(response => response as Hero[]);   }   }

 

ng build(배포용 앱 생성)

dist/ 폴더에 배표용 앱을 저장합니다.

프로젝트를 빌드하거나 제공하는 모든 명령 (build / serve / e2e)은 출력 디렉토리 (기본적으로 dist)를 삭제합니다. 이것은 --no-delete-output-path (또는 --delete-output-path = false) 플래그를 통해 비활성화 할 수 있습니다.

ng build --prod --base-href /myApp/

--prod : 운영모드로 빌드(개발 모드는 --dev)

--base-href /myApp/ : index.html파일의 base태그를 <base href="/myApp">으로 설정한다.