안녕하세요 슬릭데브 입니다 ^^
데이터베이스랑 연결하고 나니까 재미있어집니다!
이번글에서는 선택된 데이터를 삭제 해보는것을 배워보겠습니다.
CRUD 에서 D에 해당하는 Delete 입니다.
마찬가지로 예제를 통해서 배워봅시다!
일단 저번과 같이 메뉴를 선택하면 Modal 이 나옵니다.
Modal에서 삭제버튼을 추가해봅시다. 아래 화면처럼!
메뉴판에 치킨만 있으니까 치킨이 먹고 싶어지네요 ㅠㅠ
삭제버튼을 누르면 클릭된 메뉴가 데이터베이스에서 지워져야 합니다.
그리고 메인화면에서도 지워지고 Modal 창도 닫혀야합니다.
searchrestaurant.html
여기까지는 달라진 부분이 파일 경로 하나뿐입니다!
Modal 코드 부분에서 삭제 버튼을 추가합니다.
보시다시피 button class 가 danger 로 변경됐는데 이것은 빨간색 버튼을 의미합니다.
그리고 ng-click 에 delete() function을 호출합니다.
이 말은, controller 에서도 delete function 을 만들어야 합니다.
mainApp.js
여기까지는 저번글과 동일합니다!
빨간줄 부분은 꼭 확인해주세요!
오타 하나때문에 시간을 너무 많이 소모했어요 ㅠㅠ
윗 부분이 delete function 입니다.
현재 선택된 메뉴를 itemToDelete 이라는 변수에 firebaseObject형식으로 저장합니다.
그 후, AngularJS 에서 제공하는 $remove 를 호출하면 firebase에서 사라집니다~ Gone Forever!
삭제 후에는 modal 숨기기를 밑에다가 썼습니다.
이유는 에러가있을 경우에도 modal을 숨겨주는게 좋을듯 합니다.
그래서 update function에도 고쳐줘야합니다!
여기까지 AngularJS 와 Firebase 연결후 CRUD function 이였습니다.
이제부터 응용을 해봐야 할때가 왔습니다.
다음편에서는 User 관리를 해봅시다.
로그인 화면도 만들어보구요!
질문이나 더 배워보고 싶은부분을 댓글로 남겨주세요!!
요즘에 직장을 구하느라 정신이 없는데 열심히 봐주셔서 감사합니다.
//슬릭데브