시작이 반

서비스 추가$ ng g service 서비스명 서비스는 Angular CLI 의 디렉토리 경로에 서비스명.service.ts 라는 이름으로 만들어진다. import { Injectable } from '@angular/core'; @Injectable()export class 서비스명Service { constructor() { } } @Injectable() 은 주입 가능한 클래스라는 뜻으로 사용한다. 소스 파악용으로 작성하므로 추가하도록 하자. 이렇게 만들어진 서비스는 컴퍼넌트에서 import 하고,@Component 내 providers의 배열로 추가한다. import { FirstService } from './서비스명.service'; @Component({ providers: [FirstSer..

:host {...}쉐도우 돔 전체를 감싼다. template: `엄마 딸`,styles: [`:host {display: block;border: 2px solid #000;width: 300px;}`] 결과로 border 2픽셀 짜리 검정 실선이 엄마부터 딸까지 전부를 감싼다. :host(.className) { ... }부모컴퍼넌트에 쓰인 자신의 컴퍼넌트 클래스명에 의해 스타일이 변경 부모selector: 'parent',template: `엄마 `,styles: [`:host {display: block;border: 2px solid #000;width: 300px;}`] 자식selector: 'child',template: `딸`,styles: [`:host(.smile) {display: b..

출처 : http://stackoverflow.com/questions/34326745/whats-the-difference-between-viewchild-and-contentchild Q : Angular 2 provides @ViewChild, @ViewChildren, @ContentChild and @ContentChildren decorators for querying a component's descendant elements. What's the difference between the first two and the latter two?A : I'll answer your question using Shadow DOM and Light DOM terminology (it have come..

1. Angular CLI# Angular CLI 설치$ npm install -g angular-cli # Angular CLI 프로젝트 생성 (먼저, 프로젝트를 만들 디렉토리로 이동후에 해야 함.)$ ng new 프로젝트명 # Angular CLI 프로젝트로 이동$ cd 프로젝트명 # Angular CLI 프로젝트 개발 서버 실행$ ng serve기본 로컬호스트:기본포트 http://localhost:4200/ 포트변경 HTTP 서버 포트, 라이브리로드 서버 포트 $ ng serve --port 4201 --live-reload-port 49000 2. Angular CLI를 이용한 Angular 구성요소 추가# 컴포넌트 추가$ ng g component 컴포넌트명컴퍼넌트의 경우 /app/컴퍼넌트명/..