일회성 바인딩 표현식이란 무엇입니까?

{{::name}}처럼 표현식 앞에 콜론 두 개를 붙이면 값이 확인되면 더 이상 해당 표현식을 감시하지 않습니다. 이렇게 하면 감시자가 제거되어 정적 바인딩이 많은 페이지에서 다이제스트 비용이 절감됩니다.

$eval은 $parse 및 $interpolate와 어떻게 다른가요?

`$eval`은 문자열을 스코프 내에서 즉시 평가합니다. `$parse`는 반복 평가에 사용할 수 있는 재사용 가능한 함수를 반환합니다. `$interpolate`는 단일 표현식이 아닌 중괄호를 포함하는 전체 템플릿 문자열을 처리합니다.

AI가 AngularJS 표현식을 Angular 템플릿으로 변환할 수 있을까요?

대부분 그렇습니다. AI 도구는 중괄호를 유지하고 필터를 파이프로 다시 작성하지만, `ng-init` 변수는 Angular에 해당하는 것이 없으므로 수동으로 컴포넌트 클래스로 옮겨야 합니다.

AngularJS 표현식: 배열, 객체, $eval, 문자열

⚡ 스마트 요약

AngularJS 표현식은 이중 중괄호 안에 넣어 데이터를 템플릿에 직접 바인딩하는 코드 조각입니다. 숫자, 문자열, 객체 및 배열을 평가할 수 있으며, 컨트롤러 내부에서 `$eval` 함수를 사용하면 동일한 평가를 수행할 수 있습니다.

🧩 바인딩 구문: Double 중괄호는 표현식이 있는 위치에 값을 렌더링하여 ng-bind 지시문과 동일한 결과를 제공합니다.
🔢 지원되는 유형: Numbers, 문자열, Java점 표기법으로 접근하는 스크립트 객체와 인덱스로 접근하는 배열은 모두 올바르게 평가됩니다.
🏷️ 인라인 변수: `ng-init` 지시문은 뷰 수준 변수를 선언하며, 표현식은 컨트롤러 없이도 해당 변수를 읽을 수 있습니다.
🛡️ 관대한 평가: 정의되지 않은 속성은 ReferenceError를 throw하는 대신 undefined를 반환합니다. Java스크립트가 오류를 발생시킬 것입니다.
🚫 하드 리미트: 반복문, 예외 처리, 함수 선언, 정규 표현식, 쉼표 및 void 연산자는 사용할 수 없습니다.
⚙️ 컨트롤러 평가: $scope.$eval은 컨트롤러 코드의 표현식 문자열을 평가하고 그 결과를 뷰에 표시합니다.
⚠️ 지원 상태: AngularJS는 2021년 12월 31일부로 지원이 종료되었으며 더 이상 보안 패치가 제공되지 않습니다.

AngularJS 표현식이란 무엇인가요?

표현식은 이중 중괄호 안에 쓰인 변수입니다. {{ }}이 함수들은 AngularJS에서 매우 흔하게 사용되며, 이 시리즈의 앞부분 튜토리얼에서도 자주 등장합니다.

⚠️ 지원 관련 공지: AngularJS가 도달했습니다 2021년 12월 31일부로 생산 종료 더 이상 패치나 보안 수정이 제공되지 않습니다. 아래 구문은 기존 AngularJS 1.x 애플리케이션을 유지 관리하는 데에는 여전히 유효하지만, 새로운 프로젝트에서는 최신 버전을 사용해야 합니다. 모난여기서 보간 중괄호는 여전히 존재하지만 ng-init $eval 하지 마라.

AngularJS 표현식을 예제를 통해 설명하세요.

AngularJS 표현식은 다음과 같이 이중 중괄호 안에 작성됩니다. {{expression}}.

구문 : 표현의 간단한 예는 다음과 같습니다. {{5 + 6}}.

AngularJS 표현식은 ng-bind 디렉티브와 동일한 방식으로 데이터를 HTML에 바인딩하며, AngularJS는 표현식이 배치된 위치에 정확하게 데이터를 표시합니다.

이 예시에서는 간단한 숫자 덧셈을 수식으로 나타내는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code 설명 :

ng-app 지시문이 비어 있다는 것은 어떤 모듈도 컨트롤러를 제공하지 않는다는 의미입니다. ��ħ또는 이 페이지에 대한 서비스.
간단한 표현식으로 두 숫자를 더할 수 있습니다.

