오늘은 몰랐으면 내일은 알면 된다

페이징 버전 3으로 AngularJS 를 사용해볼 것이다. 그런데 개념이나 코드 자체는 Spring 버전과 별로 다를 게 없기 때문에 자세한 설명을 보려면 아래의 글을 참고하면 좋을 것 같다. 다른 방법이 있을 것도 같지만 기존에 만들어둔 코드를 활용해서 AngularJS 버전으로 바꿔보도록 하겠다. pieth.tistory.com/73 [Spring] 게시판 페이징 1. Page Maker.java 페이징을 정말 수도없이 많이 했는데 사실은 원래 만들어져있던 pager를 활용해서 수정하는 정도였기 때문에 실질적으로 내가 했다고는 볼 수 없었다. 처음 교육기관에서 페이징에 대한 걸 알았 pieth.tistory.com Spring 버전과 동일하게 만들어 줄 것이다. controller 에서의 차이가 있다..

pieth.tistory.com/73 [Spring] 게시판 페이징 1. Page Maker.java 페이징을 정말 수도없이 많이 했는데 사실은 원래 만들어져있던 pager를 활용해서 수정하는 정도였기 때문에 실질적으로 내가 했다고는 볼 수 없었다. 처음 교육기관에서 페이징에 대한 걸 알았 pieth.tistory.com 1에서는 spring에서 페이징 클래스를 사용해서 페이징을 하는 방법에 대해서 포스팅했다. 이번엔 이미 만들어져있는 플러그인을 사용해서 페이징 처리를 하는 방법에 대해서 알아보자. 여기서는 아래의 플러그인을 사용할 것이다. github.com/josecebe/twbs-pagination josecebe/twbs-pagination jQuery pagination plugin (boots..

validation을 앞서 포스팅했던 글에서는 유효성 검사라고 했는데, 여기서는 그냥 검증이라고 제대로 쓰기로 한다. [ Form Validation ] : AngularJS는 client-side 폼 검증을 제공한다. form과 input 필드의 상태를 주시하며, 사용자에게 현재 상태에 대해서 알려준다. 또한, 터치가 되었는지, 수정이 되었는지에 대한 정보도 제공할 수 있다. HTML5 표준속성을 사용하거나, 커스텀 검증 함수를 사용할 수 있다. client-side 검증을 제공한다고 하더라도 완전히 안전한 것은 아니기 때문에, server-side 에서도 검증이 이루어져야한다. [ Required ] : HTML5 속성 중 하나인 required가 붙은 input 필드에는 반드시 값이 채워져야한다. ..

AngularJS에서의 form 은 데이터 바인딩과 input control 값에 대한 유효성 검사를 제공한다. [ Input Controls ] : Input control 은 아래와 같은 HTML 의 input 요소를 말한다. input elements select elements button elements textarea elements [ 데이터 바인딩 ] : ng-model 디렉티브를 사용하여 input control에 데이터 바인딩이 가능하다. ng-model 을 사용하여 애플리케이션에 firstname 이라는 프로퍼티가 생겼다. ng-model 디렉티브는 input controller를 전체 애플리케이션에 연결한다. 따라서 애플리케이션 내의 모든곳에서 사용이 가능하다. First name ..

AngularJS는 자체 HTML 이벤트 지시어를 가지고 있다. 아래의 디렉티브를 사용해서 HTML 요소에 하나 이상의 AngularJS 이벤트 리스너를 추가할 수 있다. ng-blur ng-change ng-click ng-copy ng-cut ng-dblclick ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-paste HTML 이벤트에 덮어씌워지는 것이 아니기 때문에, AngularJS의 이벤트와 HTML 이벤트 모두가 발생한다. [ 마우스 이벤트 ] : HTML 요소 위로 마우스를 움직였을 때 아래와 같은 순서로 이벤트가 발생한..

HTML DOM 튜토리얼로 가기전에, DOM이 뭔지부터 짚어야 하겠다. pieth.tistory.com/68 [JavaScript] HTML DOM 매번 DOM DOM 하는데 그래서 DOM 이 뭔가요? 하면 어,, html 문서 내의 요소 객체요..? 정도밖에 안떠올랐기 때문에 정리를 해두고자 한다. 참고자료 및 출처는 아래와 같다. www.w3schools.com/js/js_htmldom.asp pieth.tistory.com AngularJS는 이러한 HTML DOM에 애플리케이션 데이터를 바인딩하기 위한 몇가지 디렉티브를 가지고 있다. [ ng-disabled 디렉티브 ] : ng-disabled 디렉티브는 HTML 요소의 disabled 속성에 애플리케이션 데이터를 바인딩한다. Click Me! ..

매번 DOM DOM 하는데 그래서 DOM 이 뭔가요? 하면 어,, html 문서 내의 요소 객체요..? 정도밖에 안떠올랐기 때문에 정리를 해두고자 한다. 참고자료 및 출처는 아래와 같다. www.w3schools.com/js/js_htmldom.asp JavaScript HTML DOM JavaScript HTML DOM With the HTML DOM, JavaScript can access and change all the elements of an HTML document. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HT..

: 배열, 또는 객체의 item을 가지고 dropdown 리스트를 만들 수 있다. [ ng-options 을 사용하여 select box 만들기 ] : AngularJS에 정의된 객체나 배열을 가지고 dropdown 리스트를 만들려고 할 때, ng-options 디렉티브를 사용할 수 있다. 뭔가 값을 선택하면 공백은 사라진다. [ ng-options VS ng-repeat ] : ng-repeat을 사용할 수도 있다. {{x}} ng-repeat의 경우에는 배열의 각각의 요소에 대하여 HTML 한 블럭을 반복한다. ng-options의 경우에는 select box의 dropdown 리스트를 option 으로 채우기 위해서 사용된다. [ 어떤 것을 사용해야 할까? ] : 두가지를 비교해서 사용해보도록 하겠..

[ 테이블에 데이터를 표시하기 ] 튜토리얼 11 $http JSON 부분의 데이터를 동일하게 사용한다. {{x.Name}} {{x.Country}} [ CSS 스타일 적용하기 ] 위의 테이블에 스타일을 적용해보자. [ orderBy 필터 적용 ] {{x.Name}} {{x.Country}} [ uppercase 필터 적용 ] {{x.Name}} {{x.Country | uppercase}} [ 테이블 인덱스 표시하기($index) ] {{$index + 1}} {{x.Name}} {{x.Country | uppercase}} [ $even, $odd 활용하기 ] {{x.Name}} {{x.Name}} {{x.Country}} {{x.Country}}

$http는 서버에서 데이터를 읽어들이기 위한 서비스이다. 서버로의 request를 생성하고, response를 반환한다. package com.angular.study; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; @Controll..