最近公司刚好要用到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) 包裹元素

自己用的AngularJS手册待修改版的更多相关文章

  1. Angularjs使用ng-repeat中$even和$odd属性的注意事项

    无可否认angularjs的崛起成为前端很大的福利,最近接到项目,框架便选中了angularjs。angularjs最吸引人的地方就是数据的双向绑定和指令了,这篇文章主要介绍了Angularjs中使用ng-repeat的$even和$odd属性的注意事项,需要的朋友可以参考下

  2. Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧。下面这篇文章主要介绍了Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法,需要的朋友可以参考下。

  3. 关于AngularJS中ng-repeat不更新视图的解决方法

    今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. angularjs在ng-repeat中使用ng-model遇到的问题

    本文给大家分享了一个个人在使用angular过程中遇到的在ng-repeat中使用ng-model的问题,并附上简单的解决办法,希望能对大家学习angular有所帮助

  5. AngularJS的ng-repeat指令与scope继承关系实例详解

    这篇文章主要介绍了AngularJS的ng-repeat指令与scope继承关系,结合实例形式通过ng-repeat指令详细分析了scope继承关系,需要的朋友可以参考下

  6. ng-repeat指令在迭代对象时的去重方法

    今天小编就为大家分享一篇ng-repeat指令在迭代对象时的去重方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. angularjs下ng-repeat点击元素改变样式的实现方法

    今天小编就为大家分享一篇angularjs下ng-repeat点击元素改变样式的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. Angularjs中ng-repeat的简单实例

    这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容,需要的朋友可以参考下

  9. AngularJS ng-repeat数组有重复值的解决方法

    不知道大家是否遇到过这个问题,在当Angular.JS ng-repeat数组中有重复项时,系统就会抛出异常,这是该怎么做?本文通过示例代码介绍了详细的解决方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。

  10. angularJs使用ng-repeat遍历后选中某一个的方法

    今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部