본문 바로가기

AngularJS

AngularJS를 이용한 From Validation. 지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다. 아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다. AngularJS를 활용하면 간편하게 유효성 검사를 할 수 있는데, 아래 간단한 예제를 소개한다. User name: Required! Show Example on Plunker. AngularJS에서는 사용자의 입력에 따른 From Validation을 기본적으로 몇가지 제공한다. Attribute Type Detail ngRequired boolean 필수 입력 체크. ngMinlength number 최소길이 설정. ngMaxlength number 최대길이 설정. ngPattern string 패턴설정. 정규표현식 사용. AngularJS에서 Form의 Prope.. 더보기
AngularJS 양방향 데이터 바인딩 AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다. 먼저 jQuery를 사용한 아래 예제를 확인해보자. InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다. HTML 파일. Javascript 파일. $(function(){ $("#txtText").keyup(function() { $("#p").text($(this).val()); }); }); 예제 확인 소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다. 물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수.. 더보기
AngularJS와 jQuery의 간단한 비교.. 요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다. AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고, jQuery는 자바스크립트 Library라고 한다. 예전부터 AngularJS에 대한 궁금증을 가지고 있었는데.. 드디어 시간을 내서 AngularJS에 대해서 공부를 했다. 아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다. 동일한 결과를 가져오는 두가지의 소스이다. 먼저, jQuery를 이용한 방법이다. 먼저, HTML에는 TABLE과, TBODY를 설정했다. 이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다. $(function() { v.. 더보기