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. 단일 변수 초기화

<p ng-app="" ng-init="firstName='John'; 이름='Doe' "><p>이름: <span ng-bind= " 이름 + ' ' + 성 ">span>p>p>[실행 결과: 이름: Doe】

2. Json 개체 초기화

                                                                ng-init ="사람 / p> <p ng-app ="" ng-init="points=[1,1 5,19,2,40 ]"> & lt; p>세 번째 값은 {{ 포인트[2] }}

p>

p>[실행 결과: 세 번째 값은 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 명령어가 있는 태그입니다.

                        <p ng-app="" ng-init="names=['Jani','Hege','Kai']”> 

                                  <p>使用 ng-repeat 来循环数组p> 

                                  <ul>

                                          <li ng-repeat="x in names"> {{ x }} li>

                                  ul> 

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

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，

元素是 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' "><p>이름: <span ng -bind=" firstName + ' ' + lastName ">span>p> < ;/p>[실행 결과: Name: Doe] 2. Json 객체 초기화 <p ng-app= " "

ng-init = "person = {FirstName : 'John', lastName : 'doe'} " & gt; & lt; p & gt; 성:<span ng-bind= "person.lastName">p>p >[실행 결과: The last name is Doe] 3 , 배열 객체 초기화 ( 배열 첨자는 0부터 시작)                       ng-init 스팬 클래스 ="hl- quote">"points=[1,15,19,2,40]"

><

p

><span의 세 번째 값 ng-bind="points[2]">p>p >[실행 결과: 세 번째 값은 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. 코드 생성 <option ng-repeat=
"x in names" > {{x}} <

/option>

<

/select

>

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

                                                        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. 지시 호출

  표시 호출:

  <

  runoob-directive

  <

  /runoob-directive

  >

  속성 호출 :

  <

  p

  runoob-directive

  >

<

• /p

  >학급 이름 호출:

  < ; /p>】 3. 명령어의 사용 범위를 제한합니다.(기본값은 EA로)

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

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

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