본문 바로가기
AngularJS/w3schools 번역

[튜토리얼/번역] AngularJS Expressions (AngularJS 표현식)

by Jundol 2015. 12. 10.



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>

Try it Yourself »

만약 여러분들이 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>

Try it Yourself »


AngularJS 숫자

AngularJS 의 숫자는 Javacript 의 숫자와 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<div ng-app="" ng-init="quantity=1;cost=5">


<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
Try it Yourself »

※ ng-init 을 사용하는 일은 매우 드뭅니다. 여러분들은 컨트롤러 챕터에서 데이터를 초기화하는 더 좋은 방법을 배우게 될 것입니다.


AngularJS 문자열

AngularJS 문자열은 Javascript 의 문자열과 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Try it Yourself »

AngularJS 객체

AngularJS 의 객체는 Javascript의 객체와 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

Try it Yourself »

AngularJS 배열

AngularJS 배열은 Javascript 배열과 닮았습니다:

AngularJS 예제

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Try it Yourself »

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>

Try it Yourself »

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

댓글