본문 바로가기

AngularJS

10. <select> 요소 사용법 ◈ 요소 사용법 - ng-model : 바인딩 대상이 되는 모델명 - name : 폼에서 사용할 이름 - ng-required : 필수 입력 여부 - ng-options : 옵션을 나타내기 위한 별도의 표현식 - 배열 데이터일 때 label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array - 객체 데이터일 때 label for (key, value) in object select as label for (key, value) in object label group by group for (key, .. 더보기
09. 체크박스 타입 사용법 ◈ 체크박스 타입 사용법 - ng-model ; 바인딩 대상이 되는 모델명 - name : 폼에서 사용하는 이름 - ng-true-value : 체크박스를 체크했을 때 바인딩된 모델에 대입할 값(기본값은 true) - ng-false-value : 체크박스의 체크를 해제했을 때 바인딩된 모델에 대입할 값(기본값은 false) - ng-required : 필수 입력 여부 - ng-chang : 사용자의 입력이 발생할 때 실행될 표현식 예제)http://jsfiddle.net/kshmc/oz0g68ge/1/ 더보기
08. 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자) - 폼 양식을 서버로 제출하기 전에 사용자가 입력한 값을 검증할 때가 종종 있다. "꼭 입력해야 할 값을 빼먹지 않았는지", "우편번호 형식에 맞는지, " 날짜 형식이 yyyy/mm/dd가 맞는지" 와 같은 경우다. 이렇게 사용자가 입력한 값이 유효한 값으로 채워졌는지 검사하는 것을 폼 양식 유효성 검증(Form Validation)이라 한다. -AngularJS는 유효성 검증을 손쉽게 할 수 있게 폼 양식 유효성 검증과 관련된 지시자를 제공한다. 1. 텍스트 타입 사용법 1) ng-model : 바인딩 대상이 되는 모델명 2) name : 폼에서 사용하는 이름 3) ng-required : 필수 입력 여부 4) ng-minlength : 입력박스에 입력되는 값의 최소 글자 수 5) ng-maxlengt.. 더보기
07. 비즈니스 로직 처리를 위한 템플릿(컨트롤러 지시자) 1. 컨트롤러 지시자 - AngularJS는 템플릿의 특정 부분을 처리하는 자바스크립트 함수를 선언할 수 있다. - 데이터를 반복해서 출력하거나 조건에 따라 출력하는 코드는 모두 템플릿에 작성하면 된다. 하지만 데이터를 가공하거나 서버에 데이터를 저장하고 서버로부터 데이터를 불러오는 등의 어플리케이션 로직에 해당하는 코드는 자바스크립트로 작성해야 한다. 그래서 템플릿의 특정 부분을 처리하는 자바스크립트 함수 이름을 템플릿에 명시해야 한다. 이러한 함수를 컨트롤러 함수라고 하고 ng-controller 지시자를 이용해 템플릿이 컨트롤러 함수를 참조할 수 있게 해준다. ◈ ng-controller 사용... - 여기서 표현식은 전역적으로 접근할 수 있는 자바스크립트 함수의 이름 또는 모듈로 등록된 컨트롤러 .. 더보기
06. 조건적인 데이터 표현을 위한 템플릿(조건 지시자) 1. ng-switch ◈ ng-switch의 사용법 ... - ng-show와 ng-hide 지시자는 ng-if지시자와 마찬가지로 표현식 결과값(참/거짓)에 따라 해당 요소를 화면에 보여주거나 숨긴다.ng-show 지시자는 참일 때 요소를 보이게 하고 거짓일 때 숨기며, ng-hide 지시자는 반대로 참일 때 숨기고 거짓일 때 보이게 한다.실제로 요소자체는 그대로이지만 CSS의 display 속성의 값이 참일 때 block 이 되고, 거짓일 때 none이 된다. 더보기
05. 반복적인 데이터 표현을 위한 템플릿(반복 지시자) 1. 반복 지시자1) 변수명은 주어진 배열의 요소를 반복문 내부에서 참조할 때 사용된다. 표현식은 $scope 내의 배열과 같은 순환할 대상을 가린킨다. 2) 자바스크립트 객체같은 데이터를 순환할 때 사용한다.key 변수명은 반복문 내부에서 객체의 key를 참조할 변수명이고 value 변수명은 참조하는 value의 변수명이다. 3) 배열 요소와 생성되는 DOM 요소를 연결할 때 사용하는 고유한 값을 지정할 수 있다.Track by를 별도로 작성하지 않으면 AngularJS는 동일하지 않은 값에 $$hashKey 속성을 추가하여 DOM 요소와 연결할 때 사용한다.그리고 var items=[1,1]; 과 같은 동일한 값을 ng-repeat으로 표현하려고 하면 item in item track by $inde.. 더보기
04. AngularJS의 템플릿 시스템 - 템플릿 시스템 : 화면과 데이터의 분리를 용이하게 함 1) 템플릿의 이해 - 브라우저에서 사용자가 보는 화면을 그리려면 HTML 문서를 작성해야 한다. 작성한 HTML 문서를 웹서버에 배포해 두면 사용자의 웹 브라우저가 URL을 받아 서버로 요청을 보내고 웹 서버는 응답으로서 요청한 HTML문서를 보내준다. 웹 어플리케이션도 마찬가지로 HTMLL 문서를 작성해야 한다. 하지만 한번 작성하면 오랫동안 바뀌지 않는 웹 페이지와는 다르게 브라우저의 요청이 있을 때마다 주어진 데이터에 따라 내용이 바뀌어야 한다. 2)템플릿 작성 시 사용되는 AngularJS의 기능 - 지시자 : 기본 HTML을 확장하거나 새로 추가한 요소나 속성이다. ng-repeat, ng-app 등이 지시자에 해당한다. 또한 사용자가 .. 더보기
03. AngularJS 부트스트랩 1. AngularJS 부트스트랩- AngularJS는 단순한 HTML 페이지를 AngularJS 웹 어플리케이션으로 동작하게 하기 위한 프로세스가 존재한다.이를 AngularJJS 부트스트랩이라고 할 수 있다. AngularJS 부트스트랩은 크게 ng-app 지시자를 이용한 부트스트랩과 angular.bootstrap 메서드를 이용한 부트스트랩으로 나눌 수 있다. 1) ng-app을 통한 부트스트랩ng-app은 AngularJS 웹어플리케이션의 범위를 제한한다. ng-app 지시자를 추가한 노드가 루트 노드가 되며 하위 노드들은 AngularJS의 기능을 사용할 수 있게 된다.주의할 사항은 ng-app 지시자는 해당 페이지에서 한 번만 사용해야 한다는 점이다. AngularJS 부트 스트랩 : 최초에 .. 더보기

티스토리툴바