>웹 프론트엔드 >JS 튜토리얼 >angle.js 중국어 교육 영상 자료 공유

angle.js 중국어 교육 영상 자료 공유

巴扎黑
巴扎黑원래의
2017-08-30 14:48:201456검색

AngularJS는 프런트엔드 개발 부담을 단순화하는 데 도움이 되도록 Google 개발자가 설계하고 개발한 프런트엔드 개발 프레임워크입니다. AngularJS는 글로벌 프론트 엔드 프레임워크 중 1위를 차지합니다. 현재 중국에는 중국어 AngularJS 비디오 튜토리얼이 거의 없기 때문에 이 "angular.js 중국어 교육 비디오 튜토리얼" 세트가 탄생했습니다!

AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 표시를 위해 설계된 훌륭한 선언적 언어이지만 웹 애플리케이션 구축에 있어서는 취약합니다. 그래서 나는 브라우저가 내가 원하는 것을 할 수 있도록 몇 가지 작업(원한다면 트릭)을 수행했습니다.

일반적으로 동적 애플리케이션을 구축할 때 정적 웹 페이지 기술의 단점을 해결하기 위해 다음 기술을 사용합니다.

클래스 라이브러리 - 클래스 라이브러리는 웹 애플리케이션 작성에 도움이 될 수 있는 기능 모음입니다. 제어권을 갖는 것은 귀하의 코드이며 라이브러리를 언제 사용할지 결정하는 것은 귀하입니다. 클래스 라이브러리에는 jQuery 등이 포함됩니다.

프레임워크 - 프레임워크는 이미 구현된 특별한 웹 애플리케이션입니다. 특정 비즈니스 로직으로만 채우면 됩니다. 여기서 프레임워크는 특정 애플리케이션 논리에 따라 코드를 호출하는 선도적인 역할을 합니다. 프레임워크에는 녹아웃, 새싹코어 등이 포함됩니다.

angle.js 중국어 교육 영상 자료 공유

동영상 재생 주소: http://www.php.cn/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.