음 아마 비둘기보단 똑똑할꺼야
준돌 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.10.30 14:57 / JavaScript/Core

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

추가적인 사담이 존재합니다.


Object.observe()

Object.observe() 메소드는 객체에 변화가 생기는 것을 감지하는 곳에 사용됩니다.

observe 메소드는 객체내에 변화가 생겼을 때 명령을 내리는 것을 제공합니다.

사담 : Object.observer() 메소드는 ECMAScript7 에서 지원하는 것이므로 2016년에 배포될 예정입니다.

브라우저 지원은 포스팅하는 지금 시점에는 크롬 46버전 부터 지원하는 것으로 알려져있습니다.

현재 크롬 최신 버전은 47 버전이므로 크롬으로 테스트하실경우 테스트가 가능합니다.

문법

Object.observe(obj, callback[, acceptList])

매개변수

obj
감시할 객체.
callback
콜백함수는 아래와같은 변수변화가 생길때 호출됩니다. 
changes
changes 배열객체의 프로퍼티들은 아래의 객체들과 같습니다.
  • name: name 프로퍼티는 변화가 생긴 프로퍼티 이름 입니다.
  • object: 객체의 변화가 생긴 후의 객체를 가리킵니다. 즉, 변화가 생긴 객체.
  • type: 문자열인 이 프로퍼티는 "add", "update" 혹은 "delete" 중 어떤 변화인지 나타냅니다.
  • oldValue: "update"와 "delete" 타입에서만 값이 할당되며 변화되기 이전의 값을 나타냅니다.
acceptList
The list of types of changes to be observed on the given object for the given callback. If omitted, the array ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]will be used.

설명

콜백은 객체의 변화가 있을 때 호출 됩니다.

예시

6가지 모든 타입을 기록합니다.

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]

Object.defineProperty(obj, 'foo', {writable: false});
// [{name: 'foo', object: <obj>, type: 'reconfigure'}]

Object.setPrototypeOf(obj, {});
// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}]

Object.seal(obj);
// [
//   {name: 'foo', object: <obj>, type: 'reconfigure'},
//   {name: 'bar', object: <obj>, type: 'reconfigure'},
//   {object: <obj>, type: 'preventExtensions'}
// ]

데이터 바인딩

// A user model
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Create a greeting for the user
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Any time name or title change, update the greeting
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

직접 변화를 시켜보겠습니다.

// A point on a 2D plane
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // Performing a custom change
  Object.getNotifier(pt).performChange('reposition', function() {
    var oldDistance = pt.distance;
    pt.x = x;
    pt.y = y;
    pt.distance = Math.sqrt(x * x + y * y);
    return {oldDistance: oldDistance};
  });
}

Object.observe(point, function(changes) {
  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);

setPosition(point, 3, 4);
// Distance change: 5

특징

Strawman proposal for ECMAScript 7.

ECMAScript7 에 포함될 예정입니다.

브라우저 지원

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36Not supported [1]Not supported [2]23Not supported

[1]: See bug 800355

[2]: See relevant MS Edge platform status entry

See also


© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
138 / 52 / 113,778