最近公司刚好要用到AngularJS,那我就自己边用边整理,虽然网上有完整的手册,但我还是想自己归纳一下,用到一点写一点, 毕竟自己用过的东西才算真正的掌握。
创建一个AngularJS模块 | 使用angular.module()方法 |
设置一个模块的作用域 | 使用ng-app属性 |
定义一个控制器 | 使用Module.controller()方法 |
将一个控制器应用于一个视图 | 使用ng-ontroller()方法 |
从控制器向视图传递数据 | 使用$scope服务 |
自定义一个指令 | 使用Module.directive()方法 |
自定义一个过滤器 | Module.filter()方法 |
以编程方式使用一个过滤器 | 使用$filter服务 |
自定义一个服务 | 使用Module.service()/Module.factory()/Module.provider()方法 |
从一个已有的对象或值定义一个服务 | 使用Module.value()方法 |
向应用程序中的代码添加结构 | 创建多个模块并从ng-app属性引用的模块中声明依赖 |
注册在模块被加载时调用的函数 | 使用Module.config()和Module.run()方法 |
绑定和模块指令
创建一个单向绑定 | 使用ng-bind(用于单个属性)或ng-bind-template(用于多个属性)指令 或内联表达式{{ }} |
阻止AngularJS处理内联绑定表达式 | 使用ng-non-bindable指令 |
创建双向数据绑定 | 使用ng-model指令 |
生成重复内容 | 使用ng-repeat指令 |
获得ng-repeat指令中生成的对象的信息 | 使用ng-repeat内置变量,如$first(第一个)$last(最后一个)等 |
重复多个顶层属性 | 使用ng-repeat-start 和ng-repeat-end 指令 |
加载一个局部视图,如html文件 | 使用ng-include指令 |
有条件的显示元素 | 使用ng-switch指令 |
加载模块时隐藏内联表达式 | 使用ng-cloak指令 |
元素和事件指令
显示或隐藏元素 | 使用ng-show和ng-hide指令 |
从DOM中删除元素 | 使用ng-if指令 |
将元素添加到css类中,或者设置某个css | 使用ng-class 或者 ng-style指令 |
对ng-repeat生成的奇数行或偶数行添加不同的css | 使用ng-class-odd和ng-class-even指令 |
定义在某个事件被出发时执行的行为 | 如ng-click(点击),ng-blur(失去焦点)等 |
处理一个AngularJS未提供指令支持的事件 | 创建一个自定义事件指令 |
对元素使用布尔属性 | 使用一个布尔属性指令,如ng-checked等 |
| |
完整事件指令表
ng-blur | 失去焦点时触发 |
ng-change | 在表单元素内容发生变化时触发 |
ng-click | 点击时触发 |
ng-copy | 复制 |
ng-cut | 剪切 |
ng-paste | 黏贴 |
ng-dbclick | 双击 |
ng-focus | 获得焦点时触发 |
ng-keydown | 键盘按下时触发 |
ng-keypress | 键盘按下时触发 |
ng-keyup | 键盘按键抬起时吃法 |
ng-mousedown | 鼠标按下 |
ng-mouseenter | 鼠标进入 |
ng-mouseleave | 鼠标离开 |
ng-mousemove | 鼠标移动 |
ng-mouseover | 鼠标放上 |
ng-mouseup | 鼠标放开 |
ng-submit | 表单提交时触发 |
表单中input 的type类型
checkbox | 创建一个复选框(h5之前就有) |
email | 创建一个接收邮件地址作为值的文本输入框(h5新增) |
number | 创建一个接收数值类型作为值得文本输入框(h5新增) |
radio | 创建一个单选框(h5之前就有) |
text | 创建一个接收任何值的文本框(h5之前就有) |
url | 创建一个接收url作为值的文本输入框(h5新增) |
表单指令定义的校验变量
$pristine | 用户没有与元素发生交互,则返回true |
$dirty | 用户与元素发生交互,返回true |
$valid | 元素校验结果为有效时,返回true |
$invalid | 元素校验结果为无效时,返回true |
$error | 提供校验错误的有效信息 |
此外,还可用css提供的方法校验反馈信息
css校验
ng-pristime | 用户未曾交互过的元素被添加到这么类 |
ng-dirty | 用户交互过的元素被添加到这么类 |
ng-valid | 元素校验结果为有效时在这个类中 |
ng-invalid | 元素校验结果为无效时在这个类中 |
适用于input元素的属性
ng-model | 双向绑定 |
ng-change | 元素被改变时被执行 |
ng-minlength | 设置最小字符数长度 |
ng-maxlength | 设置最大字符数长度 |
ng-pattern | 设置正则表达式 |
ng-required | 通过数据绑定设置required |
过滤器
币值过滤器 | currency过滤器 |
格式化通用的数字值 | number过滤器 |
格式化日期 | data过滤器 |
改变对大小写 | uppercase/lowercase过滤器 |
对过滤器产生的格式进行本地化 | 通过script标签增加一个angularjs本地化文件 |
从一个数组中选出一定数量的对象 | limitTo过滤器 |
从数组中选取对象 | fliter过滤器 |
对数组中的对象进行排序 | orderBy过滤器 |
创建自定义过滤器 | 用Module.filter()方法制定一个函数 |
组合多个过滤器 | 使用链式写法(链式过滤器) |
jqLite操作Dom方法
children() | 返回一组子元素 |
eq(index) | 从一个元素集合中返回指定索引的元素 |
find(tag) | 按照指定的tag名称定位所有的后代元素,jquery可以,jqLite不可用 |
next() | 获得下一个兄弟元素 |
parent() | 返回父元素 |
jqLite修改元素方法
addClass(name) | 添加类名 |
attr(name,value) | 设置一个自定义属性及属性值 |
css(name,value) | 设置css |
hasClass(name) | 如果有指定的类名,返回true |
prop(name,value) | 设置指定值 |
removeAttr(name) | 移除自定义属性 |
text(value) | 设置文本内容 |
toggleClass(name) | 有则移除类名,无则添加类名 |
val(value) | 设置元素的value特性 |
removeClass(name) | 移除类名 |
| |
jqLite创建和移除元素的方法
angular.element(html) | 创建一个对象 |
after(elements) | 在元素后面插入特定内容 |
append(elements) | 将特定元素作为最后一个子元素插入 |
clone() | 复制一个元素并作为新的对象返回 |
prepend(elements) | 将特定元素作为第一个子元素插入 |
remove() | 删除元素 |
replaceWith(elements) | 替换元素 |
wrap(elements) | 包裹元素 |