출력:

9와 6을 더하면 결과인 15가 표시됩니다.

AngularJS와 Numbers

표현식은 숫자와 함께 작동합니다. 이 예제는 두 숫자 변수를 곱합니다. margin profit그리고 제품을 표시합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code 설명 :

`ng-init` 지시문은 뷰 자체에서 변수와 그 값을 정의하는데, 이는 마치 일반 코드의 지역 변수와 유사합니다. 프로그래밍 언어. 이리 margin profit 선언되고 할당됩니다.
그런 다음 해당 표현식은 두 로컬 변수를 곱합니다.

출력:

2와 200을 곱하면 결과인 400이 표시됩니다.

AngularJS 문자열

표현식은 문자열에서도 작동합니다. 이 예제는 다음을 정의합니다. firstName lastName 그리고 둘 다 표시합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code 설명 :

ng-init 지시문은 정의합니다. firstName 값과 함께 "Guru"및 lastName 값 "99"를 가지고 있습니다.
표현식 {{firstName}} {{lastName}} 해당 변수들을 읽어서 뷰에 표시합니다.

출력:

두 값 모두 화면에 나타납니다.

AngularJS 객체

표현은 다음과 같이 작동합니다. JavaScript 객체는 이름-값 쌍으로 구성됩니다. 의 구문은 다음과 같습니다. Java스크립트 객체는 다음과 같습니다.

var car = {type: "Ford", model: "Explorer", color: "White"};

이 예시는 다음을 정의합니다. person 두 개의 키-값 쌍을 담고 있는 객체 firstName lastName.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code 설명 :

ng-init 지시문은 객체를 정의합니다. person 키-값 쌍을 사용하여 firstName 로 설정 "Guru"및 lastName "99"로 설정됩니다.
표현식 {{person.firstName}} {{person.lastName}} 해당 멤버들을 읽으세요. 이 멤버들은 객체에 속하기 때문에 값을 얻으려면 점 표기법이 필요합니다.

출력:

가치 firstName lastName 화면에 나타납니다.

AngularJS 배열

표현식은 배열과 함께 작동합니다. 이 예제는 학생의 세 과목 성적을 저장하는 배열을 정의하고 각 값을 표시합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code 설명 :

ng-init 지시문은 배열을 정의합니다. marks 세 가지 값 1, 15, 19를 사용합니다.
형태의 표현 marks[index] 각 요소를 읽으세요.

출력:

배열에 정의된 마크가 표시됩니다.

AngularJS 표현식 기능 및 제한 사항

기능

AngularJS 표현식은 다음과 같습니다. Java스크립트 표현식은 많은 부분에서 동일한 기능과 유연성을 공유합니다.
어디에 Java스크립트가 정의되지 않은 속성에 대해 ReferenceError 또는 TypeError를 발생시키지만, AngularJS 평가는 관대하여 undefined 또는 null을 반환합니다.
필터는 데이터가 표시되기 전에 형식을 지정하기 위해 표현식 내부에 적용할 수 있습니다.
삼항 연산자가 지원됩니다. {{ isReady ? 'Yes' : 'No' }} 유효합니다.

제한 사항

AngularJS 표현식 내에서는 반복문과 예외 처리를 사용할 수 없습니다. 조건 논리는 삼항 연산자로 제한됩니다. if 재무제표는 제공되지 않습니다.
함수는 표현식 내에서 선언할 수 없으며, ng-init 지시문 내에서도 마찬가지입니다.
정규 표현식은 표현식 내부에 생성할 수 없습니다. 정규 표현식은 문자열을 일치시키는 데 사용되는 기호와 문자의 조합입니다. 예를 들어, .*\.txt$그리고 그러한 문자 그대로의 표현은 허용되지 않습니다.
쉼표 연산자(,)와 void 운영자는 허용되지 않습니다.

ng-bind와 표현식 중괄호: 어떤 것을 사용해야 할까요?

Double `#` 태그와 `ng-bind` 디렉티브는 동일한 렌더링 결과를 생성하므로 둘 중 하나를 선택하는 것이 임의적인 것처럼 보일 수 있습니다. 하지만 그렇지 않습니다. 두 방식은 AngularJS 로딩이 완료되기 직전의 순간에 다르게 동작하며, 그 차이는 페이지를 사용하는 사용자에게 분명히 드러납니다.

