AngularJS是Google開發者設計和開發的一套前端開發框架,幫助你簡化前端開發的負擔。在全球的前端框架中AngularJS排名第一,目前國內的AngularJS中文視頻教程少之甚少,於是這套《angular.js中文教學視頻教程》應運而生了!
AngularJS是為了克服HTML在建構應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言,但要建立WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事。
通常,我們是透過以下技術來解決靜態網頁技術在建構動態應用上的不足:
#類別庫 - 類別庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的程式碼,由你來決定何時使用類別庫。類別庫有:jQuery等
框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填入特定的業務邏輯。這裡框架是起主導作用的,由它來根據具體的應用邏輯來呼叫你的程式碼。框架有:knockout、sproutcore等。
影片播放位址://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中文網其他相關文章!