AngularJS는 프런트엔드 개발 부담을 단순화하는 데 도움이 되도록 Google 개발자가 설계하고 개발한 프런트엔드 개발 프레임워크입니다. AngularJS는 글로벌 프론트 엔드 프레임워크 중 1위를 차지합니다. 현재 중국에는 중국어 AngularJS 비디오 튜토리얼이 거의 없기 때문에 이 "angular.js 중국어 교육 비디오 튜토리얼" 세트가 탄생했습니다!
AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 표시를 위해 설계된 훌륭한 선언적 언어이지만 웹 애플리케이션 구축에 있어서는 취약합니다. 그래서 나는 브라우저가 내가 원하는 것을 할 수 있도록 몇 가지 작업(원한다면 트릭)을 수행했습니다.
일반적으로 동적 애플리케이션을 구축할 때 정적 웹 페이지 기술의 단점을 해결하기 위해 다음 기술을 사용합니다.
클래스 라이브러리 - 클래스 라이브러리는 웹 애플리케이션 작성에 도움이 될 수 있는 기능 모음입니다. 제어권을 갖는 것은 귀하의 코드이며 라이브러리를 언제 사용할지 결정하는 것은 귀하입니다. 클래스 라이브러리에는 jQuery 등이 포함됩니다.
프레임워크 - 프레임워크는 이미 구현된 특별한 웹 애플리케이션입니다. 특정 비즈니스 로직으로만 채우면 됩니다. 여기서 프레임워크는 특정 애플리케이션 논리에 따라 코드를 호출하는 선도적인 역할을 합니다. 프레임워크에는 녹아웃, 새싹코어 등이 포함됩니다.
동영상 재생 주소: //m.sbmmt.com/course/644.html
이 동영상 학습의 어려움:
1 요소의 표시 및 숨겨진 상태를 제어합니다.
Call ng - 페이지에서 show, ng-hide 및 ng-switch 명령은 $scope 개체의 속성 값을 바인딩합니다. ng-switch 명령의 on은 ng-switch-의 여러 요소 또는 하나와 일치합니다. 지시 시 일치하는 ng-switch-default가 없으면 이러한 요소가 표시됩니다.
<div ng-show = {{isShow}}> div </div> <div ng-hide = {{isHide}}>hide</div> <ul ng-switch on={{switch}}> <li ng-switch-when="1">taoguorong</li> <li ng-switch -default>more</li> </ul>
2. 기본 양식 유효성 검사 기능
$pristine: 양식 또는 컨트롤 내용이 입력되지 않았는지 여부
$dirty: 양식이 있는지 여부 또는 컨트롤 내용이 입력되었습니다.
$valid: 양식 또는 컨트롤 내용이 확인되었는지 여부
$invalid: 양식 또는 공간 내용이 확인되지 않았는지 여부
$error: 양식 또는 컨트롤이 확인되었을 때 오류 메시지
<form name="temp_form" ng-submit="save()"> <div> <input name="t_email" ng-model = "email" type="email" required/> <span ng-show="temp_form.t_email.$error.required> 邮件不能为空 </span> <span ng-show="temp_form.t_email.$error.email> 邮件格式不对 </span </div> <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/> </form>
3. 양식의 체크박스 컨트롤 그리고 redio 컨트롤
은 바인딩이 완료되면 컨트롤이 로드될 때 컨트롤의 초기화 상태로 사용됩니다.
<form name="temp_form" ng-submit="save()"> <div> <input name="t_email" ng-model = "email" type="email" required/> <span ng-show="temp_form.t_email.$error.required> 邮件不能为空 </span> <span ng-show="temp_form.t_email.$error.email> 邮件格式不对 </span </div> <div> <input type="checkbox" ng-model = "a" ng-true-value="同意" ng-false-value = "不同意">同意 </div> <div> <input type="rediio" ng-model = "a" value="男">男 <input type="rediio" ng-model = "a" value="女">女 </div> <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/> </form>
ng-true-value는 선택 값 이후에 반환됨을 의미하며, 후자는 선택되지 않았을 때 반환된 값을 나타내며, redio는 선택한 경우에만 선택한 값을 반환합니다.
위 내용은 angle.js 중국어 교육 영상 자료 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!