1. 사용자 입력을 화면으로 뿌려주는 예제 (ng-model, ng-bind 이용)
AngularJS에서는 다음과 같은 디렉티브들을 사용합니다.
ng-app : 사용하는 앱을 지정
ng-model : 사용자 입력값을 하나의 변수이름으로 지정
ng-bind : 변수값을 특정 태그요소의 innerHTML 값으로 연결
ng-init : 변수명에 초기값을 지정
Name:
2. 변수값의 초기화 이용 (ng-init 이용)
처음 디폴트 지정된 이름은 입니다.
3. 디렉티브 이름으로 ng-init 대신 data-ng-init를 사용해도 됩니다.
처음 디폴트 지정된 이름은 입니다.
4. Expression으로 {{ }} 를 이용합니다. 이것은 ng-bind를 사용하는 것과 같습니다.
5 + 5 = {{ 5 + 5 }}
초기 지정된 이름은 {{firstName}} 입니다.
5. 콘트롤러 함수 이용
ng-controller 디렉티브로 지정된 콘트롤러 함수는 페이지가 로드될때 실행됩니다.
First Name:
Last Name:
Full Name: {{firstName1 + " " + lastName1}}
6. 사용자 입력값을 이용한 계산
Quantity:
Costs:
Total in dollar: {{ quantity * price }}
7. ng-repeat를 이용한 반복루프 연산
Looping with objects:
-
{{ x.name + ', ' + x.country }}
8. ng-repeat를 이용한 반복루프 연산 (필터를 이용한 정렬)
Looping with objects:
-
{{ x.name + ', ' + x.country }}