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中文网其他相关文章!