분류 전체보기
-
01 사용자입력 01앵귤러/04 폼(Forms) 2017. 9. 3. 13:01
사용자 입력링크 클릭, 버튼 누르기, 텍스트 입력 등의 사용자 동작은 DOM 이벤트를 발생시킵니다. 이 페이지에서는 Angular 이벤트 바인딩 구문을 사용하여 해당 이벤트를 컴포넌트 이벤트 핸들러에 바인딩하는 방법을 설명합니다.라이브 예제/다운로드 예제를 실행하십시오. 사용자 입력 이벤트에 바인딩Angular 이벤트 바인딩을 사용하여 모든 DOM 이벤트에 응답할 수 있습니다. 많은 DOM 이벤트는 사용자 입력에 의해 발생됩니다. 이러한 이벤트에 바인딩하면 사용자로부터 입력을 받을 수 있습니다.DOM 이벤트에 바인딩하려면 DOM 이벤트 이름을 괄호로 묶고 따옴표로 둘러싼 템플릿 명령문을 할당합니다.다음 예제는 클릭 핸들러를 구현하는 이벤트 바인딩입니다. src/app/click-me.component.t..
-
10 애니메이션(Animation) 05앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:11
키프레임을 이용한 다단계 애니메이션 애니메이션 키프레임은 간단한 전환을 넘어 두 세트의 스타일 간에 전환할 때 하나 이상의 중간 스타일을 통과하는 보다 복잡한 애니메이션을 구현합니다.각 키프레임에 대해 키프레임을 적용하는 애니메이션의 특정 시점을 정의하는 오프셋을 지정합니다. 오프셋은 애니메이션의 시작을 나타내는 0과 끝을 나타내는 1 사이의 숫자입니다.이 예제에서는 키프레임을 이용하여 애니메이션에 "바운스"를 추가하여 애니메이션을 들어오고 나갑니다. hero-list-multistep.component.ts (excerpt) animations: [ trigger('flyInOut', [ state('in', style({transform: 'translateX(0)'})), transition('vo..
-
10 애니메이션(Animation) 04앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 22:10
애니메이션 가능한 프로퍼티 및 단위Angular의 애니메이션 지원은 Web Animations 위에 구축되므로 브라우저가 애니메이션으로 간주하는 모든 프로퍼티에 애니메이션을 적용 할 수 있습니다. 여기에는 위치, 크기, 변형, 색상, 테두리 및 기타 여러 항목이 포함됩니다. W3C는 CSS 전환 페이지에서 애니메이션 가능한 프로퍼티 목록을 관리합니다.숫자 값이 있는 위치 프로퍼티의 경우 값을 적절한 접미어와 함께 문자열로 제공하여 단위를 정의 할 수 있습니다.l '50px'l '3em'l '100 %'치수를 지정할 때 단위를 제공하지 않으면 Angular는 기본단위를 px로 가정합니다.l 50은 '50px'와 같습니다. 자동 프로퍼티 계산 때로는 런타임까지 치수 스타일 프로퍼티의 값을 알 수없는 경우가 ..
-
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, ..