AngularJS 프런트엔드 프레임워크를 사용하는 방법은 무엇입니까? Anglejs 프런트엔드 프레임워크 사용 소개

이 글은 주로 angularjs의 프론트엔드 프레임워크에 대한 학습을 ​​소개합니다. 당신이 알아야 할 모든 것이 이 글에 있습니다. 지금 이 글을 함께 읽어봅시다

1. AngularJS의 주요 소개:

AngularJS는 애플리케이션 데이터를 HTML 요소에 바인딩합니다.

AngularJS는 HTML 요소를 복제하고 반복할 수 있습니다.

AngularJS는 HTML 요소를 숨기고 표시할 수 있습니다.

AngularJS는 코드를 추가할 수 있습니다. "뒤에" HTML 요소

AngularJS는 입력 유효성 검사를 지원합니다.

2. AngularJS 지시문 기능:

ng-directives HTML 확장

ng-model 지시문은 요소 값(예: 입력 필드 값)을 ng-bind에 바인딩합니다. 명령어는 애플리케이션 데이터를 HTML 보기에 바인딩합니다. 즉, 배경 데이터를 ng-init 초기화 페이지의 프런트 엔드

변수에 바인딩합니다

              AngularJS

Module

은 AngularJS 애플리케이션을 정의합니다. AngularJS

Controller

는 AngularJS 애플리케이션을 제어하는 ​​데 사용됩니다. 3. AngularJS 표현식:

AngularJS 표현식은 이중 중괄호 안에 작성됩니다:

{{ 표현식 }}

. AngularJS 표현식은 데이터를 HTML에 바인딩하는데, 이는

ng-bind

지시어와 유사합니다.

            AngularJS는 표현식이 작성된 위치에 데이터를 "출력"합니다.

4. AngularJS 표현식과 JavaScript 표현식의 차이점

JavaScript 표현식과 유사하게 AngularJS 표현식에는 문자, 연산자, 변수가 포함될 수 있습니다.

JavaScript 표현식과 달리 AngularJS 표현식은 HTML로 작성할 수 있습니다

JavaScript 표현식과 달리 AngularJS 표현식은 조건부 판단, 루프 및 예외를 지원하지 않습니다.

            JavaScript 표현식과 달리 AngularJS 표현식은 필터를 지원합니다.

5. AngularJS는 모듈을 정의합니다:

varapp = angular.module('myApp', []);

6. AngularJS 명령어 학습:

• [ng-init: 데이터 초기화]

1. 단일 변수 초기화

