분류 전체보기
-
02 템플릿 구문 08앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:04
양방향 바인딩 ( [(...)] )사용자가 변경하면 데이터 프로퍼티를 표시하고 해당 프로퍼터를 업데이트하는 것이 좋습니다.엘리먼트 측면에서 특정 엘리먼트 프로퍼티를 설정하고 엘리먼트 변경 이벤트를 수신하는 조합을 취합니다.Angular는 이 목적을 위해 특별한 양방향 데이터 바인딩 구문 [(x)]을 제공합니다. [(x)] 구문은 프로퍼티 바인딩의 대괄호 [x]를 이벤트 바인딩의 괄호 (x)와 결합합니다. [( )] = 박스 안의 바나나 괄호가 대괄호 안에 들어가는 것을 기억할 수 있도록 박스에 바나나를 시각화 [(x)] 구문은 엘리먼트에 x라는 설정 가능한 프로퍼티가 있고 xChange라는 해당 이벤트가 있다는 것을 쉽게 보여줍니다. 다음예는 패턴에 맞는 SizerComponent가 있습니다. 이것은 s..
-
02 템플릿 구문 07앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:03
이벤트 바인딩 (event)지금까지 만난 바인딩 디렉티브는 컴포넌트에서 엘리먼트로 데이터를 한 방향으로 이동시킵니다.사용자는 화면을 응시하지 않습니다. 입력 박스에 텍스트를 입력합니다. 목록에서 항목을 선택합니다. 버튼을 클릭합니다. 이러한 사용자 동작으로 인해 엘리먼트에서 컴포넌트로의 반대 방향으로 데이터 흐름이 발생할 수 있습니다.사용자 작업에 대해 알 수있는 유일한 방법은 키 입력, 마우스 이동, 클릭 및 터치와 같은 특정 이벤트를 수신하는 것입니다. Angular 이벤트 바인딩을 통해 사용자 작업을 처리할 수 있습니다.이벤트 바인딩 구문은 등호 왼쪽에 괄호 안에있는 목표 이벤트 이름과 오른쪽에 인용 된 템플리트 명령문으로 구성됩니다. 다음 이벤트 바인딩은 클릭이 발생할 때마다 컴포넌트의 onSav..
-
02 템플릿 구문 06앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:03
어트리뷰트, 클래스 및 스타일 바인딩템플릿 구문은 프로퍼티 바인딩에 적합하지 않은 시나리오에 대해 특수 단방향 바인딩을 제공합니다. 어트리뷰트 바인딩어트리뷰트 바인딩을 사용하여 직접 어트리뷰트 값을 설정할 수 있습니다.이 가이드에서는 프로퍼티 바인딩을 사용하여 엘리먼트 프로퍼티를 설정하는 것이 항상 문자열로 어트리뷰트를 설정하는 것보다 더 바람직하다고 강조합니다. 그럼 Angular가 어트리뷰트 바인딩을 제공하는 이유는 무엇입니까?바인드 할 엘리먼트 프로퍼티가 없을 때 어트리뷰트 바인딩을 사용해야합니다.ARIA, SVG 및 테이블 스팬 어트리뷰트를 고려해볼 때, 이것들은 순수한 어트리뷰트입니다. 엘리먼트 프로퍼티에 해당하지 않으며 엘리먼트 프로퍼티를 설정하지 않습니다. 바인딩 할 프로퍼티 대상이 없습니다..
-
02 템플릿 구문 05앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:00
프로퍼티 바인딩 아니면 보간?보간과 프로퍼티 바인딩 사이에서 선택해야 하는 경우가 많습니다. 다음 바인딩 쌍은 동일한 작업을 수행합니다. src/app/app.component.html is the interpolated image. is the property bound image. "{{title}}" is the interpolated title. "" is the property bound title. 보간은 많은 경우에 프로퍼티 바인딩에 대한 편리한 대안입니다.데이터 값을 문자열로 표현할 때 하나의 형식을 다른 형식보다 선호하는 기술적 인 이유는 없습니다. 보간법을 선호하는 경우에는 가독성을 높일 수 있습니다. 코딩 스타일 규칙을 수립하고 규칙을 준수하고 현재 작업에 가장 자연스러운 느낌을 주는..
-
02 템플릿 구문 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:59
프로퍼티 바인딩 ([property])템플릿 프로퍼티 바인딩을 작성하여 뷰 엘리먼트의 프로퍼티를 설정합니다. 바인딩은 프로퍼티를 템플릿 표현식의 값으로 설정합니다.가장 일반적인 프로퍼티 바인딩은 엘리먼트 프로퍼티를 컴포넌트 프로퍼티 값으로 설정합니다. 다음은 이미지 엘리먼트의 src 속성을 컴포넌트의 heroImageUrl 속성에 바인딩하는 예입니다. src/app/app.component.html 또 다른 예는 컴포넌트가가 변경되지 않았다고 알릴 때 버튼을 비활성화하는 것입니다. src/app/app.component.html Cancel is disabled 다음은 지시어의 프로퍼티를 설정하는 것입니다. src/app/app.component.html [ngClass] binding to the cl..
-
02 템플릿 구문 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:58
바인딩 구문 : 개요데이터 바인딩은 사용자가 보는 것을 응용프로그램 데이터 값과 조율하는 메커니즘입니다. HTML에서 값을 넣거나 가져올 수는 있지만 이러한 작업을 바인딩 프레임 워크로 바꾸면 응용프로그램을 작성하고 읽고 유지하는 것이 더 쉽습니다. 바인딩 소스와 대상 HTML 엘리먼트 사이의 바인딩을 선언하고 프레임 워크가 작동하도록합니다.Angular는 많은 종류의 데이터 바인딩을 제공합니다. 이 가이드에서는 Angular 데이터 바인딩 및 구문에 대한 고급 수준을 설명한 후 대부분을 다루고 있습니다.바인딩 유형은 데이터 흐름의 방향에 따라 구분되는 세 가지 범주로 그룹화 할 수 있습니다. 소스에서 뷰로(source-to-view), 뷰에서 소스로(view-to-source), 양방향 시퀀스로 뷰에서..
-
02 템플릿 구분 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:56
템플릿 명령문템플릿 명령문은 엘리먼트, 컴포넌트 또는 디렉티브와 같은 바인딩 대상에서 발생하는 이벤트에 응답합니다. = 기호의 오른쪽에 따옴표로 묶여있는 (event) = "statement"와 같이 이벤트 바인딩 섹션에 템플릿 명령문이 표시됩니다. src/app/app.component.html Delete hero 템플릿 명령문은 또다른 측면을 가지고 있습니다. 그것은 사용자 동작에서 응용프로그램 상태를 업데이트하는 방법입니다.이벤트에 응답하는 것은 Angular의 "단방향 데이터 흐름"의 또 다른 측면입니다. 이번 이벤트 루프가 진행되는 동안 어디에서든지 자유롭게 변경할 수 있습니다.템플릿 표현식과 마찬가지로 템플릿 명령문은 자바 스크립트처럼 보이는 언어를 사용합니다. 템플릿 명령문 구문 분석기는 ..
-
02 템플릿 구문 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:55
템플릿 구문Angular 응용프로그램은 사용자가 보고 뭘 할 수 있는지 관리합니다. 컴포넌트 클래스 인스턴스 와 사용자 지향 템플릿의 상호 작용을 통해 이를 수행합니다.model-view-controller (MVC) 또는 model-view-viewmodel (MVVM)을 사용하여 얻은 컴포넌트/템플릿 이중성에 익숙 할 수도 있습니다. Angular에서 컴포넌트는 컨트롤러/뷰 모델의 일부이며 템플릿은 뷰를 나타냅니다.이 페이지는 Angular 템플릿 언어에 대한 포괄적인 기술 참조입니다. 템플릿 언어의 기본 원리를 설명하고 문서의 다른 부분에서 발생할 수있는 대부분의 구문을 설명합니다. 템플릿의 HTMLHTML은 Angular 템플릿의 언어입니다. 거의 모든 HTML 구문은 유효한 템플릿 구문입니다. ..