앵귤러
-
02 템플릿 구문 12앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:11
NgSwitch 디렉티브NgSwitch는 JavaScript switch 문과 같습니다. 스위치 조건에 따라 여러 엘리먼트 중에서 하나의 엘리먼트를 표시 할 수 있습니다. Angular는 선택한 엘리먼트만 DOM에 넣습니다.NgSwitch는 실제로 이 예제에서 볼 수있는 NgSwitch, NgSwitchCase 및 NgSwitchDefault와 같은 세 개의 협력 디렉티브 집합이 있습니다. src/app/app.component.html NgSwitch는 컨트롤러 디렉티브입니다. 스위치 값을 리턴하는 표현식에 바인드 하십시오. 이 예제의 emotion값은 문자열이지만 스위치 값은 모든 유형이 될 수 있습니다.[ngSwitch]에 바인딩하십시오. NgSwitch는 구조 디렉티브가 아니기 때문에 속성 디렉티..
-
02 템플릿 구문 11앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:09
템플릿 입력 변수hero 앞의 let 키워드는 hero라는 템플릿 입력 변수를 만듭니다. ngFor 디렉티브는 부모 컴포넌트의 heroes 프로퍼티에 의해 리턴 된 heroes 배열을 반복하고 매 반복마다 hero를 배열의 현재 항목으로 설정합니다.hero의 속성에 액세스하려면 ngFor 호스트 엘리먼트 내에서 hero 입력 변수를 참조하고 그 하위 엘리먼트 내에서 hero 입력 변수를 참조합니다. 여기서는 보간에서 처음 참조 된 다음 컴포넌트의 hero 프로퍼티에 바인딩으로 전달됩니다. src/app/app.component.html {{hero.name}} Index와 *ngForNgFor 디렉티브 컨텍스트의 index 프로퍼티는 각 반복에서 항목의 0부터 시작하는 인덱스를 리턴합니다. 템플릿 입력 ..
-
02 템플릿 구문 10앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:08
내장 구조 디렉티브구조 디렉티브는 HTML 레이아웃을 담당합니다. 일반적으로 DOM은 호스트 엘리먼트를 추가, 제거 및 조작하여 DOM 구조를 형성하거나 변형합니다.구조 디렉티브에 대한 자세한 내용은 구조 디렉티브 가이드에서 다룹니다.l 별표 (*)로 디렉티브 이름 앞에 붙이는 이유l 를 사용하여 디렉티브에 적합한 호스트 요소가 없을 때 요소를 그룹화l 자신의 구조 디렉티브를 작성하는 방법.l 요소에 하나의 구조 디렉티브 만 적용이 섹션에서는 일반적인 구조 디렉티브에 대해 소개합니다.l NgIf - 조건부로 DOM에 요소를 추가하거나 제거.l NgFor - 목록의 각 항목에 대한 템플릿 반복l NgSwitch - 대체뷰간에 전환하는 디렉티브 집합 NgIfNgIf 디렉티브는 해당 엘리먼트 (호스트 엘리먼트..
-
02 템플릿 구분 09앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:07
내장 디렉티브Angular의 이전 버전에는 70 가지 이상의 내장 디렉티브가 포함되었습니다. 커뮤니티는 더 많은 기여를 했으며, 내부 애플리케이션을 위해 무수한 사설 디렉티브들이 만들어졌습니다.Angular에서 이러한 디렉티브가 많이 필요하지 않습니다. 좀 더 능력 있고 표현력이 뛰어난 Angular 바인딩 시스템을 사용해도 동일한 결과를 얻을 수 있습니다. 다음과 같은 간단한 바인딩을 작성할 때 클릭을 처리 할 수있는 디렉티브를 만드는 이유는 무엇입니까? Save 복잡한 작업을 단순화하는 디렉티브의 이점은 여전히 있습니다. Angular는 많지는 않지만 내장 디렉티브와 함께 제공됩니다. 여러분은 많지는 않지만 자신의 디렉티브를 작성할 수 있습니다.이 절에서는 어트리뷰트 디렉티브 또는 구조 디렉티브로..
-
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. 보간은 많은 경우에 프로퍼티 바인딩에 대한 편리한 대안입니다.데이터 값을 문자열로 표현할 때 하나의 형식을 다른 형식보다 선호하는 기술적 인 이유는 없습니다. 보간법을 선호하는 경우에는 가독성을 높일 수 있습니다. 코딩 스타일 규칙을 수립하고 규칙을 준수하고 현재 작업에 가장 자연스러운 느낌을 주는..