PhoneCat Tutorial App 9- Filters

이번 장에서는 여러분 자신의 커스텀 디스플레이 필터를 어떻게 만드는지를 배울 것입니다.

- 이전 장에서는, 세부 페이지가 정확한 폰 기능들이 표현되던지 그렇지 않은지를 나타내는 한쪽의 true 또는 false이 보여졌습니다. True를 위해 ✓ 그리고 false을 위해 ✘ Glyphs 안에 그 텍스트 문자열들을 컨버트 하기 위해 일반 필터를 사용했습니다. 

필터 코드는 무엇과 같은지 보도록 합시다.

Custom Filter

새로운 필터를 만들기 위해서, phonecatFilter 모듈을 만들 것이고, 
이 모듈과 함께 여러분의 커스텀 필터를 등록할 것입니다.

app/js/filters.js

 

우리 필터 이름은 “checkmark” 입니다.
input 은 true인지 false인지를 평가하고 우리가 true 또는 false을 표현하기 위해 선택한 두 개의 유니코드 중에
 하나를 리턴합니다.
이제 우리 필터는 준비가 되었습니다. phonecatFilter 모듈은 우리 메인 phonecatApp 모듈에 하나의 의존성으로써 등록하는 것이 필요합니다.

App/js/app.js

Template

필터 코드가 app/js/filter.js 파일안에 살아있는 때문에,
이 파일을 우리 레이아웃 템플릿에 포함시키는 것이 필요합니다.

App/index.html

Angular 탬플리트안에서 필터를 사용하는 구문은 아래와 같습니다. 

{{ expression | filter }}

폰 상세 템플릿에 해당 필터를 반영합시다.

Test

필터들, 어느 다른 컴포넌트들과 같이 테스트 되어지고, 이 테스트들은 작성하기 매우 쉽다.

Test/unit/filtersSpec.js : 

우리 필터 테스트 실행 전에 반드시 beforeEach(module(‘phonecatFilters’)) 를 호출 해야 합니다.
이 호출은 테스트 실행을 위한 인젝터안에 phonecatFilter 모듈이 로드되어 집니다.

우리가 테스트 하기 원하는 필터에 접근하기 위한 헬퍼 함수 , inject(function(checkmarkFilter){…}를 우리는 호출하는 것을 알아두세요.
Angular.mock.inject() 를 보세요 : 
https://docs.angularjs.org/api/ngMock/function/angular.mock.inject

접미어 ‘Filter’는 주입되어 질 때 여러분의 필터이름에 덧붙여지는 것을 알아 두세요.
윤곽을 잡는 필터 가이드 파트를 보세요.
https://docs.angularjs.org/guide/filter#using-filters-in-controllers-services-and-directives

Karma 탭에서 아래와 같은 결과를 볼 수 있게 됩니다.

Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)

Experiments

빌트인 Angular 필터들과 함께 실험을 해보고 index.html 에 아래 내용의 바인딩을 추가해봅시다.

- {{ “lower cap string” | uppercase }}

- {{ {foo: “bar” , baz:23} | json }}

- {{ 1304375948024 | date }}

- {{ 1304375948024 | date:”MM/dd/yyyy @ h:mma” }}

또한 우린 input 요소와 함께 모델을 생성 하고 필터된 바인딩과 함께 결합 할 수 있습니다.

index.html에 아래 내용을 추가하세요.

<input ng-model=”userInput”> Uppercase : {{ userInput | uppercase }}

Summary

자 커스텀 필터를 어떻게 작성하고 테스트 하는지 배웠고, 10장가서 배우세요 어떻게 우리는 Angular를 폰 상세 페이지를 보다 더 보강하기 위해 사용 할 수 있는지에 대해서.