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

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

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

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

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

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

影片播放位址：http://www.php.cn/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中文網其他相關文章！