음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.12.10 10:59 / AgnularJS/w3schools 번역



AngularJS Expressions

AngularJS 표현식은 두개의 중괄호 안에 작성됩니다 : {{ 표현식 }}.
AngularJS 표현식의 HTML 데이터 바인딩은 ng-bind 지시자와 같은 역할을 합니다.
AngularJS 표현식이 사용된곳에 정확하게 데이터가 출력됩니다.

AngularJS 표현식은 자바스크립트 표현식과 매우 비슷합니다. : 그 두 개는 literals, opertaors 그리고 variables 를 포함하고 있습니다.
예를들어 {{ 5 + 5 }} 혹은 {{ firstName + " " + lastName }}

AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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 지시자를 제거한다면, HTML 표현식이 계산없이 그대로 보여질 것입니다.(아래 예제 참조) 


AngularJS 예제

<!DOCTYPE html>
<html>
<script src="http://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 의 숫자는 Javacript 의 숫자와 닮았습니다:

AngularJS 예제

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

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

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<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 을 사용하는 일은 매우 드뭅니다. 여러분들은 컨트롤러 챕터에서 데이터를 초기화하는 더 좋은 방법을 배우게 될 것입니다.


AngularJS 문자열

AngularJS 문자열은 Javascript 의 문자열과 닮았습니다:

AngularJS 예제

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

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

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<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 객체

AngularJS 의 객체는 Javascript의 객체와 닮았습니다:

AngularJS 예제

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

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

</div>

Try it Yourself »

ng-bind를 사용하는 예제와 같습니다.

<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 배열

AngularJS 배열은 Javascript 배열과 닮았습니다:

AngularJS 예제

<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를 사용한 예제와 같습니다.

<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. Javacript 표현식

Javscript 표현식과 AngularJS 표현식 같은 경우에는 literals, operatiors 그리고 변수들을 담을 수 있습니다.
Javscript 표현식과 AngularJS 표현식 같지 않은 경우에는 HTML 안에 작성될 수 있습니다.
AngularJS 표현식은 conditionals, loops 그리고 exceptions가 자바스크립트 표현식일때는 지원되지않습니다.
AngularJS 표현식은 filters를 자바스크립트 표현식이 하고있지않을 때 지원합니다.


원본 Link : http://www.w3schools.com/angular/angular_expressions.asp

준돌 Jundol / 2015.12.09 15:28 / AgnularJS/w3schools 번역




AngularJs 는 Single Page Applications (SPAS)를 개발하기에 최적화되어있습니다.
AngularJS 는 배우기 쉽습니다.
AngularJS 를 지금 배워봅시다!


이 튜토리얼

이 튜토리얼은 가능한 빠르고 효율적으로 AngularJS 를 배울 수 있도록 고안되었습니다.
먼저, 여러분은 AngularJS의 기본부터 배우게 될겁니다 : directives, expressions, filters, modules, 그리고 controllers.
그다음 여러분은 AngularJS의 모든것을 배우게 될 것입니다 :
Events, DOM, Froms, Input, Validation, Http, 그리고 더 많이.

모든 챕터마다 여러분 스스로 실습할 수 있습니다.

모든챕터에는 온라인으로 예제를 수정할 수 있고, 버튼을 클릭해서 결과를 볼 수 있습니다.

AngularJS 예제
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

TryItYourSelf


사전지식

AngularJS를 배우기전에 알아두면 좋은 지식들:
HTML, CSS , Javscript


AngularJS 역사

AngularJS 버전 1.0 은 2012년에 배포되었습니다.
Miško Hevery, 구글 개발자들은 2009년부터 AngularJS를 개발하기 시작했습니다.
아이디어는 굉장히 잘 구현되었고 현재에는 구글에서 AngularJS프로젝트를 공식적으로 지원하고 있습니다.


AngularJS 예제

W3School's 의 AngularJS 튜토리얼은 굉장히 많은 AngularJS 예제를 담고 있습니다.
AngularJS 예제


AngularJS 레퍼런스

AngularJS레퍼런스는 모든 directives 와 filters 를 튜토리얼에 담고 있습니다.
AngularJS레퍼런스


원본 : http://www.w3schools.com/angular/default.asp


© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
199 / 15 / 93,564