표현식은 JavaScript와 같은 코드 스 니펫이며 일반적으로 경계 영역 (예 : {{expression}})에 배치됩니다. 표현식은 $ parse 서비스 (http://code.angularjs.org/1.0.2/docs/api/ng.$parse)를 통해 구문 분석 및 실행됩니다.
예를 들어, 다음은 각도의 유효한 표현입니다.
1. 각도 표현 대 JS 발현
이것은 사람들이 각도 뷰 표현을 JavaScript 표현으로 연관시키는 것이 쉽지만, Angular는 JavaScript의 Eval ()을 통해 표현식을 평가하지 않기 때문에 완전히 정확하지는 않습니다. 각도 표현을 다음과 같은 차이점을 가진 JavaScript 표현으로 생각할 수 있습니다.
반면, 임의의 JavaScript 코드 (각도 표현식)를 실행하려면 해당 코드를 컨트롤러의 메소드 중 하나에 작성하여 호출 할 수 있습니다. JavaScript의 각도 표현식을 평가하려면 $ atal () 메소드를 사용할 수 있습니다.
<! docType html> <html lang = "Zh-Cn"ng-app = "expressionTest"> <head> <meta charset = "utf-8"> <title> expression-e1 </title> <스타일 유형 = "text/css"> .ng-cloak {display : 없음; } </style> </head> <body ng-controller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> expression : <input type = "text"ng-model = "expr"/> <button ng-click = "addexp (expr)"> expr. ng-click = "removeexp ($ index)"href = ""> x </a>] <tt> {{expr}} </tt> => <span ng-bind = "$ parent. $ atpar (expr)"> </span> </li> </ul> <script src = "../ angular-1.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = Angular.Module ( "expressionTest", []); app.controller ( "myctrl", function ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3*10 | currency"; $ scope.addexp = function (expr) {exprs.push (expr); expr); $ scope.removeexp = function (index); }); </script> </body> </html>2. 속성 평가
Angular Expression Parsing 환경의 컨텍스트는 범위이며 JavaScript는 창 (엄격한 모드 Evel을 참조해야 함)이며 각도는 $ 창을 통해 전역 창 객체에 액세스해야합니다. 예를 들어, 표현식의 Window 개체에 정의 된 alert ()을 호출 해야하는 경우 $ window.alert ()를 사용해야합니다. 이는 우연히 글로벌 상태 (미묘한 버그의 일반적인 원천)에 액세스하는 것을 피하기위한 것입니다.
<! docType html> <html lang = "Zh-Cn"ng-app = "property evaluation"> <head> <meta charset = "utf-8"> <title> property evaluation </title> <style type = "text/css"> .ng-cloak {display : 없음; } </style> </head> <hod> <div ng-controller = "myctrl"> name : <입력 ng-model = "name"type = "text"/<button ng-click = "greet ()"> greet </button> </div> <script> </script "type ="text/javascrip "> javascrip. type = "text/javaScript"> var app = Angular.Module ( "PropertyEvaluation", []); app.controller ( "myctrl", function ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.alert ( "hello" + $ scope.name);}); </script> </body> </html>3. 용서 (관용, 결함 공차?)
표현 평가는 정의되지 않고 무의미한 용서입니다. JavaScript에서 A가 물체가 아닌 경우 ABC를 평가하면 예외가 발생합니다. 때때로 이것은 일반 언어에 합리적이며, 표현식 평가는 주로 데이터 바인딩에 사용되며 일반적인 형태는 다음과 같습니다.
{{알파벳}}
A가 존재하지 않으면 예외를 던지는 것보다 디스플레이가 더 합리적이지 않은 것 같습니다 (서버가 응답을 기다리지 않는 한 짧은 시간에 정의됩니다). 표현이 평가 될 때 표현이 충분히 견딜 수없는 경우, 우리는 바인딩 코드를 혼란스럽게 작성합니다.
{((a || {}). b || {}). c}} // this ...
마찬가지로, 함수 ABC ()를 참조 할 때 정의되지 않았거나 null이면 단순히 정의되지 않은 것을 반환합니다.
4. 제어 흐름 명령문 없음
우리는 표현식에 프로세스 제어 진술을 작성할 수 없습니다. 이에 대한 이유는 각도의 핵심 시스템이 적용 논리가보기가 아닌 컨트롤러 (범위)에 있어야하기 때문입니다. 조건부 분기, 루프 또는 예외를보기 표현식에 추가 해야하는 경우 대신 JavaScript 메소드를 위임 할 수 있습니다 (메소드를 범위에서 호출 할 수 있음).
5. 필터
사용자에게 데이터를 제시하면 원래 형식에서 데이터를 친숙한 (읽기 쉬운) 형식으로 변환해야 할 수도 있습니다. 예를 들어, 사용자에게 표시되기 전에 영역을 기반으로 포맷 해야하는 데이터 객체가 있습니다. 우리는 다음과 같은 일련의 필터에 표현을 전달할 수 있습니다.
이름 | 대문자
이 표현식 평가자는 단순히 이름 값을 대문자 필터로 전달할 수 있습니다.
체인 필터는이 구문을 사용합니다.
가치 | 필터 1 | 필터 2
예를 들어 콜론으로 나뉘어진 매개 변수를 필터로 전송할 수도 있습니다.
123 | 번호 : 2
6. Prefix "$"
우리는 그것이 이상하다고 생각할 수 있습니다. 접두사 "$"의 의미는 무엇입니까? API 이름을 다른 API와 구별하기 위해 Angular에서 사용하는 간단한 접두사 (충돌 방지)입니다. Angular가 $를 사용하지 않으면 A.length ()의 평가가 정의되지 않은 반환됩니다. 또는 각도는이 속성을 정의하지 않기 때문입니다.
미래의 Angular 버전이 길이를 증가시키기로 선택할 수 있다는 점을 고려하면이 표현의 동작이 바뀔 것입니다. 더 나쁜 것은 개발자가 길이 속성을 만들어 각도와 충돌 할 수 있다는 것입니다. 이 문제는 Angular가 방법을 추가하여 현재 기존 객체를 확장하기 때문에 존재합니다. Prefix "$"를 추가함으로써 Angular는 특정 네임 스페이스를 유지하므로 Angular를 사용하는 Angular 개발자와 개발자는 조화를 이룰 수 있습니다.