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

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

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

Angularjs는 Java의 Spring 프레임워크와 유사하다고 생각됩니다. 이는 중앙 컨테이너 위치에 있으며 다른 구성 요소를 서로 연결합니다. 특수한 시나리오에서는 프레임워크에 따라 확장할 수 있습니다. 아이디어.

가장 기본적인 콘텐츠부터 시작해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

머리>

문자열 리터럴 값 직접 출력

안녕하세요 {{"세계"}}

자리 표시자를 사용하여 변수 출력

안녕하세요 {{인사말}}

ng-bind 지시문을 사용하여 변수 출력

안녕하세요

함수 HelloController($scope) {
          $scope.greeting = "세계";
}

본문>

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

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

{{}}는 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이 최종 릴리스 버전이 아니기 때문일 수 있습니다.