Angular Material로 tiqav 클라이언트를 만들었습니다.

Angular Material의 사용한 적이 없는 컴포넌트로 플레이하기 위해 만들어 보았습니다.
tiqav(부드럽게 화상 검색 사이트?)의 프런트 엔드입니다.
매우 고맙게도 tiqav에서는 각종 API가 공개되어 있으므로 그쪽을 사용하게 했습니다.
Twitter나 Instagram을 사용해 보는 것도 생각했습니다만, 귀찮은 인증을 필요로 하지 않는 것나 API의 사양이 심플한 일도 있어 이번은 tiqav의 API를 사용했습니다.

하지만

참고: 사용하는 브라우저에 따라 혼합 콘텐츠 경고가 표시됩니다.
※ Google 크롬의 경우는 주소바에 표시되는 방패 마크로부터 혼재 콘텐츠의 허가를 실시하는 것으로 열람 가능합니다.

개요

본가의 tiqav에 있는, 랜덤 표시와 검색 외, API가 준비되어 있던 신착 투고(newest) 화면도 만들었습니다.
화면 목록입니다.

Search (검색 결과보기)

Newest (새로운 게시물 표시)

Random (무작위로 얻은 게시물 표시)

위의 3개는 썸네일 리스트를 표시하는 화면으로 되어 있고, 이미지의 상세나 관련 이미지를 표시하는 Dialog는 모든 화면에서 공통의 컴퍼넌트로 구현하고 있습니다.

사용 된 (Angular Material) 구성 요소 라이브러리

이번에 처음 사용한 Angular Material의 컴포넌트나 도입한 라이브러리 등을 구현한 부분과 함께 몇 가지 소개하고 싶습니다.

Autocomplete (AngularMaterial의 구성 요소)

navbar에 있는 검색 양식의 제안 기능에 이 구성요소를 사용했습니다.
tiqav는 프리워드에서 태그 목록을 검색하는 API를 제공하므로 이를 검색 단어의 검색에 유용합니다.
또한 Autocomplete 구성 요소와 직접 관련이 없지만 rxjs debounceTime라는 운영자가 서제스트 기능을 구현할 때 매우 유용했습니다.

Dialog (AngularMaterial의 구성 요소)

이미지 목록 화면에서 이미지를 선택할 때 열리는 Dialog는 이 구성 요소를 사용했습니다.

Tabs (AngularMaterial의 구성 요소)

탭의 내용에 대응하는 URL의 동기화 방법에 관해서는, 별도 블로그에 기사를 썼습니다.
htp //다이키오 jm. 하테나 bぉg. 코m/엔트리/2017/09/10/192714

ng-lazyload-image (Angular 라이브러리)

Lazy image loader for Angular ≥ v2
htps : // 기주 b. 코 m / t 조 s 또는 r / n g ぁ zy ぉ 아 d

이미지의 Lazyloade 라이브러리입니다.
이번에 사용한 tiqav의 API에서는 한 번에 얻는 이미지의 수가 30장으로 제한되어 있기 때문에 스크롤 조작에 대해서는 고려하지 않았지만,
이미지를 로드하는 동안 순차적으로 파라파라가 표시되어 화면이 깜박이는 것을 방지하는 것이 편리했습니다.

ngx-clipboard

A wrapper directive for clipboard.js
htps : // 기주 b. 코 m / 마사 m / n gx-c ぃ p 보어 rd

clipboard.js Angular wrapper 라이브러리입니다.
이미지 상세 모달에서 이미지의 임베디드 링크 등을 복사할 때 사용했습니다.

소감

angular-cli + TypeScript로 프런트 엔드 개발, 상당히 재미 있습니다.
몇 달 전까지 웹 프런트 엔드 경계는 별로 모르고, 어둠이 깊은 인상을 안고 있었습니다만, angular-cli가 번거로운 것을 정리해 주고 있는 일도 있어 지금까지 Angular 자체에 괴로움 느낌은 거의 없습니다.
Angular Material은 아직 사용할 수 있는 컴포넌트가 한정되어 있는 경우도 있어, Bootstrap등에 익숙해져 있는 몸으로부터 하면 아쉬움이 있는 인상이었습니다. angularjs 1.x계의 Angular Material에서는 사용할 수 있는 컴포넌트나 API의 수가 조금 많아서 앞으로 기대합니다.

출처