본문 바로가기

AngularJs

(14)
[Angular.js][앵귤러js] AngularJS 13일차 [Modal, Firebase, database, delete, 모달,데이터베이스, 삭제] 안녕하세요 슬릭데브 입니다 ^^ 데이터베이스랑 연결하고 나니까 재미있어집니다! 이번글에서는 선택된 데이터를 삭제 해보는것을 배워보겠습니다. CRUD 에서 D에 해당하는 Delete 입니다. 마찬가지로 예제를 통해서 배워봅시다! 일단 저번과 같이 메뉴를 선택하면 Modal 이 나옵니다.Modal에서 삭제버튼을 추가해봅시다. 아래 화면처럼! 메뉴판에 치킨만 있으니까 치킨이 먹고 싶어지네요 ㅠㅠ 삭제버튼을 누르면 클릭된 메뉴가 데이터베이스에서 지워져야 합니다.그리고 메인화면에서도 지워지고 Modal 창도 닫혀야합니다. searchrestaurant.html 여기까지는 달라진 부분이 파일 경로 하나뿐입니다! Modal 코드 부분에서 삭제 버튼을 추가합니다. 보시다시피 button class 가 danger 로 ..
[Angular.js][앵귤러js] AngularJS 12일차 [Modal, Firebase, database, update, 모달,데이터베이스, 수정, 업데이트] 안녕하세요 슬릭데브 입니다 ^^ 오늘은 더위가 풀리고 시원한 날씨네요! 저번 글에서는 데이터를 Create 하는 방법을 배웠습니다.CRUD (Create, Read, Update, Delete) 중에서 Read 와 Create 을 순서대로 해봤습니다. 그럼 오늘은 Update를 배워보겠습니다.마찬가지로 예제를 통해서 배워보겠습니다! 메뉴화면에서 수정할 메뉴가 있으면 클릭을 하는게 자연스럽겠죠.클릭을 하면 작은 창이 나와서 메뉴 이름과 가격을 수정할 수 있어야 합니다. 아래 화면과 같이 나왔으면 합니다. 이런걸 Modal 이라고 합니다.Dialog 랑 Modal 이 비슷한 개념이긴 한데Modal은 입력값이나 닫기버튼을 꼭 실행해줘야 메인 화면에서 작업을 할 수 있습니다.Dialog는 그냥 팝업 창이라서 무..
[Angular.js][앵귤러js] AngularJS 11일차 [Firebase, database, create, 데이터베이스, 쓰기, 생성] 안녕하세요 슬릭데브 입니다 ^^ 제가 아직 직업이 없어서 4월에 준비하느라 글을 못올렸습니다.. 죄송합니다.한국에서 직업을 구할때 자소서를 쓰는데 너무 어렵네요.. 여러분 우리 힘내죠!! 저번 글에는 Firebase 데이터베이스와 연결해서 데이터베이스 있는 정보를 읽어왔습니다.이번 글에서는 데이터베이스에 쓰는 방법을 알아보겠습니다. CRUD에서 C 부분에 해당되는 Create (write) 을 하겠습니다. 오늘도 예제를 통해서 배워봅시다. 메뉴 이름과 가격을 입력하려면 버튼이 있어야합니다.입력 버튼과 취소 버튼을 아래 화면처럼 만들어 봅시다. HTML 파일에서 입력 버튼과 취소 버튼을 만들고, 마우스로 클릭하면 js 파일에 있는 function 들로 처리를 해줘야 합니다.그다음은 입력 버튼을 누르면 메뉴..
[Angular.js][앵귤러js] AngularJS 10일차 [Firebase, database, read, 데이터베이스, 읽기] 안녕하세요 슬릭데브 입니다 ^^ 요즘 많이 바뻐져서 Angularjs를 1주정도 못배웠습니다. 오늘은 그래서 중요한걸 배워보려고 합니다. 데이터베이스와 연결을해서 데이터 CRUD ( Create, Read, Update, Delete)를 하려고 합니다.데이터 생성, 읽기, 수정, 삭제중에서 읽기부터 해보겠습니다. 제가 자주쓰던 데이터베이스가 페이스북사의 Parse.com 이였는데 2017년1월부터 서비스 종료를 한다고 합니다.따로 SQL 서버 만들어서 해볼수도 있지만 back-end를 책임져줄수 있는 다른 데이터 베이스를 찾아봤습니다. 그중에서 Google의 Firebase를 사용해보려고 합니다.Firebase는 JSON 형식의 데이터로 통신을 하네요. 그럼 메뉴를 데이터베이스에 저장하고 읽어봅시다.Fi..
[Angular.js][앵귤러js] Concept, 개념 이미지 안녕하세요 슬릭데브 입니다 ^^ Angular.js 를 이해하기 쉽게 여러 이미지들이 있습니다. 이 글은 이해하기 쉽고, 보기에 이쁜 이미지들만 올릴 예정입니다. 혹시 더 좋은 이미지 있으시면 저랑 공유합시다! Angular concept (개념도) Angular Module (앵귤러 모듈)
[Angular.js][앵귤러js] AngularJS 9일차 [View, $routeprovider, 뷰, 라우트프로바이더] 안녕하세요 슬릭데브 입니다 ^^ 주말부터 월요일까지 데이터베이스와 연결하는 방법을 올리려고 생각해봤는데그 전에 배워야 할게 남아있어서 9일차 내용을 이제 올리게 되었습니다. 데이터베이스와 연결편은 이번 주말에 올릴 예정입니다. 오늘은 View, $routeProvider, Scope 에 대해서 더 자세히 배워보겠습니다.Angular.js 는 Single Page Application (SPA 앱) 을 만들수 있다는 장점이 있지만 여러 page 들을 만드려면 어떡해 해야하는지 배워보겠습니다.ng-view : 화면에서 다른 page를 삽입할 장소를 만들어 줍니다.ng-template : Script 에서 HTML view 를 만들어줍니다. "id" 속성이 있는데 $routeProvider가 id를 이용해서 ..
[Angular.js][앵귤러js] AngularJS 8일차 [Forms, Events, 폼,이벤트] 안녕하세요 슬릭데브 입니다 ^^ 오늘은 앵귤러 forms(폼)에 사용되는 이벤트를 배워보겠습니다.나중에 로그인 화면 만들때 중요한 부분입니다. 보통 버튼이 있으면 누르게 되고 그 다음엔 어떡해 해야할지 궁금했는데 이벤트를 통해서 배울예정입니다. Eventsng-click : 클릭시 작동됩니다.ng-dbl-click : 더블 클릭시 작동됩니다.ng-mousedown : 마우스를 꾸욱 누르고 있으면 작동됩니다.ng-mouseup : 마우스를 눌렀다가 때면 즉, 클릭이 끝날때 작동됩니다.ng-mouseenter : 커서를 해당부분에 올려놓으면 작동됩니다.ng-mouseleave : 커서가 해당부분에서 나가면 작동됩니다.ng-mousemove : 마우스가 해당부분에서 움직일때마다 작동됩니다.ng-mouseove..
[Angular.js][앵귤러js] AngularJS 7일차 [Module, 모듈] 안녕하세요 슬릭데브 입니다 ^^요즘 밖에 나가기 좋은 날씨입니다. 미세먼지만 빼고... 오늘은 모듈에 대해서 배워보려고 합니다.그리고 코드 분할방법을 배워야죠. 코드를 분할을 하면 정리도 되고 유지 및 보수를 할 수 있습니다.특히 다른 사람한테 코드를 넘겨줄때 그 코드를 받은 분이 좋아하실거에요. Module (모듈)service, controller, application 파일들을 분리하고 파일 이름을 module.js 라고 만듭니다. 예를 들면, application module (애플리케이션 모듈) 은 애플리케이션 컨트롤러를 초기 설정해줍니다.Controller module (컨트롤러 모듈)은 controller (컨트롤러) 를 정의합니다.Application ModulemainApp.js var ..