템플릿 기반 폼과 반응형 폼의 실질적인 차이점은 무엇입니까?
Angular2 새 Forms API에 대해 읽어봤는데 양식에 대한 두 가지 접근 방식이 있는 것 같습니다. 하나는 템플릿 기반 양식이고 다른 하나는 반응형 또는 모델 기반 양식입니다.
저는 구문의 차이가 아니라(분명히) 실제적인 용도의 차이, 그리고 서로 다른 시나리오에서 어떤 접근법이 더 많은 이익을 가져다 주는지 알고 싶습니다.또한, 하나를 선택하는 것이 다른 하나를 선택하는 것보다 성과가 있습니까?만약 그렇다면, 왜죠?
템플릿 기반 양식 특징:"
- 사용하기 편리함
- 단순한 시나리오에 적합하고 복잡한 시나리오에 실패함
- 각도와 유사제이에스
- 양방향 데이터 바인딩(사용)
[(NgModel)]구문) - 최소구성요소코드
- 양식 및 해당 데이터의 자동 추적(Angular에서 처리
- 유닛 테스트는 또 다른 과제입니다.
반응형 양식 특징:
- 더 유연하지만 많은 연습이 필요함
- 복잡한 시나리오 처리
- 데이터 바인딩이 수행되지 않음(대부분의 개발자가 선호하는 불변 데이터 모델)
- 더 많은 구성 요소 코드와 더 적은 HTML 마크업
- 다음과 같은 반응형 변환이 가능합니다.
- 종료 시간을 기준으로 이벤트 처리
- 변경될 때까지 구성 요소가 고유할 때 이벤트 처리
- 동적으로 요소 추가
- 간편한 장치 테스트
다음은 데보라 K(데보라 쿠라타)가 잘 설명한 템플릿 구동형과 반응형의 비교 요약입니다.
코드, 전략 및 사용자 경험에 대한 논의라고 생각합니다.
요약하자면, 우리는 작업하기 더 쉬운 템플릿 기반 접근 방식에서 더 많은 제어력을 제공하기 위한 반응형(모델 기반 접근 방식)으로 변경합니다.HTML(설계/CSS 팀이 여기서 작업할 수 있음)과 구성 요소의 비즈니스 규칙(각도/js 전문가 구성원) 간의 디커플링을 활용하여 테스트 가능한 형태를 개선하고 반응형 변환과 같은 기능으로 사용자 경험을 개선합니다.상관된 유효성 검사를 수행하고 복잡한 시나리오를 런타임 유효성 검사 규칙 및 동적 필드 복제로 처리합니다.
이 기사는 이에 대한 좋은 참조 자료입니다. Angular 2 Forms - Template Driven and Model Driven Attachments
반응형:
- 재사용 가능,
- 더 튼튼함,
- 테스트 가능,
- 더 확장 가능한
템플릿 기반 양식:
- 추가하기 쉽습니다.
- 확장성이 떨어집니다.
- 기본 양식 요구 사항
요약하자면, 앱에 양식이 매우 중요하거나 앱에서 반응형 패턴이 사용되는 경우 반응형 양식을 사용해야 합니다.그렇지 않으면 로그인과 같은 양식에 대한 기본적이고 간단한 요구 사항이 앱에 있는 경우 템플릿 기반 양식을 사용해야 합니다.
반응형 양식과 템플릿 기반 양식의 차이를 가장 쉽게 알 수 있는 방법
더 많은 제어와 확장성을 원한다면 리액티브 폼을 사용할 수 있습니다.
템플릿 기반 양식:
양식 모듈을 사용하여 가져오기
ngModel 지시문으로 작성된 양식은 DOM이 있어야 하므로 엔드 투 엔드 테스트에서만 테스트할 수 있습니다.
양식 값은 뷰 모델링 모델의 두 가지 다른 위치에서 사용할 수 있습니다.
필드에 점점 더 많은 검증자 태그를 추가하거나 복잡한 교차 필드 검증을 추가하기 시작하면 양식의 가독성이 저하됩니다.
반응형:
일반적으로 대규모 애플리케이션에 사용 가능
복잡한 검증 로직은 실제로 구현이 더 간단합니다.
ReactiveForms 모듈을 사용하여 가져오기
양식 값은 보기 모델과 양식 그룹의 두 가지 다른 위치에서 사용할 수 있습니다.
간편한 유닛 테스트: 클래스를 인스턴스화하고 양식 컨트롤에 일부 값을 설정하고 양식 전역 유효 상태 및 각 컨트롤의 유효성 상태에 대해 어설션을 수행하는 것만으로 이 작업을 수행할 수 있습니다.
사후 대응 프로그래밍을 위한 관찰 가능 항목 사용
예: 암호 필드와 암호 확인 필드는 동일해야 합니다.
사후 대응 방식: 기능을 작성하여 FormControl에 연결하기만 하면 됩니다.
템플릿 기반 방식: 지시를 정의하고 어떻게든 두 필드의 값을 전달해야 합니다.
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
언급URL : https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms
'programing' 카테고리의 다른 글
| Android용 Eclipse의 관리 오류:configChanges (0) | 2023.05.21 |
|---|---|
| Swift에서 프로그래밍 방식으로 번들 식별자를 가져오시겠습니까? (0) | 2023.05.21 |
| Windows 2012 Server에서 Azure 배포가 Windows 2008 Server보다 느린 이유 (0) | 2023.05.16 |
| 문자열을 개체로 변환MongoDB의 ID (0) | 2023.05.16 |
| 유성 문서의 메시지 수 예제는 어떻게 작동합니까? (0) | 2023.05.16 |