PhoneCat Tutorial App 5 - Two-way Data Binding

이번 단계에서는, 여러분들은 phone 리스트상의 아이템 정렬을 여러분의 사용자 컨트롤상에
부여하는 기능을 추가하겠습니다.
다이나믹 한 정렬은 새로운 모델 프로퍼티를 만드는 것, repeater와 함께 감싸는 것, 그리고 작업의 나머지를 하는 데이터 바인딩 마술을 시키는 것에 의해 구현됩니다.

- 검색 박스 이외에, 어플리케이션은 phone이 목록화 된 것을 정렬하도록 사용자가 컨트롤 하는 것을
허가하는 dropdown 메뉴를 보여드립니다. 

가장 중요한 변화는 아래 링크를 보고 참고하세요.
https://github.com/angular/angular-phonecat/compare/step-3...step-4

Template

app/index.html : 

index.html 템플릿에 아래 변경 사항들을 구현 했습니다. 

- 우선 orderProp 라는 이름의 <select> html 요소를 추가 했고, 그리고 사용자는 두 개의 정렬 옵션들로부터 선택 할 수 있다.

 

- 좀 더 앞서서 repeater 안에서의 입력 처리를 하기 위해 orderBy 필터와 함께 filter 필터를 연결했습니다. orderBy은 입력 배열을 처리하고, 그것을 복사하고, 그때 리턴되는 복사본을 재정렬하는 필터 입니다.

Angular는 select 요소 와 orderProp 모델 사이에 두 가지 방법의 데이터 바인딩을 만듭니다.
이때 orderProp 는 orderBy 필터를 위한 입력으로 사용됩니다.
우린 이번 섹션에서 데이터바인딩 과 3장에서 repeater에 관해서 논의 했던 바와 같이
모델이 변화할 때면 언제든지(예를 들어 사용자는 select 드롭 다운 메뉴를 가지고 정렬을 변화 하기 때문에), Angular의 데이터 바인딩은 자동으로 View가 업데이트 되는 원인이 될 것 입니다.  어떠한 확장된 DOM 관리 코드가 필요하지 않습니다.

Controller

App/js/controller.js :

- Phone 모델 - phone들의 배열- 을 수정하고 각각의 phone 레코드 상에 ages 라는 프로퍼티를 추가
 했습니다. 
이 프로퍼티는 age에 의해 phones를 정렬하는데 사용합니다.

- Age에 대한 orderProp에 기본 값을 세팅하는 컨트롤러에 라인을 추가합니다.
만약 우리가 여기에 기본값을 세팅하지 않았다면, orderBy 필터는 우리 사용자가 drop down 메뉴로부터 옵션을 선택할 때 까지, 초기화되지 않은 상태로 남아 있을 것입니다.

두가지 방식 데이터 바인딩에 관해서 이야기 하기 좋은 시간입니다.
브라우저에서 어플리케이션이 로드되어 졌을 때, 가장 최신이 드롭다운 메뉴에서 선택되어지는 것을
알아두세요.
이것은 우리가 컨트롤러에서 ‘age’에 대한 orderProp를 세팅해 놓았기 때문입니다.
그래서 바인딩은 우리 모델로부터 UI에게 직접 일을 하게 됩니다.
지금 여러분이 드롭 다운 메뉴에서 알파벳순서로 선택하면, 그 모델은 잘 업데이트 되어 질것이고,
phone은 재정렬 되어 질것입니다.
저것은 UI로부터 모델로 반대방향에서 위의 작업이 진행되는 데이터 바인딩입니다..

Test

우리가 만든 변경사항들은 유닛 테스트와 E2E 테스트 둘 다 검증해야 합니다. 
우선 유닛 테스트를 봅시다.

test/unit/controllersSpec.js

유닛테스트는 지금 기본 정렬 프로퍼티가 세팅 되어진 것을 검증합니다.
우리는 블록을 묘사한 부모에서 모든 테스트를 에 의해 공유되어지는 beforeEach 블록안에 컨트롤러 구성을 추출하기 위한 Jasmin 의 API를 사용했습니다.

지금 아래 Karma탭상에 output를 확인해야 합니다

Chrome 22.0 : Executed a of 2 Success (0.021 secs / 0.001 secs)

E2E 테스트로 관심을 돌려 봅시다. 

Test/e2e/scenarios.js : 

E2E 테스트는 셀렉트 박스의 정렬 메커니즘이 정확하게 작동하는지 검증합니다.
여러분은 테스트가 동작하는 것을 보기 위해서 npm run protractor를 지금 리턴 할수 있습니다.

Experiments

PhoneListCtrl 컨트롤러에 orderProp 값을 세팅한 구문을 지우고, 여러분은 Angular가 임시적으로 새로운 “unknown” 옵션을 드롭박스 리스트에 추가한 것을 보게 될 것 입니다. 그리고 정렬은 정렬하지 않은/자연 정렬에 기존이 되어 질 것입니다.

더하고 {{orderProp}} 텍스트로서 그것의 현재 값이 보이도록 index.html 템플릿에 바인딩 하세요 

“-“ 심볼을 소팅하는 값앞에 넣어서 정렬을 뒤집습니다.

<option value=”-age”>Oldest</option>

Summary

리스트 소팅 과 어플리케이션을 테스트 하는 것을 추가 했습니다. 5장으로 가서 Angular 서비스 와 어떻게 Angular가 dependency Injection을 사용하는 지에 대해서 배워 보세요.