Angular - egghead 01

2017-11-28

angular, egghead

[Egg Head] Angular Get Started

Egg Head의 Get Started with Angular를 강의 순서대로 남겨 둘만한 부분에 대해서 간단히 정리 해 본다.

2. Create a Simple Angular 2 Component

1
2
3

$ ng generate component simple-form --inline-template --inline-style
# same as
$ ng g c simple-form -it -is

.angular-cli.json file 에 apps.prefix 값이 selecotr의 prefix로 동작 함

3. Manage Angular 2 Elements with Events and Refs

click event & input binding

input 으로부터 값을 입력 받아서, click 하면 출력하는 예제를 통해 event binding을 해 본다.

./src/app/simple-form/simple-form.component.ts

@Component({
  template: `
    <div>
      <input #myInput type="text">
      <button (click)="onClick(myInput.value)">
    </div>
  `
})
export class SimpleFormComponent implements OnInit {
  onClick(value) {
    console.log('clicked', value);
  }
}

DOM event(click)를 onClick method 와 binding.
#myInput 은 refs 라고 하며, Element를 가리키는 듯.

#myInput 의 정체를 조금 더 알 핖요가 있을 듯

HTML에서 onClick(myInput)으로 value가 아닌 myInput을 전달하게 되면 Element 가 전달된다.

console.log(myInput.value) 한 후 CDT > console의 출력에 마우스 오버하면 해당 Element를 하이라이트 해 준다.

4. Control Angular 2 Events with $event and Event Handlers

$event를 parameter 로 넘길 수 있다.

@Component({
  template: `<div>
      <input #myInput type="text">
      <button (click)="onClick($event, myInput.value)">BTN</button>
    </div>`
})
export class SimpleFormComponent implements OnInit {
  onClick(event, value) {
    console.log(event, value);
  }
}

app.module.ts의 providers에 생성한 Service Class 추가

ex) providers: [MailService]
사용할 Component의 constructor에 추가

ex) constructor(private mailService: MailService) {}

providers에 object를 통해 이름을 변경해서 DI 해 본다.
사용하는 곳에서 import {} from을 하지 않아도 된다.

app.module.ts의 providers에 {provide: '이름', useClass: 서비스_클래스} 또는 {provide: '이름', useValue: '값'}형태로 주입

ex) { provide: 'mail', useClass: MailService }
ex) { provide: 'name', useValue: 'robert kim' }
사용할 Component의 constructor에 @Inject 데코레이터와 함께 사용

ex) constructor(@Inject('mail') private mail, @Inject('name') private name)

7. Loop Through Angular 2 Components with ngFor

ngFor 를 사용 해 본다.

HTML에서 *ngFor="let {변수} of {참조}" 형태로 사용

<ul>
  <li *ngFor="let message of mail.messages">
    {{ message }}
  </li>
</ul>

Angular Compiler는 HTML을 컴파일 하면서 *가 있는 부분은 다시 재생성 하는걸로 보인다.

8. Pass Values into Angular 2 Components with @Input

Component 값을 주입하기 위해서는 attribute 형태로 주입하며, @Input을 이용해야 한다.

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: `di-test`,
  template: `{{ diMessage }}`
})
class DITestComponent implements OnInit {
  @Input() diMessage;
  constructor() {}
  ngOnInit() {}
}

line 1: Input decorator는 @angular/core를 사용한다.
line 5: diMessage를 interpolation 했다는건, 해당 class의 member 변수라는 의미 일 것이다.
line 8: diMessage에 @Input decorator 를 붙이므로, Attribute를 통해 값을 받을 수 있다.

위의 DITestComponent는 아래와 같이 사용하면 된다.

1	`<di-test [message]="some message"></di-test>

9. Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

2-way Binding에 대해 알아본다.

사용법은 HTML에 [(ngModel)]=variable 형태로 ngModel keyword를 통해 변수와 바인딩 한다.

app.module.ts에 FormsModule을 imports 해야 한다.

10. Pass Events from Angular 2 Components with @Output

Output 을 통해 event를 발생 시켜본다.
import { Output, EventEmitter } from '@angular/core';

someComponent.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'some-component',
  template: `
    <input [(ngModel)]="message">
    <button (click)="updateMsg.emit({text: message.text})">Emit Msg</button>
  `
})
export class SomeComponent implements OnInit {
  @Input() message;
  @Output() updateMsg = new EventEmitter();
  constructor() {}
  ngOnInit() {}
}

line 1: Output, EventEmitter decorator는 @angular/core를 사용한다.
line 7: button click시 eventEmitter.emit method를 호출한다.

이벤트를 수신 받을 때는 다음과 같이 사용한다.

@Component({
  selector: 'main-component',
  template: `<some-component (updateMsg)=updateMsgFunc(text)></some-component>`
})
export class MainComponent {
  updateMsgFunc(text) {
    // Method stuff
  }
  constructor() {}
}
// ts

@Output은 사용하는곳의 Event binding 이름이다.

@Output() updateMsg = new EventEmitter(); 하게되면, 사용하는곳에서는 <using-comp (updateMsg)="someFunc"> 형태로 사용 함

11. Write CSS inside of Angular 2 Components

해당 Component 에서만 유효하다.

some.component.ts

@Component({
  selector: 'some-component',
  styles: [`
    * {
      font-family: monospace;
    }
  `]
})
export class SomeComponent {}

Component 전체에 대한 스타일은 사용하는 곳에서, 사용하려는 Component Selector 를 Tag로 스타일을 적용하면 된다.

main.component.ts

@Component({
  styles: [`
    some-component {
      margin-top: 10px;
    }
  `]
})

12. Apply CSS Classes Conditionally with NgClass

ngClass를 Input binding 한 후, object({claaName: true})를 통해 css 적용 여부를 설정하면 된다.

@Component({
  template: `
    <input [ngClass]="{mousedown: isMousedown}">
    (mousedown)="isMousedown=true"
    (mouseleave)="isMousedown=false"
  `,
  style: [`.mousedown{ border: 2px solid green; }`]
})
export class SomeComponent{
  isMousedown;
}

13. Global CSS

Global scope 으로 css를 import(index.html에) 한 후 각 Component에서 css 사용 여부를 설정할 수 있다.

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  encapsulation: ViewEncapsulation.Emulated // default
})

angular