이번스텝에서는 커스텀 filter를 생성하는 방법을 배울 것 입니다.

Live Demo

Code Diff

상세 페이지 중 하나로 이동해 주세요.

앞 스텝에서 상세 페이지에서는 특정 폰 기능 지원여부를 "true" 또는 "false"로 표시했습니다. 여기서는 텍스트 문자열을 특정 문자로 변경하는 커스텀 filter를 사용했습니다. ("true": ✓, "false": ✘) filter 코드를 살펴 보도록 합시다.

아래에서 가장 큰 변화들을 확인 할 수 있습니다.

Custom Filter

새 filter를 생성하기 위해서 phonecatFilters module를 생성하고 이 module 커스텀 filter를 등록 할 것입니다.

app/js/filters.js

filter의 이름은 "checkmark" 입니다. input이 true 또는 false인지 판단하고 true면 \u2713 -> ✓, false면 \u2718 -> ✘를 반환합니다.

이제 phonecat module에 dependency로서 phonecatFilters module를 등록해 주는 것이 필요합니다.

app/js/app.js

Template

filter 코드가 app/js/filters.js 파일에 있기 때문에 layout template에 이 파일이 포함(include)되도록 하는 것이 필요합니다.

app/index.html

Angular template에서는 filter를 사용하는 syntax는 아래와 같습니다.

폰 상세 template에서 filter를 사용해 봅시다.

app/partials/phone-detail.html

Test

다른 component들과 같이 filter들은 테스트 되는 것이 좋고, 이러한 테스트들은 작성하기 쉽습니다.

test/unit/filtersSpec.js

filter 테스트들을 실행하기 전에 beforeEach(module('phonecatFilters'))를 반드시 호출해 주어야 합니다. 이것은 테스트 실행을 위한 injector내에 phonecatFilters module를 로드합니다.

테스트하기 원하는 filter에 접근하기 위해서 inject(function(checkmarkFilter) { ... }) helper 함수를 호출하는 것을 확인할 수 있습니다. angular.mock.inject()를 확인해 주세요.

Karma 탭에서 아래와 같은 결과를 확인 할 수 있을 것입니다.

Experiments

• {{ "lower cap string" | uppercase }}
• {{ {foo: "bar", baz: 23} | json }}
• {{ 1304375948024 | date }}
• {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}