앵귤러
-
10 애니메이션(Animation) 03앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:09
예 : 들어가기와 나가기 void 및 * 상태를 사용하면 엘리먼트의 들어가고 떠나는 애니메이션 효과를 정의 할 수 있습니다.l 들어가기 : void => *l 나가기 : * => void예를 들어, 아래의 animations 배열에는 void => * 및 * => void 구문을 사용하여 뷰 안팎으로 엘리먼트에 애니메이션을 적용하는 두 가지 전환이 있습니다. hero-list-enter-leave.component.ts (excerpt) animations: [ trigger('flyInOut', [ state('in', style({transform: 'translateX(0)'})), transition('void => *', [ style({transform: 'translateX(-100%)'})..
-
10 애니메이션(Animation) 02앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:07
상태 및 전환Angular 애니메이션은 논리 상태와 상태간 전환으로 정의됩니다.애니메이션 상태는 응용프로그램 코드에서 정의하는 문자열 값입니다. 위의 예에서 'active'및 'inactive'상태는 영웅 개체의 논리 상태를 기반으로 합니다. 상태의 소스는 이 경우처럼 간단한 객체 속성일 수도 있고 메소드에서 계산된 값일 수도 있습니다. 중요한 것은 컴포넌트의 템플릿에서 읽을 수 있다는 것입니다.각 애니메이션 상태에 대한 스타일을 정의 할 수 있습니다. src/app/hero-list-basic.component.ts state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ bac..
-
10 애니메이션(Animation) 01앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:04
애니메이션(Animation)모션은 현대 웹 어플리케이션의 디자인에서 중요한 부분입니다. 훌륭한 사용자 인터페이스는 필요한 곳에서 주의를 환기시키는 흥미 진진한 애니메이션으로 상태사이을 부드럽게 전환합니다. 잘 디자인 된 애니메이션은 UI를 재미 있고 즐겁게 사용할 수 있게 합니다. 개요Angular의 애니메이션 시스템을 사용하면 순수 CSS 애니메이션에서와 동일한 종류의 기본 성능으로 실행되는 애니메이션을 제작할 수 있습니다. 애니메이션 로직을 나머지 어플리케이션 코드와 긴밀하게 통합하여 손쉽게 제어 할 수 있습니다. Angular 애니메이션은 표준 Web Animations API 위에 구축되어 있으며 이를 지원하는 브라우저에서 기본적으로 실행됩니다. 다른 브라우저의 경우 polyfill이 필요합니다..
-
09 파이프(Pipe) 05앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:02
pure 파이프와 pure 함수pure 파이프는 pure 함수를 사용합니다. pure 함수는 입력 값을 처리하고 감지 할 수있는 부작용없이 값을 리턴합니다. 동일한 입력이 주어지면 항상 동일한 출력을 리턴해야 합니다.이 페이지의 앞부분에서 설명한 파이프는 pure 함수로 구현됩니다. 내장 DatePipe는 pure 함수 구현을 가진 pure 파이프입니다. ExponentialStrengthPipe와 FlyingHeroesPipe도 마찬가지입니다. 몇 가지 단계를 거쳐 FlyingHeroesImpurePipe를 검토했습니다. pure함수를 이용한 impure 파이프입니다.그러나 pure 파이프는 항상 pure 함수로 구현합니다. 그렇지 않으면 실행할 때 변경된 표현식에 대해 많은 콘솔 오류가 표시됩니다. ..
-
09 파이프(Pipe) 04앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:02
Pure와 impure 파이프파이프에는 두 가지 범주가 있습니다. Pure와 impure입니다. 파이프는 기본적으로 pure입니다. 지금까지 본 모든 파이프는 pure입니다. pure 플래그를 false로 설정하여 파이프를 impure로 만듭니다. 다음과 같이 FlyingHeroesPipe를 impure로 만들 수 있습니다. src/app/flying-heroes.pipe.ts @Pipe({ name: 'flyingHeroesImpure', pure: false }) pure와 impure의 차이점을 이해해야 합니다. pure 파이프로 시작합니다. pure 파이프Angular는 입력 값에 대한 pure 변경을 감지 한 경우에만 pure 파이프를 실행합니다. pure 변경은 원시 입력 값 (String, ..
-
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 일과 같은 간단한 형식으로 날짜를 보는 것을 선호합니다.분명히 일부 값은 약간의 편집으로 이익을 얻습니다. 많은 응용프로그램 내에서..