AngularJS Expressions

이 포스트는 자습을 목적으로 W3C school AngularJS의 내용을 토대로 작성되었습니다.

AngularJS는 표현식을 사용하여 데이터를 HTML에 바인딩합니다.

AngularJS Expressions

AngularJS 표현식은 2개의 중괄호 안에 작성됩니다. `` 또한, AngularJS 표현식은 ng-bind="expression" 명령어로 표현할 수 있습니다. AngularJS는 표현식을 풀고, 표현식이 적혀진 곳에 정확한 결과 값을 반환합니다. AngularJS 표현식은 JavaSchript 표현식(상수, 연산자, 변수 등)과 매우 유사합니다.

<div ng-app="">
  <p>My first expression: 5</p>
</div>

ng-app명령어를 제거하게 된다면 HTML은 표현식 그대로를 보여줍니다.

<div>
  <p>My first expression: 5</p>
</div>

표현식은 원하는 곳 어디든 적을 수 있으며, AngularJS는 단순하게 표현식을 풀고 결과 값을 반환합니다. 예를 들어 AngularJS는 CSS의 속성 값을 바꿀 수도 있습니다.

Example

// 원하는 값을 적는다면, 박스의 색상이 변합니다.
<div ng-app="" ng-init="myCol='lightblue'">
	<input style="background-color:" ng-model="myCol" value="">
</div>

AngularJS Numbers

AngularJS의 숫자는 JavaScript와 같습니다.

<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: </p>
    <!--
    <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
    -->
</div>

ng-init은 실제로 잘 사용하지 않습니다. 컨트롤러를 배울 때 데이터를 초기화하는 더 좋은 방법을 배우게 됩니다.

AngularJS Strings

AngularJS의 문자열은 JavaScript의 문자열과 같습니다.

<div ng-app="" ng-init="firstName='Dan';lastName='patpang'">
	<p>The name is </p>
</div>

AngularJS Objects

AngularJS의 객체는 JavaScript의 객체와 같습니다.

<div ng-app="" ng-init="name={firstName:'Dan',lastName:'patpang'}">
	<p>The name is </p>
</div>

AngualrJS Arrays

AngularJS의 배열은 JavaScript 배열과 같습니다.

<div ng-app="" ng-init="points=[1,2,3,4,5]">
	<p>The third result is </p>
</div>

AngularJS Expressions vs JavaScript Expressions

JavaScript 표현식과 같이 AngularJS 표현식은 상수, 연산자, 변수를 포함합니다. 하지만 JavaScript표현식과 다르게 AngularJS의 HTML 내부에 작성됩니다. AngularJS 표현식은 조건문, 반복문, except문을 지원하지 않지만, JavaScript 표현식은 지원합니다. 또한, AngularJS 표현식은 필터를 지원하지만, JavaSCript는 지원하지 않습니다.