[W3Schools AngularJS 한글강좌] Expressions

Posted by Hide­
2017.01.16 18:53 Coding/HTML & Javascript
* ALL COPYRIGHTS are at w3schools. This article's purpose is only for study. *

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>
Try it Yourself »

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>
Try it Yourself »

당신이 원하는 곳에 표현식을 입력하면 AngularJS 가 그 표현식을 찾아 가공하고 결과를 리턴할 것 이다.

예제: AngularJS 가 CSS 속성값을 변경하도록 하라.

아래 값을 변경하여 입력 상자의 색상을 변경하라.

Example

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

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

</div>
Try it Yourself »

AngularJS Numbers

AngularJS 의 numbers 는 JavaScript 의 numbers 와 같다.

Example

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

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

</div>
Try it Yourself »

ng-bind을 사용한 같은 예제

Example

<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 를 사용하는 것은 일반적이지 않다. 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>
Try it Yourself »

ng-bind를 사용한 같은 예제

Example

<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 Objects

AngularJS 의 objects 는 JavaScript 의 objects 와 같다.

Example

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

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

</div>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

AngularJS 표현식 vs. JavaScript 표현식

Javascript 의 표현식과 같이 AngularJS 의 표현식도 리터럴, 연산자, 변수를 포함할 수 있다.

하지만 AngularJS 의 표현식만이 HTML 내부에 작성이 가능하다. (Javascript 는 불가능)

AngularJS 의 표현식은 조건, 루프, 예외를 지원하지 않지만 Javascript의 표현식은 지원한다.

AngularJS 의 표현식은 filters를 지원하는반면 Javascript 의 표현식은 지원하지 않는다.



다른 사람들이 많이 읽은 글
이 댓글을 비밀 댓글로

티스토리 툴바