분류 전체보기
-
09 파이프(Pipe) 03앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:00
파워 부스트 계산기사용자 정의 파이프를 테스트하기 위해 템플릿을 업데이트하는 것은 그리 재미 있지 않습니다. 이 예를 파이프와 양방향 데이터 바인딩을 ngModel과 결합한 "Power Boost Calculator"로 업그레이드하십시오. src/app/power-boost-calculator.component.ts import { Component } from '@angular/core'; @Component({ selector: 'power-boost-calculator', template: ` Power Boost Calculator Normal power: Boost factor: Super Hero Power: {{power | exponentialStrength: factor}} ` }) ex..
-
09 파이프(Pipe) 02앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 21:58
연쇄 파이프잠재적으로 유용한 조합으로 파이프를 함께 연결할 수 있습니다. 다음 예제에서는 생일을 대문자로 표시하기 위해 생일은 DatePipe에 연결되고 UpperCasePipe에 연결됩니다. 생년월일은 APR 15, 1988로 표시됩니다. src/app/app.component.html The chained hero's birthday is {{ birthday | date | uppercase}} FRIDAY, APRIL 15, 1988로 표시하는 다음 예제는 위와 동일한 파이프를 연결하지만 날짜에 매개 변수를 전달합니다. src/app/app.component.html The chained hero's birthday is {{ birthday | date:'fullDate' | uppercase}..
-
09 파이프(Pipe) 01앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 21:57
파이프(Pipe)모든 응용프로그램은 간단한 작업처럼 보이는 것으로 시작합니다: 데이터를 가져 와서 변환하고 사용자에게 보여줍니다. 데이터를 얻는 것은 로컬 변수를 만드는 것만 큼 간단하거나 WebSocket을 통해 스트리밍 데이터를 가져오는 것만큼 복잡 할 수 있습니다.일단 데이터가 도착하면 원시데이타의 toString 값을 직접 뷰에 넣을 수는 있지만 사용자 편의성은 거의 없습니다. 예를 들어, 대부분의 경우에 사용자는 원시 문자열 형식인 Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)이 아닌 1988 년 4 월 15 일과 같은 간단한 형식으로 날짜를 보는 것을 선호합니다.분명히 일부 값은 약간의 편집으로 이익을 얻습니다. 많은 응용프로그램 내에서..
-
08 구조 디렉티브(Structural Directive) 06앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 13:06
요약라이브 예제 / 예제 다운로드에서 이 가이드의 소스 코드를 다운로드 할 수 있습니다. 다음은 src/app/ 폴더의 소스입니다. src/app/app.component.ts import { Component } from '@angular/core'; import { Hero, heroes } from './hero'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { heroes = heroes; hero = this.heroes[0]; condition = false; logs: string[] = [];..
-
08 구조 디렉티브(Structural Directive) 05앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 13:05
구조 디렉티브 작성이 섹션에서는 NgIf와 반대되는 UnlessDirective 구조 디렉티브를 작성합니다. NgIf는 조건이 true 일 때 템플릿 내용을 표시합니다. UnlessDirective는 조건이 false 일 때 내용을 표시합니다. src/app/app.component.html (myUnless-1) Show this sentence unless the condition is true. 디렉티브를 만드는 것은 컴포넌트를 만드는 것과 비슷합니다.l Directive 데코레이터를 임포트합니다. (Component 데코레이터 대신).l Input, TemplateRef 및 ViewContainerRef를 임포트합니다. 모든 구조 디렉티브를 만들 때 필요합니다.l 디렉티브 클래스에 데코레이터를 적..
-
08 구조 디렉티브(Structural Directive) 04앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:53
NgSwitch 디렉티브Angular NgSwitch는 NgSwitch, NgSwitchCase 및 NgSwitchDefault와 같이 협업 명령 집합입니다.다음은 그 예입니다. src/app/app.component.html (ngswitch) NgSwitch (hero.emotion)에 할당 된 스위치 값에 따라 어느 스위치 케이스가 표시될지가 결정됩니다 (있는 경우).NgSwitch 자체는 구조적 디렉티브가 아닙니다. 다른 두 스위치 디렉티브의 동작을 제어하는 어트리뷰트 디렉티브입니다. 그래서 [ngSwitch]라고 쓰고 절대로 *ngSwitch라고 쓰지 않습니다.NgSwitchCase 및 NgSwitchDefault는 구조 디렉티브입니다. 별표(*) 접두어 표기법을 사용하여 엘리먼트에 첨부합니..
-
08 구조 디렉티브(Structural Directive) 03앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:48
*ngFor 내부Angular는 *ngFor를 별표(*) 구문에서 템플릿 어트리뷰트를 통해 엘리먼트로 비슷하게 변형합니다.다음은 세 가지 방법으로 작성된 NgFor의 모든 기능을 갖춘 응용프로그램입니다. src/app/app.component.html (inside-ngfor) ({{i}}) {{hero.name}} ({{i}}) {{hero.name}} ({{i}}) {{hero.name}} 이것은 ngIf보다 명백하게 복잡합니다. NgFor 디렉티브에는 본 설명서에 표시된 NgIf보다 많은 필수 기능과 선택 사양이 있습니다. 최소한 NgFor에는 루핑 변수 (let hero)와 목록 (heroes)이 필요합니다.ngFor에 할당 된 문자열에서 이러한 기능을 활성화합니다. 이 기능은 Angular의 마..
-
08 구조 디렉티브(Structural Directive) 02앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:46
NgIf 사례 연구NgIf는 가장 단순한 구조 디렉티브이며 이해하기 쉽습니다. 부울 표현식을 사용하여 해당 DOM의 전체를 표시하거나 사라지게 합니다. src/app/app.component.html (ngif-true) Expression is true and ngIf is true. This paragraph is in the DOM. Expression is false and ngIf is false. This paragraph is not in the DOM. ngIf 디렉티브는 CSS로 엘리먼트를 숨기지 않습니다. DOM에서 물리적으로 추가 및 제거합니다. 브라우저 개발자 도구를 사용하여 DOM을 검사하여 사실을 확인하십시오. 맨 위 단락은 DOM에 있습니다. 바닥, 사용하지 않은 단락은 그렇지..