[시작하세요! AngularJS 프로그래밍] 03. AngularJS 부트스트랩, 04. 템플릿 시스템과 데이터 바인딩

03. AngularJS 부트스트랩 내용

http://horajjan.blog.me/110190250447


04. 템플릿 시스템과 데이터 바인딩

http://horajjan.blog.me/110190251856


정리한 블로그들이 있으니 참고하기도 편하군 ㅋ.
4장이 생각보다 분량이 많았다. 코딩 삽질도 많이하고... ㅎ

AngularJS의 템플릿

• <예제 2.4> AngularJS의 템플릿 예제 코드

JS Bin

이중 중괄호와 AngularJS 표현식

• <예제 2.5> 다양한 AngularJS의 표현식 예제 코드

JS Bin

데이터 바인딩의 이해

• <예제 2.7> 양방향 데이터 바인딩 예제 코드

JS Bin

반복적인 데이터 표현을 위한 템플릿(반복 지시자)

• <예제 2.8> ng-repeat 예제 코드

JS Bin

조건적인 데이터 표현을 위한 템플릿(조건 지시자)

• <예제 2.9> ng-switch 예제코드
• <예제 2.10 2.11> ng-if, ng-show/ng-hide 예제 코드

JS Bin

JS Bin

비지니스 로직 처리를 위한 템플릿(컨트롤러 지시자)

• <예제 2.12> ng-controller 사용 예제 코드

JS Bin

폼과 유효성 검사를 위한 템플릿(폼/입력 지시자)

• <예제 2.13> 텍스트 타입의 <input> 태그 예제 코드
• <예제 2.14>체크박스 타입의 <input>요소 예제 코드
• <예제 2.15><select> 요소 사용 예제
• <예제 2.16> CSS 클래스를 이용한 유효성 검증 결과 예제 코드

JS Bin

JS Bin

JS Bin

JS Bin

이벤트 처리를 위한 템플릿(이벤트 처리 지시자

• <예재 2.17> 이벤트 지시자 사용 예제

JS Bin

CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿 (클래스 지시자/스타일 지시자)

• <예제 2.18> ng-class 사용 예제
• <예제 2.19> ng-style 사용 예제

JS Bin

JS Bin




근데 네이버는 왜 보안 어쩌고 저쩌고 하면서 iframe, script, embed 같은 걸 사용을 못하냐. Damn!