[Guide] 7_Angular Expression

Angular는 자바스크립트를 기반으로 탄생하다 보니 자바스크립트의 표현식이 템플릿의 일부분으로 {{ }}을 사용해 표현이 가능합니다.

즉, html 템플릿상에서 자바스크립트의 몇몇 표현식들이 동작을 하고 이를 Angular가 지원을 한다는 말입니다.

1+2 a+b user.name item[index]

이와같은 표현식이 {{ }} 에 둘러싸여 동작을 한다는 말입니다.

Angular Expressions vs. javascript Expressions

하지만 아무리 Angular가 자바스크립트가 기반이지만 몇몇 표현에 있어서 차이점이 존재합니다.

Context : 자바스크립트는 window객체를 기반으로 동작을 하지만 Angular는 scope객체를 기반으로 동작을 합니다.

Forgiving : 자바스크립트에서 선언되지 않은 프로퍼티를 연산하려 하면 ReferenceError나 TypeError가 발생을 하지만 Angular의 경우에는 undefined나 null로 표현을 해줍니다.

No Control Flow Statements : 일반적인 조건문이나 반복문, 예외처리는 지원되지않습니다.

No Function Declarations : 함수를 만드는것도 불가능합니다. 심지에 ng-init directive안에서도 마찬가지입니다.

No RegExp Creation With Literal Notation : 정규식을 사용하는 것이 불가능합니다.

No Comma And Void Operatiors : " , " 나 void 등은 사용이 불가능합니다.

Filters : 우리는 데이터에 대한 복잡한 처리는 filters 를 통해서 표현이 가능합니다.

만약에 무언가 조금 복잡하게 구현하기 위해서는 controller에서 메서드로 정의한 후에 이를 템플릿상에서 호출해서 사용하면 됩니다. 만약에 eval() 을 통해서 무언가를 사용하고 싶다면 $eval() 메서드를 사용할수있습니다.

Expression:용 Evaluate [ X ] {{expr}} =>

angular.module('expressionExample', []) .controller('ExampleController', ['$scope', function($scope) { var exprs = $scope.exprs = []; $scope.expr = '3*10|currency'; $scope.addExp = function(expr) { exprs.push(expr); };

$scope.removeExp = function(index) { exprs.splice(index, 1); }; }]);

$eval()을 통해서 필요한 표현식을 구현할수있습니다.

그럼 하나하나 차이점에 대해 자세히 알아보겠습니다.

Context

Angular는 자바스크립트의 eval()을 사용해서 표현식을 구현하지 않습니다. 대신에 $parse서비스가 이 작업을 진행합니다.

Angular의 경우에는 window, document, location등 기본적인 전역변수를 사용할수 없습니다. 왜냐하면 이러한 제약은 전역객체를 접근하여 사용하다가 발생하는 버그들을 예방하기 위해서입니다.

대신에 $window, $location을 통해 동합일한 표현을 통해 전역으로 접근이 가능합니다.

Forgiving

Angular의 표현식은 null , undefined 에 대해서는 매우 관대합니다. 만약에 일반적인 자바스크립트에서 a.b.c가 있다면 a 가 객체가 아닌경우 a.b.c는 에러로 예외처리가 될것입니다.

일반적인 목적의 언어에서는 적절한 처리이지만 {{ a.b.c }} 형태로 주로 데이터를 다루는 경우에는 에러로 처리하는것보다는 아무것도 보여주지 않는 것이 더욱 적절할것입니다.

이 경우에는 서버에서 데이터가 정의되기 전에 a가 정의 되어 있지 않더라도 에러가 아닌 빈값으로만 처리합니다.

만약 언어가 관대함을 제공하지 않는다면 {{ ((a || {}).b || {}).c }} 처럼 처리를 해줘야 합니다.

No Control Flow Statements

(a ? b :c) 이런 삼단 표현식을 제외하고 , 어떠한 제어문을 사용하면 안됩니다. 왜냐하면 이는 Angular가 추구하는 철학을 벗어납니다. 모든 로직은 controller를 통해서만 제공이 되어야 하고 view에서는 보이는 것에만 집중해야 합니다.

No function declarations or RegExp creation with literal notation

어떠한 정규식이나 함수에 대한 정의를 지원하지 않습니다.이러한 것들은 controller나 filter들에만 위치해야 합니다. 다시한번 설명드리자면 Angular의 기본 철학은 각 부분별로 맡은 역활에 충실하자 입니다. 템플릿상에서는 오직 보이는 것에만 집중하고 기타 로직같은 것들은 따로 구분지어 사용해야 합니다.

$event

ngClick, ngFocus 같은 이벤트를 다루는 directive는 $event 객체를 scope에서 확인이 가능합니다. 그리고 이 객체는 jQuery나 jqLite가 있다면 그 jQuery Event Object의 인스턴스입니다.

$event ngClick, ngFocus 같은 이벤트를 다루는 directive는 $event 객체를 scope에서 확인이 가능합니다. 그리고 이 객체는 jQuery나 jqLite가 있다면 그 jQuery Event Object의 인스턴스입니다.

