AngularJS 표현식
AngularJS 의 표현식은 다음과 같다: {{ expression }}. (다음과 같은 방법으로도 가능: ng-bind="expression")
AngularJS 은 표현식을 해결하고 표현식이 쓰여지는 곳의 결과를 정확하게 반환합니다.
AngularJS 표현식 은 JavaScript의 표현식과 비슷하다. (리터럴, 연산자, 변수를 포함할 수 있다.)
예제 : {{ 5 + 5 }} 또는 {{ firstName + " " + lastName }}
Example
<!DOCTYPE html>
<html>
<script src="https://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 을 지우면 표현식은 그대로 출력이 되버린다.
Example
<!DOCTYPE html>
<html>
<script src="https://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 가 CSS 속성값을 변경하도록 하라.
아래 값을 변경하여 입력 상자의 색상을 변경하라.
Example
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
AngularJS Numbers
AngularJS 의 numbers 는 JavaScript 의 numbers 와 같다.
Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>ng-bind을 사용한 같은 예제
Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>ng-init 를 사용하는 것은 일반적이지 않다. controllers 챕터에서 데이터를 초기화하는 더 나은 방법에 대해 자세히 배울것이다.
AngularJS Strings
AngularJS 의 strings 은 JavaScript 의 strings 과 같다.
Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>ng-bind를 사용한 같은 예제
Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>AngularJS Objects
AngularJS 의 objects 는 JavaScript 의 objects 와 같다.
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>ng-bind를 사용한 같은 예제
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>AngularJS Arrays
AngularJS 의 arrays 는 are JavaScript 의 arrays 와 같다.
Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>ng-bind를 사용한 같은 예제
Example
<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. JavaScript 표현식
Javascript 의 표현식과 같이 AngularJS 의 표현식도 리터럴, 연산자, 변수를 포함할 수 있다.
하지만 AngularJS 의 표현식만이 HTML 내부에 작성이 가능하다. (Javascript 는 불가능)
AngularJS 의 표현식은 조건, 루프, 예외를 지원하지 않지만 Javascript의 표현식은 지원한다.
AngularJS 의 표현식은 filters를 지원하는반면 Javascript 의 표현식은 지원하지 않는다.
'Coding > HTML' 카테고리의 다른 글
| 동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법 (0) | 2017.04.06 |
|---|---|
| Jquery empty() / remove() / detach() 차이점 (0) | 2017.04.05 |
| [W3Schools AngularJS 한글강좌] Directives (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Modules (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Intro (0) | 2017.01.16 |
