2019-06-17 typescript generic / Angular template, Data binding

 [ 1 , 2, 3 ]

앞쪽에 집어 넣는 것은 unshift / 앞쪽에서 뺴내는 것은 shift

뒤에 집어 넣는 것은 push / 뒤에서 뺴내는 것은 pop

 

[...todos, {....}] = push  (같은의미 todos.concat({....}) )

[[{....}], ...todos] = unshift ( 같은의미 [{....}].concat(todos) )

arr[arr.length-1] = pop

arr[0] = shift

 

 

protected는 클래스 내부와 , 상속받는 클래스 내부에서 참조 가능

 

자바스크립트의 배열은 연결리스트로 되어있다.

 

다른언어의 배열은 int arr[4]를 했을때 int형태의 배열공간을 연속되게 4개를 가진다.

하지만, 자바스크립트의 배열은 여러가지 타입들이 올 수 있기 때문에 연속되서 가지지 않는다. 

 

 

class Queue<T> {
  protected data: Array<T> = [];
  push(item: T) {
    this.data.push(item);
  }
  pop(): T {
    return this.data.shift();
  }
}

<T> : type의 t를 따와서 쓴다, 중복되는경우가 생기게되면 알파벳 순서에 따라 주로 U, V를 쓴다.

타입 매개변수라고 한다.

 

function reverse<T>(items: T[]): T[] {  //어떠한 타입의 배열을 받겠다. 어떠한타입의 배열을 리턴하겠다. 호출할때 argument가 뭐냐에 따라 달라진다.
  return items.reverse();
}

const arg = [1, 2, 3, 4, 5];
// 인수에 의해 타입 매개변수가 결정된다.
const reversed = reverse(arg);
console.log(reversed); // [ 5, 4, 3, 2, 1 ]

 

Angular Template

템플릿은 우리가 알고 있는 html문법에 추가적으로 template문법을 더해져서 만든다.

 

**프로퍼티도 표현식이다.(값으로 평가될 수 있다.)

 

템플릿에 들어오는것은 표현식이다. 

 

템플릿 문법

데이터 바인딩

빌트인디렉티브

템플릿 참조 변수

템플릿 표현식 연산자

 

템플릿 내 사용 금지 항목

• script 요소
• 대입연산자(=, +=, -=), 증감 연산자(++, --), 비트 연산자(|, &), 객체 생성 연산자(new)
• 전역 스코프를 갖는 빌트인 객체

 

Data binding

jquery를 사용할 경우 항상 html을 쨰려봐야만 js로 컨트롤 할 수 있었다.

하지만, angular에서는 반대이다.

템플릿과 컴포넌트 클래스가 연결되어 있다. 변화감지에 의해서 변화됨.

 

왜 이벤트 바인딩만으로 밖에 템플릿에서 클래스로 전달하는게 안될까?

상태변화가 언제 발생될지 모르니까.

 

인터폴레이션 

 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <p>admin: {{ admin }}</p>  // boolean 값은 true, false로 표시
    <p>address: {{ address.city }} {{ address.country }}</p>
    <p>gender: {{ gender }}</p>  // gender가 없으면, 아예 표시를 안해줌
    <p>sayHi(): {{ sayHi() }}</p>
    <p>age * 10: {{ age * 10 }}</p>
    <p>age > 10: {{ age > 10 }}</p>
    <p>'stirng': {{ 'stirng' }}</p>
  `
})
export class AppComponent {
  name = 'Angular';
  age = 20;
  admin = true;
  address = {
    city: 'Seoul',
    country: 'Korea'
  };

  sayHi() {
    return `Hi! my name is ${ this.name }.`;
  }
}

 

 

**어트리뷰트 vs 프로퍼티

어트리뷰트의 값은 초기값이고 안바뀐다. (set어트리뷰트를 통해서만 바꿀 수 있다.)

프로퍼티의 값은 항상 최신의 값을 가지고 있는다. (같이 썼을경우는 어트리뷰트보다 우선)

프로퍼티 바인딩 

컴포넌트간의 통신에 많이 사용

 

[innerHTML]="name" 이나 {{name}}이나 같다.

어트리뷰트 바인딩 

클래스라는 프로퍼티는 없다. 

 

어트리뷰트와 프로퍼티가 항상 1:1로 매핑되는 것은 아니다 라는 예제

• id 어트리뷰트와 id 프로퍼티는 1:1 매핑한다.
• class 어트리뷰트는 classList 프로퍼티로 변환된다.
• td 요소의 colspan 어트리뷰트의 경우, 매핑하는 프로퍼티가 존재하지 않는다.
• textContent 프로퍼티의 경우, 대응하는 어트리뷰트가 존재하지 않는다.
• input 요소의 value 어트리뷰트는 value 프로퍼티와 1:1 매핑하지만 서로 다르게 동작한다.

클래스 바인딩

 

<div [class.red]="isCollect" (click)="change()">DIV</div>

export class AppComponet{
  isCollect = true;
  change() {
      this.isCollect = !this.isCollect;
  }
}

클래스바인딩은 단항이 일반적이다.(한개만 쓰는거)

다항은 뒤에서 배울 ngclass를 쓰는게 일반적.

 

 

스타일 바인딩

스타일 적용

 

<div [style.fontSize.px]="'64'">DIV</div>

[style.background-color]="isActive ? '#4CAF50' : '#f44336'" // 삼항연산자도 사용가능

 

이벤트 바인딩

@Component({
  selector: 'app-root',
  template: `
    <button (click)="hadler()">Click me!</button>
  `,
  styles: [`
    .red {
      color: red;
    }
    .big {
      font-size: 64px;
    }
  `]
})

export class Appcomponent{
  handler() {
    console.log('hello');
  }
}

 

@Component({
  selector: 'app-root',
  template: `
    <input type="text" (input)="hadler(input.value)">Click me! #input>
    <p>{{value}}</p>
  `,
  styles: [`
    
  `]
})

export class Appcomponent{
  value: string;

  handler(value: string) {
    this.value = value;
  }
}

@Component({
  selector: 'app-root',
  template: `
    <input type="text" #input>
    <button (click)="handler(input)" >등록</button>
    <p>{{value}}</p>
  `,
  styles: [`
    
  `]
})

export class Appcomponent{
  value: string;

  handler(elem: HTMLInputElement) {
    this.value = elem.value;
    elem.value = '';
  }
}

 

양방향 데이터 바인딩

<input type="text" [(ngModel)]="name">과 <input type="text" [value]="name" (input)="name=$event.target.value">은 정확히 동일하게 동작한다.