'angular'에 해당하는 글 2건

Angular2 :: Template Syntax(템플릿)

MEAN stack/Angular2 2016. 12. 17. 23:47

간단하게 템플릿 에 대해 살펴보려고한다



<p>The sum of 1 + 1 is {{1 + 1}}</p>



HTML <P> 태그안에 1+1 값을 실행하면


결과는 2 를 도출할것이다



<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>



함수 안의 값을 살펴보자


{{ 1 + 1 + getval() }}


무슨값이 나올까?? 


실행을 해보면 결과값으로 4가 나온다  getval() 값은 앞서 1+1 의 결과값인 2를 가져온다 


확인을 해보면 



TwoWayBinding


도대체 앵귤러가 양방향 바인딩바인딩하길레 궁금해서 도큐먼트를 찾아보고 공부한걸 적어보려한다


AppComponent.html

1
2
3
4
5
6
 
<div id="two-way-2">
  <h3>De-sugared two-way binding</h3>
  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
</div>
 
cs

Sizer-Component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'my-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  dec() { this.resize(-1); }
  inc() { this.resize(+1); }
  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
cs


my-sizer  에 폰트 사이즈값을 입력받아준다 기본값 : 14px


14라는 값을 sizer-componenet 에서 받은후 fontsize 값을 변경해주는것이다


예로, bigger 버튼을 클릭하게되면 this.resize(+1) 함수가 실행되고


resize 함수에서 사이즈값을 맞춰주고


this.sizeChange.emit(this.size)  을 실행해준다


$event 라는 변수는 Sizer-Component.sizechange 을 포함한다 왜냐? 


변수 선언쪽을 확인해보자


  @Input()  size: number | string;                                             //입력받은값  ex) 12,14,16

   

  @Output() sizeChange = new EventEmitter<number>();     //size change 를 해주는 이벤트생성 


       <number>는 (this.size) 값 이다


앵귤러는 $event 값을 AppComponent.fontsizePx 에 값을 할당해준다


실행결과를 살펴보자 



첫번째 예제)  


AppComponent.html

1
(sizeChange)="$event"
cs



두번째 예제)


AppComponent.html

1
(sizeChange)="fontSizePx=$event"
cs







'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
Angular2 :: User Input (유저 입력)  (0) 2016.12.08
WRITTEN BY
내가달이다
,

Angular2 :: User Input (유저 입력)

MEAN stack/Angular2 2016. 12. 8. 03:50


1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
 
  onClickMe() {
    this.clickMessage = '클릭 이벤트 입니다';
  }
}
cs


단순 클릭 이벤트이다


돌아가는 사이클은 클릭 버튼을 누르면 {{clickMessage}} 를 보여준다 


결과

 




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Component({
  selector: 'key-up1',
  template: `
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = '';
 
 
  onKey(event:any) {
    this.values += event.target.value + ' | ';
  }
  
}
cs


유저입력값을 가져옵니다


돌아가는 사이클은 유저의 키입력을 $event 를 이용해 가져온후 event.target.value 를 통해 값을 가져온다


결과

 



1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';
@Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }
 
cs


위의 keyup 과의 차이점은 #box 라는 식별자를 주고 <p> 태그 안의 값을 #box 의 value 값을 보여준다

단, 빈값의 경우에는 값이 보여지지 않는데 이경우는 value 값을 가져와 | 넣어주면 동작한다


 결과

 



1
2
3
4
5
6
7
8
9
10
11
12
@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}
 
cs



값을 입력후 엔터키를 입력된 값을 가져오거나 보여줄수있다. 편한점은 별다른 이벤트없이 keyup.enter 만 이용하면 끝



 결과

 


여기에서 만약 엔터키를 입력하지않고 저장이 되게 하고싶다면  blur event 를 이용해보자

위의 예제에서  (blur)="update(box.value)" 이것만 추가시켜주면된다




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Component({
  selector: 'little-tour',
  template: `
    <input #newHero
      (keyup.enter)="addHero(newHero.value)"
      (blur)="addHero(newHero.value); newHero.value='' ">
 
    <button (click)=addHero(newHero.value)>Add</button>
    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
  `
})
export class LittleTourComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  addHero(newHero: string) {
    if (newHero) {
      this.heroes.push(newHero);
    }
  }
}
cs

이 예제는 위에서 배운것을 종합한예제이다 살펴보면 blur 이벤트를 살펴보면 자바스크립트는 2개의 동작을 하게된다

첫째로 addHero 이벤트를 동작시킨다

둘쨰로 <input #newHero> 인풋값을 클리어시켜준다


 결과

 




'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
Angular2 :: Template Syntax(템플릿)  (1) 2016.12.17
WRITTEN BY
내가달이다
,