Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 2. 식(expression) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 2. 식(expression) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:20
728x90
반응형
AngularJS Expressions
 AngularJS는 식(Expression)을 사용하여 데이터를 HTML과 연결합니다.

1. AngularJS Expressions
 AngularJS 식은 이중 괄호 안에 작성되어 집니다: {{ expression }}

 AngularJS 식은 ng-bind directive를 써서 데이터와 HTML을 연결합니다.

 AngularJS는 식이 쓰여진 곳에 정확히 데이터가 출력되어 질 것 입니다.

 AngularJS 식은 JavaScript 식과 거의 유사합니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!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 숫자는 자바스크립트 숫자와 유사합니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!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를 사용한 같은 예제입니다:

 

1
2
3
4
5
6
 
<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 문자열은 자바스크립트 문자열과 유사합니다:





 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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를 사용한 같은 예제입니다:


 

1
2
3
4
5
6
 
<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 객체는 자바스크립트 객체와 유사합니다:



 

1
2
3
4
5
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>The name is {{ person.lastName }}</p>
 
</div>
cs


ng-bind를 사용한 같은 예제입니다:


 

1
2
3
4
5
<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 배열은 자바스크립트 배열과 유사합니다:



 

1
2
3
4
5
<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>The points are {{ points[2] }}</p>
 
</div>
cs



ng-bind를 사용한 같은 예제입니다:


 

1
2
3
4
5
<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 를 참고하여 작성하였습니다.

728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 4. 제어(controller) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 3. 지시어(directives) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 1. 소개(Introduction) - Angular JS 강좌  (0) 2016.06.14
하루만에 끝내는 AngularJS  (0) 2016.06.14
'AngularJS_1' Related Articles more