-
[AngularJS] 2. 식(expression) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:14AngularJS ExpressionsAngularJS는 식(Expression)을 사용하여 데이터를 HTML과 연결합니다.1. AngularJS ExpressionsAngularJS 식은 이중 괄호 안에 작성되어 집니다: {{ expression }}AngularJS 식은 ng-bind directive를 써서 데이터와 HTML을 연결합니다.AngularJS는 식이 쓰여진 곳에 정확히 데이터가 출력되어 질 것 입니다.AngularJS 식은 JavaScript 식과 거의 유사합니다.1234567891011121314151617<!DOCTYPE html><html><head></head><body><div ng-app><p>My first expression: {{ 5 + 5 }}</p></div></body></html>
cs ng-app directive를 지운다면, HTML은 식을 풀지 못하고 있는 그대로 출력하게 됩니다.
2. AngularJS Numbers
AngularJS 숫자는 자바스크립트 숫자와 유사합니다:
1234567891011121314151617<!DOCTYPE html><html><head></head><body><div ng-app="" ng-init="quantity=1;cost=5"><p>Total in dollar: {{ quantity * cost }}</p></div></body></html>cs ng-bind를 사용한 같은 예제입니다:
123456<div ng-app="" ng-init="quantity=1;cost=5"><p>Total in dollar: <span ng-bind="quantity * cost"></span></p></div>cs * ng-init을 사용하는 것은 매우 일반적이지 않습니다. controller 장에서 데이터 초기화를 하는 좋은 방법에 대해 배우게 될 것 입니다.
3. AngularJS Strings
AngularJS 문자열은 자바스크립트 문자열과 유사합니다:
123456789101112131415161718<!DOCTYPE html><html><head></head><body><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>The full name is: {{ firstName + " " + lastName }}</p></div></body></html>cs ng-bind를 사용한 같은 예제입니다:
123456<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p></div>cs 4. AngularJS Objects
AngularJS 객체는 자바스크립트 객체와 유사합니다:
12345<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>The name is {{ person.lastName }}</p></div>cs ng-bind를 사용한 같은 예제입니다:
12345<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>The name is <span ng-bind="person.lastName"></span></p></div>cs 5. AngularJS Arrays
AngularJS 배열은 자바스크립트 배열과 유사합니다:
12345<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>The points are {{ points[2] }}</p></div>cs ng-bind를 사용한 같은 예제입니다:
12345<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>The points are <span ng-bind="points[2]"></span></p></div>cs * 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 5. 필터(filter) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 4. 제어(controller) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 3. 지시어(directives) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 1. 소개(Introduction) - Angular JS 강좌 (0) 2015.06.12
