ANGULARJS에서 단방향 바인딩을 구현하기 위해 NG-BIND 지시문을 사용하는 예-PHP开发-php.cn

ANGULARJS에서 단방향 바인딩을 구현하기 위해 NG-BIND 지시문을 사용하는 예

高洛峰

풀어 주다： 2016-12-24 09:54:27

원래의

1217명이 탐색했습니다.

이 기사에서는 AngularJS 프레임워크를 간략하게 소개한 후 예제를 사용하여 {{}} 보간 방법과 ng-bind 지시문의 사용을 보여줍니다.

프런트엔드 개발을 강화하고 단순화하는 클래스 라이브러리인 jquery와 달리,angularjs는 완전한 웹 프론트엔드 프레임워크이므로 학습 곡선이 훨씬 높습니다.

angularjs는 Java의 Spring 프레임워크와 유사하다고 생각됩니다. 이는 중앙 컨테이너 위치에 있으며 다른 구성 요소와 결합되어 있습니다. 프레임워크 아이디어.

가장 기본적인 내용부터 시작해 보겠습니다.

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
<div>
    <p>使用占位符输出变量</p>
    Hello {{greeting}}
    <hr>
</div>
<div>
    <p>使用ng-bind指令输出变量</p>
    Hello <span ng-bind="greeting"></span>
    <hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.greeting = "World";
    }
</script>
</body>
</html>

로그인 후 복사

ng-app은angularjs 모듈을 선언하고 html 태그 선언 범위로 제한됩니다.

ng-controller는 모듈에 anglejs 컨트롤러를 선언합니다. 컨트롤러는 여러 개가 있을 수 있지만 컨텍스트는 격리되어 컨트롤러의 범위를 최대한 줄여야 합니다.

{{}}는 JSP의 EL 표현식 ${}와 유사한angularjs의 보간 구문입니다. 첫 번째 출력은 "World"가 리터럴 값이고 프로그램이 이를 직접 출력하기 때문입니다. 두 번째 출력은 Greeting이 컨트롤러에 정의된 변수이기 때문에 변수에 해당하는 값도 출력됩니다. World; 세 번째 출력 Anglejs에 내장된 ng-bind 속성 지시문이 사용됩니다. 최종 결과는 {{}}와 동일하지만 = 지시어 뒤에 문자열이 있으므로 실수하지 마세요.

js의 HelloController는 본문의 명령에 해당합니다. 입력 매개변수 $scope는 프레임워크에서 제공하는 서비스로, 현재 컨트롤러의 컨텍스트를 나타냅니다. 프레임워크가 자동으로 수행하는 다른 유사한 서비스도 있습니다. 이에 대해서는 나중에 자세히 배우게 됩니다. 메소드 본문에는 한 줄만 있으며 html 코드에서 참조되는 변수인 $scope에 변수를 정의합니다.

이 글은 매우 간단합니다. 코드를 복사하기만 하면 실행됩니다. angle.min.js는 1.2 브랜치의 최신 버전입니다. 버전 1.3.0에서는 동일한 코드를 실행할 수 없습니다. 이유는 1.3.0이 최종 릴리스 버전이 아니기 때문일 수 있습니다.

ANGULARJS에서 NG-BIND 명령어를 사용한 단방향 바인딩의 더 많은 예를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!