angular.js中文教学视频资料分享

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：

类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

视频播放地址：http://www.gxlcms.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中文教学视频资料分享的详细内容，更多请关注Gxl网其它相关文章！