아래	{{ expression }}	ng-바인드
쓰여진	요소 내용	요소 속성
AngularJS가 로드되기 전	교정기가 화면에 잠깐 나타납니다.	아무것도 표시되지 않습니다
가독성	높을수록 값이 일렬로 정렬됩니다.	낮은 값 — 속성에 값이 숨겨져 있습니다.
요소당 여러 값	가능	아니요, 바인딩은 하나만 가능합니다.
일회성 바인딩	예 `{{::value}}`	예 `ng-bind="::value"`

중괄호가 잠시 나타나는 현상을 보간되지 않은 콘텐츠의 일시적인 노출이라고 하는데, 이는 브라우저가 AngularJS 컴파일 전에 마크업을 렌더링하기 때문에 발생합니다. 스크롤 없이 보이는 영역에 콘텐츠를 표시하려면 `ng-bind`를 사용하거나 `ng-cloak` 디렉티브를 추가하세요. 중괄호는 특히 하나의 요소 안에 여러 값이 포함될 때와 같이 다른 모든 영역에서 여전히 더 명확하고 읽기 쉬운 선택입니다.

표현식과 $eval의 차이점

The $eval 이 함수는 컨트롤러 내부의 표현식을 평가합니다. 표현식은 뷰에서 평가되는 반면, $eval 컨트롤러 코드에서 평가됩니다.

이 예에서는 다음을 사용합니다. $eval 두 숫자를 더하고 그 결과를 스코프 객체에 저장하여 뷰에서 표시할 수 있도록 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code 설명 :

두 개의 범위 변수, a b각각은 1의 값을 갖습니다.
$scope.$eval 두 수의 합을 평가하고 그 결과를 스코프 변수에 할당합니다. value.
그러면 화면에 표시됩니다. value.

출력:

출력 결과는 내부에서 평가된 표현식을 보여줍니다. 제어 장치두 스코프 변수의 합이 뷰로 전송되어 표시됩니다.

자주 묻는 질문

표현식 앞에 콜론 두 개를 붙이는 방법(예: ...) {{::name}}값이 확인되면 더 이상 감시하지 않습니다. 이렇게 하면 감시자가 제거되어 정적 바인딩이 많은 페이지에서 다이제스트 비용이 절감됩니다.

$eval 문자열을 즉시 평가합니다. 범위. $parse 반복 평가에 사용할 수 있는 재사용 가능한 함수를 반환합니다. $interpolate 단일 표현식이 아닌 중괄호를 포함하는 전체 템플릿 문자열을 처리합니다.

대개. AI 툴은 중괄호를 유지하고 필터를 파이프로 다시 작성하지만, ng-init 변수에는 Angular에 해당하는 기능이 없으므로 수동으로 컴포넌트 클래스로 옮겨야 합니다.

AI 도구는 바인딩 내의 함수 호출을 찾기 위해 템플릿을 스캔하는데, 이 작업은 다이제스트 주기마다 다시 실행되며, 결과를 스코프에 캐싱하거나 일회성 바인딩으로 전환하는 것을 제안합니다.

AngularJS 평가는 의도적으로 관대합니다. 속성이 누락되면 undefined가 반환되며, 이는 빈 문자열로 렌더링되므로 빈 값은 런타임 오류가 아니라 속성 경로의 오타를 의미하는 경우가 많습니다.

AngularJS 표현식: 배열, 객체, $eval, 문자열

AngularJS 표현식이란 무엇인가요?

AngularJS 표현식을 예제를 통해 설명하세요.

AngularJS와 Numbers

AngularJS 문자열

AngularJS 객체

AngularJS 배열

AngularJS 표현식 기능 및 제한 사항

ng-bind와 표현식 중괄호: 어떤 것을 사용해야 할까요?

표현식과 $eval의 차이점

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

AngularJS 표현식이란 무엇인가요?

AngularJS 표현식을 예제를 통해 설명하세요.

AngularJS와 Numbers

AngularJS 문자열

관련 기사

AngularJS 객체

AngularJS 배열

AngularJS 표현식 기능 및 제한 사항

ng-bind와 표현식 중괄호: 어떤 것을 사용해야 할까요?

표현식과 $eval의 차이점

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기