AngularJS Expressions
AngularJS 표현식은 두개의 중괄호 안에 작성됩니다 : {{ 표현식 }}.
AngularJS 표현식의 HTML 데이터 바인딩은 ng-bind 지시자와 같은 역할을 합니다.
AngularJS 표현식이 사용된곳에 정확하게 데이터가 출력됩니다.
AngularJS 표현식은 자바스크립트 표현식과 매우 비슷합니다. : 그 두 개는 literals, opertaors 그리고 variables 를 포함하고 있습니다.
예를들어 {{ 5 + 5 }} 혹은 {{ firstName + " " + lastName }}
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
만약 여러분들이 ng-app 지시자를 제거한다면, HTML 표현식이 계산없이 그대로 보여질 것입니다.(아래 예제 참조)
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 숫자
AngularJS 의 숫자는 Javacript 의 숫자와 닮았습니다:
AngularJS 예제
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>ng-bind를 사용하는 예제와 같습니다.
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>※ ng-init 을 사용하는 일은 매우 드뭅니다. 여러분들은 컨트롤러 챕터에서 데이터를 초기화하는 더 좋은 방법을 배우게 될 것입니다.
AngularJS 문자열
AngularJS 문자열은 Javascript 의 문자열과 닮았습니다:
AngularJS 예제
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>ng-bind를 사용하는 예제와 같습니다.
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>AngularJS 객체
AngularJS 의 객체는 Javascript의 객체와 닮았습니다:
AngularJS 예제
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>ng-bind를 사용하는 예제와 같습니다.
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>AngularJS 배열
AngularJS 배열은 Javascript 배열과 닮았습니다:
AngularJS 예제
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>ng-bind를 사용한 예제와 같습니다.
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>AngularJS 표현식 VS. Javacript 표현식
Javscript 표현식과 AngularJS 표현식 같은 경우에는 literals, operatiors 그리고 변수들을 담을 수 있습니다.
Javscript 표현식과 AngularJS 표현식 같지 않은 경우에는 HTML 안에 작성될 수 있습니다.
AngularJS 표현식은 conditionals, loops 그리고 exceptions가 자바스크립트 표현식일때는 지원되지않습니다.
AngularJS 표현식은 filters를 자바스크립트 표현식이 하고있지않을 때 지원합니다.
원본 Link : http://www.w3schools.com/angular/angular_expressions.asp
'AngularJS > w3schools 번역' 카테고리의 다른 글
| [튜토리얼/번역] AngularJS Modules (AngularJS 모듈) (4) | 2016.03.18 |
|---|---|
| [튜토리얼/번역] w3schools AngularJS 저작권/About Copyright (3) | 2015.12.10 |
| [튜토리얼/번역] AngularJS Intro (2) | 2015.12.09 |
| [튜토리얼/번역] AnularsJS Home (4) | 2015.12.09 |
댓글