이번에는 우리는 ionic 에서 localStorage를 건드려 보겠다. 검객하니 ionic local storage 가 나온다. 사용해보자. AngularJS Service로 하는 편이 가장 좋아 보인다. app.js 뒤에 ionic.utils라는 이름으로 모듈을 추가하자. 그뒤에 app module에 ionic.utils을 추가. angular의 factory을 잘 모르겠다면 검색해보아라. 이제 우리는 내 만화를 추가 하도록 하겠다. 대략 방법은 리스트에서 fab버튼을 추가. 누르면 내만화에 추가, 삭제를 만들면 될 것 같다. 만들어 보자. 일단
<div class="float-button"> <span class="height-fix"> <a class="content" ng-click="add_my_list()" ng-if="!added"> <i class="ion-ios-plus-empty"> </i> </a> <a class="content" ng-click="remove_my_list()" ng-if="added"> <i class="ion-ios-minus-empty"> </i> </a> </span> </div> float을 만들고 css을 .float-button { background-color: #303f9f; opacity: 0.9; color: white; border-radius: 50%; /*border-radius:15% 0 0 0;*/ width: 30px; padding: 25px; font-size: 40px; position: fixed; bottom: 5%; /* Adjust height */ right: 5%; /* Adjust position */ z-index: 1000; } .float-button .height_fix { margin-top: 100%; border: 1px solid red; } .float-button .content { position: absolute; left: 0; top: 50%; height: 100%; width: 100%; text-align: center; margin-top: -20px; color: white; } 로 만들면 fab버튼이 만들어 진다. 이제 여기서 js을
이런식으로 추가하면 완료이다. 일단 change_added을 통해 지금 myList에 현재 만화가 추가 되었는지 안되었는지를 보고, 있다면 remove버튼 없다면 plus버튼을 보이게 한다. 그리고 plus버튼을 누르면 local저장소에서 myList을 가지고 오고 없다면 새로 만든다. 그리고 그뒤에 현재 만화를 추가하고 다시 local에 저장한다. 지우는것도 마찬가지로 하면 완료이다. 이제 여기서 최근 본 만화를 같은 방식으로 만들도록 하자. 비슷한 방식으로 view를 들어가면 자동으로 저장시키면 될 것 같다.
이런걸 추가 한다면 간단히 된다. 이제 이걸로 적당히 페이지만 만들면 된다.
이제 마지막으로 사진을 zoom in, zoom out을 가능하게 하도록 만들겠다. 일단 ionic zoom in 으로 검색을 해본다. 대부분이 ionic scroll을 이용하라고 한다. 한번 적용해 보자. 아마 사진 1개만 확대가 되면서 전체적인 스크롤 기능에 문제가 생긴다. ionic scroll은 1개의 사진에서만 적당하고 많은 사진이 있는 경우에는 적당하지 않다. ionic으로 검색해서 안나온다. 하지만 우리는 ionic이 angular library을 그대로 사용 할 수 있다는 것을 안다. angular pinch zoom을 검색해보자. 꽤 괜찮은 library가 나온다. 이걸 넣어서 하면 될 듯 하다. 적용을 해보았다. 완료.
[출처] http://188.166.233.245/ionic-frameworkro-manhwa-saiteu-eopeul-mandeulgi-3/