3446f59388e1f0651f8e25559311254ed3771b0717303fa4cff39e39630091b7이름: 0c896ea1d960c99e255792c727142fc9a40bb0e8c769d46bcc97ea6ddd88211f8c05e4ba700ecf3a3fba632670b48d2e8c05e4ba700ecf3a3fba632670b48d2e[실행 결과: 이름: Doe】

2. Json 개체 초기화

                                                                ng-init ="사람 / p> f73046fc55f21790882d8f5d8ce54eee & lt; p>세 번째 값은 {{ 포인트[2] }}f88c17d37eed965a330e90d8eb31b1e4 30bb84f79bc3792a0c7c8cddba82d94c[실행 결과: 세 번째 값은 19]【ng-model: 데이터 동기화】 1. AngularJS 데이터 바인딩에 ng-model을 사용하고 동시에 백엔드로 데이터를 전송합니다. .프런트엔드에 관련 데이터가 2개 있는 한 한쪽이 변경되면 다른 쪽도 즉시 변경됩니다

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

[ng-repeat: 데이터 루프】 1 AngularJS는 ng-repeat를 사용하여 데이터를 반복합니다. 루프의 html 태그는 ng-repeat 명령어가 있는 태그입니다.

                        5febe34c59450fb17b70c81c5ffd10f9 

                                  d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                  94cf9f71896cce458971adf2bc978fb1

                                          4fa76e168b8fe1de649ff42059b63884 {{ x }} 00264599778bfef15205fe2f698216e0

                                  6f304873f188339d0626400a7defcfa7 

                        721bb74aac4891df28f85ad785726569【执行结果：li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 AngularJS应用程序的"所有者"。     

2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

3、ng-app 指令定义了 AngularJS 应用程序的 根元素

4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

•  <p ng-app="" ng-init="firstName=&#39;John’">
                       <p>姓名为 <span ng-bind=“firstName”></span></p>
           </p

•  【ng-bind：数据绑定】  
  

         1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

ㅋㅋㅋ

"firstName='John';lastName='Doe' ">d6486db403777a996cb181efbf462e08이름: d5f7472d412d978fa8c2d446a56c1adf42c1004020484cb0179721a070492e002e5e187788338ea5be1d20829241d592 < ;/p>[실행 결과: Name: Doe] 2. Json 객체 초기화 dd731fc22dca7e740600aa1bf588211154bdf357c58b8a65c66d7c19c8e4d1142de52fdac855d5bc9514ca9dee18399f88fd1629db591ae40fc8c261e5f8edd9[실행 결과: The last name is Doe] 3 , 배열 객체 초기화 ( 배열 첨자는 0부터 시작)                       ng-init 스팬 클래스 ="hl- quote">"points=[1,15,19,2,40]"

>477692d62f3bdbd6fcfa53a3535cc9a0b4c9be04d15c74c437ee9e0023aff07354bdf357c58b8a65c66d7c19c8e4d114f5ce864d80ef2d6429ef513758752d2bc6f9b616c94afcc2ee95ee96dc6e2995[실행 결과: 세 번째 값은 19][ng-show: Data display] 1. ng-show 지시어는 ng-show 속성에 있습니다. true이면 ng-show 명령이 있는 태그 내용이 표시됩니다 +              이메일:

                                                                   ng-show=" myForm.myAddress.$error.email " & gt; &는 합법적인 사서함 주소가 아닙니다 & lt; /span & gt; & lt;

/form

& gt; 값이 법적 이메일 주소인 경우 "법적 이메일 주소 아님"이 표시되고, 그렇지 않으면 표시됩니다! {] {{Myform.myaddress.$ Valid}}(입력된 값이 합법적인 경우 true) {{myForm.Myaddress.$ DIRTY}(값이 변경된 경우) {{myForm.myAddress. $touched}} (터치스크린을 통해 클릭하면 true) [일반적으로 ng-show의 판단 조건으로 사용됩니다] [ng-options: 드롭다운 선택 ]
1. 코드 생성 baf277326ac4bedb2ff5c22f00dfdaa6 {{x}} e5d67c458009e608b39986c257badf97

d79f34d20a7b37229d456dc58029d9bf

+ ~ >              둘 사이의 차이점은 다음과 같습니다.

                                                        ng-반복을 사용하여 문자열을 선택하고 ng-options를 사용하여 개체를 선택합니다

【

ng-disabled

: 버튼 속성이 다음과 같은지 여부를 나타냅니다. available]

1. true는 버튼을 사용할 수 없음을 의미하고, false는 버튼을 사용할 수 있음을 의미합니다.
【

ng-hide

: 마크가 숨겨져 있는지 여부를 나타냅니다】

• True는 ng-hide가 위치한 표시가 숨겨져 있음을 의미하고 false는 ng-hide가 위치한 표시가 표시됨을 의미하며 이는 ng-show

  
  

[

ng-click

: AngularJS 클릭 이벤트]

• 1. ng-click 지시문은 AngularJS 클릭 이벤트를 정의합니다.

  7. 사용자 지정 지시문의 정의 및 사용
  

【

.directive: 사용자 지정 지침 추가 】

1. 지시문 정의

• app.directive("runoobDirective", function() {

  var app = angle.module("myApp", []);
  

  return {
                Restrit ;

  });

  2. 지시 호출

  표시 호출:

  1d0bb9fc4e9ccccb77ba323feb5b6325

  속성 호출 :

  8e5d285db9fda7424edaff14b897696e

95bc0f368fd9bd8fb443cbc0e719f12c댓글 호출: e4281b956ef1f9dad0d4c9f7d1f4d8f5 [실행 결과: Custom 지시어! 실행 결과는 주석이 아님을 주의하세요】 3. 명령어의 사용 범위를 제한합니다.(기본값은 EA로)

E: 요소 이름으로 사용합니다. A: 속성으로 사용 C: 클래스 이름으로 사용 M: 주석으로 사용 [참고] 1. type="number"는 이 입력 상자가 숫자 형식임을 의미합니다. 위아래로 클릭하면 증가할 수 있습니다. 또는 숫자를 줄이세요. 단, 숫자가 아닌 문자는 입력 가능합니다

이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 AngularJS 프런트엔드 프레임워크를 사용하는 방법은 무엇입니까? Anglejs 프런트엔드 프레임워크 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!