AngularJS 표현식

AngularJS 표현식

 

 

●AngularJS 표현식 관련

 

AngularJS의 표현식인 {{}}에 대해 알아보도록 하겠습니다.

 

AngularJS의 표현식은 앞서 말했듯이 두 가지 방법이 있습니다.

 

{{ expression }} or ng-bind="expression"

 

표현식 내부에서 해결하여 정확한 값을 표현해줍니다.

 

특히 CCS 속성 값들을 사용자의 입력에 따라 동적으로 바뀌게끔 할수가 있겠죠.

 

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>

 

=> ng-init으로 myCol의 초기 값을 lightblue로 잡습니다.

=> style의 CSS 속성 값을 표현식으로 표현합니다.

=> 사용자의 입력에 따라 속성 값이 바뀌게 됩니다.

 

 

 

 

---

●AngularJS Numbers

 

이는 초기값에서 숫자로 초기화하면 사용되는데

 

자바스크립트의 숫자와 같습니다.

 

예를 들어

 

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

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

</div>

 

=>초기화로 quantity는 1 cost는 5로 하여 표현식에서 곱한 값인 5가 출력이 되겠죠.

 

이를 ng-bind와 동일하게 사용할 수 있습니다.

 

{{ quantity * cost }} = <span ng-bind="quantity * cost"</span>

 

 

---

 

●AngularJS Strings

 

자바스크립트의 문자열과 동일합니다.

 

마찬가지로 초기화 할 때 사용되기도 합니다..

 

예를 들어

 

 

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

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

</div>

 

=> ng-init에 문자열로 초기화 하여 이를 표현식에 표현합니다.

 

이는 {{ firstName + " " + lastName }} = <span ng-bind="firstname+ ' ' + lastName"></span>

 

 

---

●AngularJS Objects

 

이는 자바스크립트의 객체와 동일합니다.

 

예를 들어

 

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

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

</div>

 

 

=> ng-init에 person 객체를 초기화 시킵니다.

=> 이를 표현식에서 person.xxx 형태로 참조하겠죠.

 

자바스크립트와 별반 차이 없습니다.

 

 

---

●AngularJS Arrays

 

이는 자밧크립트의 배열과 같습니다.

 

예를 들어

 

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

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

</div>

 

=> ng-init에 points 배열로 초기화 시키고

=> 표현식에서 이를 배열 참조하듯이 사용합니다.

 

---

●AngularJS expression VS javaScript expression

 

• 둘 모두 리터럴, 연산자, 변수 포함 가능
• AngularJS는 자바스크립트와 달리 HTML 내부에 작성 가능
• AngularJS는 조건부 루프 예외 처리 를 지원하지 않는다.
• AngularJS는 필터를 지원한다.