[Angular] AngularJS 튜토리얼 2. 식(Expressions)

AngularJS는 식을 통해 데이터와 HTML을 연결한다.

 

1. 이중괄호를 사용해서 나타낼 수 있다. {{expression}}

 

2. 디렉티브를 사용해서도 나타낼 수 있다. ng-bind="expression"

 

3. Angular는 식을 읽어들여 해당 식이 사용된 곳에 데이터를 반환해준다.

 

4. JavaScript expression과 유사하다. 

 

<div ng-app="">
	<p>My first Expression : {{ 5 + 5 }} </p>
</div>

ng-app 디렉티브를 제거하면 식을 해석하여 10을 반환하는 게 아니라 {{ 5 + 5 }}라는 text가 그대로 출력되게 된다.

 

 

다음과 같은 형태로도 사용할 수 있다.

어떠한 형태로 사용하든지, 식이 사용된 부분을 resolve해서 데이터를 출력해준다.

<div ng-app="" ng-init="myCol='grey'">
	<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

 

 

[ AngularJS의 Number ]

 

: JS의 number와 같다.

 

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

이중괄호를 사용

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

ng-bind 디렉티브를 사용

 

 

[ AngularJS의 String ]

 

: JS의 String과 같다.

 

<div ng-app="" ng-init="firstName='KIM'; lastName='NY'">
	<p>The name is {{ firstName + " " + lastName }}</p>
</div>

이중괄호를 사용

<div ng-app="" ng-init="firstName='KIM'; lastName='NY'">
	<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

ng-bind 디렉티브를 사용

 

 

[ AngularJS의 Object ]

 

: JS와 같다.

 

<div ng-app="" ng-init="person={firstName: 'KIM', lastName: 'NY'}">
	<p>The name is {{person.lastName}}</p>
</div>

이중괄호를 사용

<div ng-app="" ng-init="person={firstName: 'KIM', lastName: 'NY'}">
	<p>The name is <span ng-bind="person.lastName"></span></p>
</div>

ng-bind 디렉티브를 사용

 

[ AngularJS의 Array ]

 

: JS와 같다.

 

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

이중괄호를 사용

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

ng-bind 디렉티브를 사용

 

 

 

다 똑같다는데 그럼 뭔 차이가 있는걸까?

[ AngularJS 의 Expression VS JavaScript 의 Expression ]

 

 

: JS와 마찬가지로 AngularJS의 식에서도 리터럴(literal), 연산자(Operator), 변수(variable)을 가진다.

 

리터럴(Literal) : 소스 코드의 고정된 값을 대표하는 용어이다. 소스 코드에서 프로그래머에 의해 직접 입력된 값을 의미한다

 

ko.wikipedia.org/wiki/%EB%A6%AC%ED%84%B0%EB%9F%B4

리터럴

 

상수와 리터럴의 차이점에 관해서는 아래의 블로그를 참조.

 

mommoo.tistory.com/14

상수(constant) 와 리터럴(literal)이란?

 

 

공통점	리터럴(literal), 연산자(Operator), 변수(variable)을 가진다.
차이점
AngularJS	JavaScript
1. HTML의 내부에서 사용이 가능하다. 2. 조건문, 반복문, 예외처리등을 지원하지 않는다. 3. filter를 지원한다. (filter에 관해서는 이후 튜토리얼에서 이어서 포스팅)	1. HTML 내부에서 사용이 불가능하다. 2. 조건문, 반복문, 예외처리등을 처리할 수 있다. 3. filter를 지원하지 않는다.