본문 바로가기

전체 글

 (37)
[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 ..
[Angular.js][앵귤러js] AngularJS 6일차 [HTML DOM, Directive, ng-disabled, ng-show, ng-hide, ng-click] 안녕하세요 슬릭데브 입니다.오늘은 어제에 이어서 테이블을 이용하면서 앵귤러 directive들 중에 자주 쓰이는것을 배워보겠습니다. 밑에 앵귤러 directive들은 HTML DOM(document object model)에 앱 데이터를 바인드 시켜줄 수 있습니다.ng-disabled : 현재 컨트롤을 해제합니다.ng-show : 현재 컨트롤을 보여줍니다.ng-hide : 현재 컨트롤을 숨깁니다.ng-click : 앵귤러 클릭 이벤트를 활성화 합니다.아직은 무슨 말인지 잘 모르겠지만 예제를 통해서 배워봅시다.ng-disabled 디렉티브를 HTML 버튼과 바인드 시켜봅시다. 위 그림과 같이 하면 checkbox를 클릭하면 버튼이 해제됩니다. ng-show 디렉티브를 HTML 버튼과 바인드 시켜봅시다. 위..
[Angular.js][앵귤러js] AngularJS 5일차 [Filter, Table, 필터, 테이블] 안녕하세요 슬릭데브 입니다.오늘도 앵귤러를 배워보겠습니다. 질문과 요청사항, 팁, 조언 등등은 댓글로 언제든지 남겨주세요 ^^ 자주 쓰이는 Angular.js의 필터 종류:uppercase : 알파벳 대문자로 텍스트 변경lowercase : 알파벳 소문자로 텍스트 변경currency : 화폐 단위로 텍스트 형식 변경filter : 기준점을 바탕으로 array(어레이)를 필터링 함.orderby : 기준점으로 array(어레이)를 정렬 함.더 많은 필터는 여기에서 보세요: https://docs.angularjs.org/api/ng/filter/filter Angular.js 테이블:테이블 만들때는 HTML 에서와 동일하게 태그를 써주시면 됩니다.다른 방법은 저번에 배웠던 ng-repeat을 사용하면 자동..

티스토리툴바