앵귤러
-
02 템플릿기반 폼(Template-driven Forms) 03앵귤러/04 폼(Forms) 2017. 9. 3. 13:15
app.component.ts 수정AppComponent는 응용프로그램의 루트 컴포넌트입니다. 이것은 새로운 HeroFormComponent를 호스팅합니다."QuickStart"버전의 내용을 다음으로 교체하십시오: src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '' }) export class AppComponent { } 두 가지 변경사항이 있습니다. 템플릿은 단순히 컴포넌트의 selector 프로퍼티로 식별되는 새 엘리먼트 태그입니다. 응용프로그램 컴포넌트가 로드될 때 영웅 폼이 표시됩니다. 또한 클래스본문에 name 필드를 넣었습니다. 초기 HTML..
-
02 템플릿기반 폼(Template-driven Forms) 02앵귤러/04 폼(Forms) 2017. 9. 3. 13:11
설정설정 지침에 따라 angular-forms라는 새 프로젝트를 만듭니다. ng new angular-forms 영웅 모델 클래스 만들기사용자가 폼데이터를 입력하면 변경 사항을 캡처하고 모델 인스턴스를 업데이트합니다. 모델이 어떻게 보여야 하는지 알때까지 폼을 배치 할 수 없습니다.모델은 응용프로그램의 중요성에 대한 사실을 담고있는 "프로퍼티 가방"처럼 간단할 수 있습니다. 다음 모델은 Hero 클래스가 세 가지 필수필드(id, name, power)와 하나의 선택필드(alterEgo)를 가지고 있음을 설명합니다.app디렉토리에 다음의 주어진 내용으로 파일을 만듭니다. src/app/hero.ts export class Hero { constructor( public id: number, public n..
-
02 템플릿 기반 폼(Template-driven Forms) 01앵귤러/04 폼(Forms) 2017. 9. 3. 13:09
템플릿 기반 폼폼폼은 비즈니스 애플리케이션의 주류입니다. 폼을 사용하여 로그인하고, 도움요청을 제출하고, 주문하고, 항공편을 예약하고, 회의를 예약하고, 수많은 데이터 입력작업을 수행합니다.폼을 개발할 때 작업흐름을 통해 효율적이고 효과적으로 사용자에게 안내하는 데이터 입력 환경을 만드는 것이 중요합니다.폼을 개발하려면 양방향 데이터바인딩, 변경 추적, 유효성 검사 및 오류 처리에 대한 프레임워크 지원지원 뿐만 아니라 디자인 기술이 필요합니다.이 페이지는 간단한 폼을 만드는 방법을 보여줍니다. 만드는 과정에 다음과 같은 방법을 배우게됩니다.l 컴포넌트와 템플릿을 사용하여 Angular 폼을 작성l ngModel을 사용하여 입력 제어 값을 읽고 쓰는 양방향 데이터 바인딩을 생성l 상태 변경 사항 및 폼 컨..
-
01 사용자입력 03앵귤러/04 폼(Forms) 2017. 9. 3. 13:04
모두 한데 모아이전 페이지에서는 데이터를 표시하는 방법을 보여주었습니다. 이 페이지에서는 이벤트 바인딩기술을 설명했습니다.이제 영웅의 목록을 표시하고 새로운 영웅을 목록에 추가할 수 있는 마이크로 응용프로그램에 모두 넣으십시오. 사용자는 입력박스에 영웅의 이름을 입력하고 추가를 클릭하여 영웅을 추가할 수 있습니다. 아래는 "소규모 영웅 여행" 컴포넌트입니다. src/app/little-tour.component.ts @Component({ selector: 'little-tour', template: ` Add {{hero}} ` }) export class LittleTourComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; ad..
-
01 사용자 입력 02앵귤러/04 폼(Forms) 2017. 9. 3. 13:03
템플릿 참조변수에서 사용자 입력 받기사용자 데이터를 가져오는 또 다른 방법은 Angular 템플릿 참조변수를 사용하는 것입니다. 이러한 변수는 템플릿내에서 엘리먼트에 직접 액세스할 수 있게 해줍니다. 템플릿 참조변수를 선언하려면 식별자 앞에 해시문자(#)를 붙이십시오.다음 예제에서는 템플릿 참조변수를 사용하여 간단한 템플릿에서 키입력 루프백을 구현합니다. src/app/loop-back.component.ts @Component({ selector: 'loop-back', template: ` {{box.value}} ` }) export class LoopbackComponent { } 요소에 선언된 box라는 템플릿 참조변수는 엘리먼트 자체를 참조합니다. 이 코드는 box 변수를 사용하여 입력 엘리먼..
-
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'와 같습니다. 자동 프로퍼티 계산 때로는 런타임까지 치수 스타일 프로퍼티의 값을 알 수없는 경우가 ..