首頁 > web前端 > js教程 > angular.js中文教學影片資料分享

angular.js中文教學影片資料分享

巴扎黑
發布: 2017-08-30 14:48:20
原創
1440 人瀏覽過

AngularJS是Google開發者設計和開發的一套前端開發框架,幫助你簡化前端開發的負擔。在全球的前端框架中AngularJS排名第一,目前國內的AngularJS中文視頻教程少之甚少,於是這套《angular.js中文教學視頻教程》應運而生了!

AngularJS是為了克服HTML在建構應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言,但要建立WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事。

通常,我們是透過以下技術來解決靜態網頁技術在建構動態應用上的不足:

#類別庫 - 類別庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的程式碼,由你來決定何時使用類別庫。類別庫有:jQuery等

框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填入特定的業務邏輯。這裡框架是起主導作用的,由它來根據具體的應用邏輯來呼叫你的程式碼。框架有:knockout、sproutcore等。

angular.js中文教學影片資料分享

影片播放位址://m.sbmmt.com/course/644.html

本影片學習困難:

1.控制元素顯示,隱藏狀態

頁面中呼叫ng-show,ng-hide,ng-switch指令綁定$scope物件的屬性值

ng-switch 指令中on可有可無,當on於多個或某個ng-switch-when指令的元素匹配時,這些元素顯示,如果沒有匹配的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. 表單中的checkbox控制項與redio控制項

透過ng-model綁定控制器的屬性,一旦綁定完成,首次載入時,將以綁定的值作為控制項的初始化狀態.

<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只有被選取的會傳回其被選取的值.

以上是angular.js中文教學影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板