이 글은 주로 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="names=['Jani','Hege','Kai']”> <p>使用 ng-repeat 来循环数组p> <ul> <li ng-repeat="x in names"> {{ x }} li> ul> p 【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 指令在网页加载完毕时会自动引导（自动初始化）应用程序 【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 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> <p ng-app="" ng-init="firstName='John’">
<p>姓名为 <span ng-bind=“firstName”></span></p>
</p
><
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; /option>
& gt; 값이 법적 이메일 주소인 경우 "법적 이메일 주소 아님"이 표시되고, 그렇지 않으면 표시됩니다! {] {{Myform.myaddress.$ Valid}}(입력된 값이 합법적인 경우 true) {{myForm.Myaddress.$ DIRTY}(값이 변경된 경우) {{myForm.myAddress. $touched}} (터치스크린을 통해 클릭하면 true) [일반적으로 ng-show의 판단 조건으로 사용됩니다] [ng-options: 드롭다운 선택 ]
1. 코드 생성 <option ng-repeat=
"x in names" > {{x}} <
/select
>
+ ~ > 둘 사이의 차이점은 다음과 같습니다.
ng-반복을 사용하여 문자열을 선택하고 ng-options를 사용하여 개체를 선택합니다
【
ng-disabled: 버튼 속성이 다음과 같은지 여부를 나타냅니다. available]
: 마크가 숨겨져 있는지 여부를 나타냅니다】
: AngularJS 클릭 이벤트]
7. 사용자 지정 지시문의 정의 및 사용
.directive: 사용자 지정 지침 추가 】
1. 지시문 정의
var app = angle.module("myApp", []);
});
2. 지시 호출표시 호출:<<runoob-directive
/runoob-directive>
속성 호출 :p<
runoob-directive>
/p
>학급 이름 호출: < ; /p>
E: 요소 이름으로 사용합니다. A: 속성으로 사용 C: 클래스 이름으로 사용 M: 주석으로 사용 [참고] 1. type="number"는 이 입력 상자가 숫자 형식임을 의미합니다. 위아래로 클릭하면 증가할 수 있습니다. 또는 숫자를 줄이세요. 단, 숫자가 아닌 문자는 입력 가능합니다
이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 AngularJS 프런트엔드 프레임워크를 사용하는 방법은 무엇입니까? Anglejs 프런트엔드 프레임워크 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