index.html Event $event: {{$ev그ent | json}} clickEvent: {{clickEvent | json}}

app.js angular.module('eventExampleApp', []). controller('EventController', ['$scope', function($scope) { /* * expose the event object to the scope */ $scope.clickMe = function(clickEvent) { $scope.clickEvent = simpleKeys(clickEvent); console.log(clickEvent); };

/* * return a copy of an object with only non-object keys * we need this to avoid circular references */ function simpleKeys (original) { return Object.keys(original).reduce(function (obj, key) { obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key]; return obj; }, {}); } }]);

위의 코드는 clickMe를 통해 $event를 전달하지만 왜 {{$event}} 가 보이지 않을까요? 이경우에는 $event 가 해당 스코프의 외부에 존재하기 때문입니다.

즉, $event는 우리가 구현한 scope상에 존재하는 것이아니라는 말입니다. 우리가 확인가능한것은 우리가 구현한 scope상의 정보들이라는 것을 명심하시기 바랍니다.

One-time binding

Angualr에서는 데이터를 바인딩하는 경우에 일반적인 방법과 one-time으로 바인딩을 하는 방법이 있습니다.

여기서 one-time 바인딩이라는 것은 바인딩하는 대상이 안정된 상태가 되면 더이상의 연산을 진행하지 않는다는 것입니다.

여기서 안정된의 의미는 예를 들어 서버로부터 데이터를 받아와 그려주는 작업을 하는데 서버로 부터 값을 받아오기 전에는 해당 데이터가 존재하지 않는 상태일것입니다. 그리고 이후에 해당 데이터를 받아와 값이 생성이 되면 이 상태를 안정된 상태라고 보는 것입니다. 코드로 보면 이해가 쉽습니다.

index.html Click Me One time binding: {{::name}} Normal binding: {{name}}

app.js angular.module('oneTimeBidingExampleApp', []). controller('EventController', ['$scope', function($scope) { var counter = 0; var names = ['Igor', 'Misko', 'Chirayu', 'Lucas']; /* * expose the event object to the scope */ $scope.clickMe = function(clickEvent) { $scope.name = names[counter % names.length]; counter++; }; }]);

이 예제를 보면 클릭이벤트가 발생하면 해당 데이터들 바인딩된곳에 적용시켜 주는 작업을 합니다. 아래의 Normal binding 에는 클릭이 일어나면 그때마다 값의 변화가 발생을 하지만 {{ :name }}의 경우에는 더이상의 값변화가 존재하지 않게 됩니다.

그럼 왜 이러한 기능이 필요한것일까요??

One time 바인딩의 주목적은 안정화된 리소스와의 바인딩을 생성하기 위해서입니다. 우리가 Scope시간에 배운 실시간으로 데이터를 바인딩 시키기 위해 Angular의 내부에서는 지속적으로 digest loop를 통해 값을 지속적으로 관찰을 하고 있는데 관찰을 해야하는 대상을 줄여 digest loop를 더욱 빠르게 더 많은 정보를 나타내게 할수가 있습니다.

Value stabilization algorithm

그럼 one-time바인딩이 동작을 하는 알고리즘에 대해서 알아 보겠습니다. 크게 보면 간단합니다. digest루프를 돌면서 우리가 확인해야할 값들을 보고 안정화단계인지 아니면 계속 확인을 해야하는지를 판단하고 안정화면 다음 루프에서는 제외시키고 안정화단계가 아니라면 계속적으로 이 작업을 반복합니다.

단계별로 확인을 해보겠습니다.

:: 를 표현식의 시작으로 하는 경우에는 digest loop에 들어오면 일단 값을 V로 저장을 합니다. 만약에 V가 undefined 가 아니라면 이를 안정된 상타로 봅니다. 그리고 digest loop가 끝이 나고 나가면서 확인해야하는 리스트에서 제외가 됩니다. 그리고 그 제외된 리스트는 queue에 따로 저장이 됩니다. 일반적인 digest 루프가 진행이 됩니다. digest루프가 끝이 나고 모든 값들에 값이 안정화가 되면 이제 아까 따로 queue에 저장해둔 리스트를 확인하여 아직 그값들이 undefined가 인지 아닌지를 확인 합니다. 그리고 이러한 작업을 반복하면서 값들을 지속적으로 바인딩 할것인지 안할것인지에 대한 작업이 반복이 됩니다.

How to benefit from one-time binding

그럼 one-time 바인딩을 적용하기에 적절한 예제 세가지가 있습니다.

첫번째로로 특정 텍스트나 속성을 추가 해야하는 경우입니다.

text: {{::name}}

두번째로눈 Directive가 값의 변화가 없는 양방항 바인딩고 파라메터인 경우입니다.

someModule.directive('someDirective', function() { return { scope: { name: '=', color: '@' }, template: '{{name}}: {{color}}' }; });

마지막으로 directive가 특정 작업을 하는 경우입니다.

{{item.name}};

이상으로 Angualr의 표현식들에 대해서 알아봤습니다.

from http://yubylab.tistory.com/71 by ccl(A) rewrite - 2020-03-07 01:21:01