没有合适的资源?快使用搜索试试~ 我知道了~
首页邹业盛分享:AngularJS学习笔记与实战体验
本篇文章是邹业盛撰写的AngularJS学习笔记,主要针对AngularJS 1.0.x版本进行讲解,该框架由Google开发,主要用于提供JavaScript工具,而非全面的框架解决方案。AngularJS的核心特点在于其数据双向绑定机制,这种机制使得数据与表现形式紧密相连,提高了开发效率和维护性。 AngularJS的设计理念强调将数据和视图分离,但通过双向绑定,两者实现了动态同步,开发者无需手动刷新数据,视图的变化会自动反映到数据,反之亦然。这种特性在前端开发中尤其有用,有助于减少代码复杂性和调试难度。 文章指出,尽管AngularJS与jQuery可以集成使用,但在没有jQuery的情况下,它内置了一个轻量级的库来实现基础的DOM操作。关于浏览器兼容性,AngularJS支持IE8及更高版本,这意味着它在广泛的应用环境中可被广泛应用。 文档的性质是个人学习过程记录,而非系统化的教程,因此可能会存在概念理解不清晰的部分,尤其是在早期阶段。作者建议读者不必过于纠结于早期的概念细节,重点在于掌握如何实际运用AngularJS。作者鼓励读者从一个完整的示例开始学习,例如HTML、head部分引入jQuery和AngularJS的脚本,这将帮助逐步理解和构建基于AngularJS的应用。 通过跟随这个例子,读者将逐渐熟悉AngularJS的基本结构和工作原理,最终在自定义指令等高级主题中深入了解AngularJS的核心功能,从而真正领会其精髓。因此,阅读本文档不仅限于学习理论知识,更是一个实战导向的学习过程。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/10757731/bga.jpg)
事件绑定是模板指令中很好用的一部分。我们可以把相关事件的处理函数直接写在 DOM
中,这样做的最大好处就是可以从 DOM 结构上看出业务处理的形式,你知道当你点击
这个节点时哪个函数被执行了。
ng-change
ng-click
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
对于事件对象本身,在函数调用时可以直接使用 $event 进行传递:
<p ng-click="click($event)">点击</p>
<p ng-click="click($event.target)">点击</p>
7.5. 表单控件
表单控件类的模板指令,最大的作用是它预定义了需要绑定的数据的格式。这样,就可
以对于既定的数据进行既定的处理。
7.5.1. form
form 是核心的一个控件。 ng 对 form 这个标签作了包装。事实上, ng 自己的指令是叫
ng-form 的,区别在于, form 标签不能嵌套,而使用 ng-form 指令就可以做嵌套的表单
了。
form 的行为中依赖它里面的各个输入控制的状态的,在这里,我们主要关心的是 form
自己的一些方法和属性。从 ng 的角度来说, form 标签,是一个模板指令,也创建了一
个 FormController 的实例。这个实例就提供了相应的属性和方法。同时,它里面的控件
也是一个 NgModelController 实例。
很重要的一点, form 的相关方法要生效,必须为 form 标签指定 name 和 ng-controller
,并且每个控件都要绑定一个变量。 form 和控件的名字,即是 $scope 中的相关实例的
引用变量名。
<form name="test_form" ng-controller="TestCtrl">
<input type="text" name="a" required ng-model="a" />
<span ng-click="see()">{{ test_form.$valid }}</span>
</form>
var TestCtrl = function($scope){
$scope.see = function(){
console.log($scope.test_form);
console.log($scope.test_form.a);
}
}
除去对象的方法与属性, form 这个标签本身有一些动态类可以使用:
ng-valid 当表单验证通过时的设置
![](https://csdnimg.cn/release/download_crawler_static/10757731/bgb.jpg)
ng-invalid 当表单验证失败时的设置
ng-pristine 表单的未被动之前拥有
ng-dirty 表单被动过之后拥有
form 对象的属性有:
$pristine 表单是否未被动过
$dirty 表单是否被动过
$valid 表单是否验证通过
$invalid 表单是否验证失败
$error 表单的验证错误
其中的 $error 对象包含有所有字段的验证信息,及对相关字段的 NgModelController 实
例的引用。它的结构是一个对象, key 是失败信息, required , minlength 之类的,
value 是对应的字段实例列表。
注意,这里的失败信息是按序列取的一个。比如,如果一个字段既要求 required ,也要
求 minlength ,那么当它为空时, $error 中只有 required 的失败信息。只输入一个字符
之后, required 条件满足了,才可能有 minlength 这个失败信息。
<form name="test_form" ng-controller="TestCtrl">
<input type="text" name="a" required ng-model="a" />
<input type="text" name="b" required ng-model="b" ng-minlength="2" />
<span ng-click="see()">{{ test_form.$error }}</span>
</form>
var TestCtrl = function($scope){
$scope.see = function(){
console.log($scope.test_form.$error);
}
}
7.5.2. input
input 是数据的最主要入口。 ng 支持 HTML5 中的相关属性,同时对旧浏览器也做了兼
容性处理。最重要的, input 的规则定义,是所属表单的相关行为的参照(比如表单是
否验证成功)。
input 控件的相关可用属性为:
name 名字
ng-model 绑定的数据
required 是否必填
ng-required 是否必填
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 匹配模式
ng-change 值变化时的回调
<form name="test_form" ng-controller="TestCtrl">
<input type="text" name="a" ng-model="a" required ng-pattern="/abc/" />
<span ng-click="see()">{{ test_form.$error }}</span>
</form>
input 控件,它还有一些扩展,这些扩展有些有自己的属性:
input type="number" 多了 number 错误类型,多了 max , min 属性。
![](https://csdnimg.cn/release/download_crawler_static/10757731/bgc.jpg)
input type="url" 多了 url 错误类型。
input type="email" 多了 email 错误类型。
7.5.3. checkbox
它也算是 input 的扩展,不过,它没有验证相关的东西,只有选中与不选中两个值:
<form name="test_form" ng-controller="TestCtrl">
<input type="checkbox" name="a" ng-model="a" ng-true-value="AA" ng-false-value="BB" />
<span>{{ a }}</span>
</form>
var TestCtrl = function($scope){
$scope.a = 'AA';
}
两点:
1. controller 要初始化变量值。
2. controller 中的初始化值会关系到控件状态(双向绑定)。
7.5.4. radio
也是 input 的扩展。和 checkbox 一样,但它只有一个值了:
<form name="test_form" ng-controller="TestCtrl">
<input type="radio" name="a" ng-model="a" value="AA" />
<input type="radio" name="a" ng-model="a" value="BB" />
<span>{{ a }}</span>
</form>
7.5.5. textarea
同 input 。
7.5.6. select
这是一个比较牛B的控件。它里面的一个叫做 ng-options 的属性用于数据呈现。
对于给定列表时的使用。
最简单的使用方法, x for x in list :
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[0,1,2,3]; a=o[1];">
<select ng-model="a" ng-options="x for x in o" ng-change="show()">
<option value="">可以加这个空值</option>
</select>
</form>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.show = function(){
console.log($scope.a);
}
}
angular.bootstrap(document.documentElement);
</script>
在 $scope 中, select 绑定的变量,其值和普通的 value 无关,可以是一个对象:
<form name="test_form" ng-controller="TestCtrl"
ng-init="o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];">
<select ng-model="a" ng-options="x.name for x in o" ng-change="show()">
</select>
</form>
剩余58页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/5448209143bc4fd7baa402a377480762_weixin_42682175.jpg!1)
李双华
- 粉丝: 0
- 资源: 13
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)