AngularJS 简介
AngularJS是一个javaScript框架，是一个用JavaScript编写的库，通过指令扩展了HTML，且通过表达式绑定数据到HTML中。
AngularJS使开发现代的单页面应用程序（Single Page Applications）变得更加容易。
AngularJS指令：是以ng为前缀的HTML属性。
AngularJS表达式：通过双写大括号{{}} 或者通过ng-bind指令指定。
AngularJS模块（Module）定义了AngularJS应用。
AngularJS控制器（controller）用于控制AngularJS应用。
ng-app指令定义了应用，ng-controller定义了控制器。
AngularJS 表达式
AngularJS表达式写在大括号内：{{表达式}}
AngularJS表达式把数据绑定到HTML中，与ng-bind指令的功能一致。
AngularJS将在表达式的书写位置输出数据
AngularJS表达式的功能和javaScript的表达式功能的异同：
相同：
可以包含字母、数字、操作符、变量。
不同：
AngularJS可以写在HTML中
AngularJS表达式不支持条件判断和循环
表达式支持过滤器
AngularJS的指令
|
指令 |
描述 |
|
ng-app |
定义应用程序的根元素 |
|
ng-bind |
绑定html元素到应用程序数据 |
|
ng-bind-html |
绑定html元素的innerHTML到应用程序数据，并移除HTML字符串中危险字符。 |
|
ng-bind-template |
要使用模板替换的文本内容 |
|
ng-blur |
元素失去焦点事件行为 |
|
ng-change |
在内容改变时要执行的表达式 |
|
ng-checked |
元素是否被选中 |
|
ng-class |
指定HTML元素使用的css类 |
|
ng-class-even |
类似ng-class，但只在偶数行起作用 |
|
ng-class-odd |
类似ng-class，但在在奇数行起作用 |
|
ng-click |
元素被点击时的行为 |
|
ng-cloak |
在应用要加载时防止其闪烁 |
|
ng-controller |
应用程序的控制器对象 |
|
ng-copy |
拷贝事件的行为 |
|
ng-csp |
修改内容的安全策略 |
|
ng-cut |
剪切事件 |
|
ng-dblclick |
双击事件 |
|
ng-disabled |
一个元素是否被禁用 |
|
ng-focus |
聚焦事件 |
|
ng-form |
指定HTML表单继承控制器表单 |
|
ng-hide |
银行或者显示html元素 |
|
ng-href |
为the<a>元素指定连接 |
|
ng-if |
如果条件为false移除html元素 |
|
ng-include |
在应用中包含html文件 |
|
ng-init |
定义应用的初始化值 |
|
ng-jq |
定义应用必须使用到的库，如jquery |
|
ng-keydown |
按下按键事件 |
|
ng-keypress |
按下按键事件 |
|
ng-keyup |
松开按键事件 |
|
ng-list |
将文本转换为列表 |
|
ng-model |
绑定HTML控制器的值到应用 |
|
ng-model-options |
规定如何更新模型 |
|
ng-mousedown |
按下鼠标按键的事件 |
|
ng-mouseenter |
鼠标指针穿过元素的事件 |
|
ng-mouseleave |
鼠标指针离开元素的事件 |
|
ng-mousemove |
鼠标指针在指定的元素中移动时事件 |
|
ng-mouseover |
鼠标指针位于元素上方的事件 |
|
ng-mouseup |
在元素上松开鼠标按钮的事件 |
|
ng-non-bindable |
元素或子元素不能绑定数据 |
|
ng-open |
指定元素open属性 |
|
ng-options |
在<select>列表中指定的<options> |
|
ng-paste |
粘贴事件 |
|
ng-pluralize |
本地化规则显示 |
|
ng-readonly |
元素的readonly属性 |
|
ng-repeat |
定义集合中每项数据的模板 |
|
ng-selected |
元素的selected属性 |
|
ng-show |
显示或者隐藏html元素 |
|
ng-src |
img的src属性 |
|
ng-srcset |
img的srcset属性 |
|
ng-style |
元素的style属性 |
|
ng-submit |
onsubmit事件 |
|
ng-switch |
显示或隐藏子元素的条件 |
|
ng-transclude |
填充的目标位置 |
|
ng-value |
input元素的值 |
AngularJS事件
|
事件 |
描述 |
|
ng-click |
单击事件 |
|
ng-dbl-click |
双击事件 |
|
ng-mousedown |
按下鼠标按键的事件 |
|
ng-mouseenter |
鼠标指针穿过元素的事件 |
|
ng-mouseleave |
鼠标指针离开元素的事件 |
|
ng-mousemove |
鼠标指针在指定的元素中移动时事件 |
|
ng-mouseover |
鼠标指针位于元素上方的事件 |
|
ng-mouseup |
在元素上松开鼠标按钮的事件 |
|
ng-keydown |
按下按键事件 |
|
ng-keypress |
按下按键事件 |
|
ng-keyup |
松开按键事件 |
|
ng-focus |
聚焦事件 |
|
ng-blur |
失去焦点事件 |
|
ng-change |
在内容改变时要执行的表达式 |
|
ng-copy |
拷贝事件 |
|
ng-cut |
剪切事件 |
|
ng-paste |
粘贴事件 |
|
ng-submit |
onsubmit事件 |
AngularJS验证属性
|
属性 |
描述 |
|
$Pristine |
表单没有填写内容 |
|
$dirty |
表单有填写记录 |
|
$invalid |
字段内容是非法的 |
|
$valid |
字段内容是合法的 |
转换AngularJS全局API
|
API |
描述 |
|
Angular.lowercase() |
将字符串转换为小写 |
|
Angular.uppercase() |
将字符串转换为大写 |
|
Angular.copy() |
数组或对象深度拷贝 |
|
Angular.forEach() |
对象或数组迭代函数 |
比较
|
API |
描述 |
|
Angular.isArray() |
如果引用的是数组返回true |
|
Angular.isDate() |
如果引用的是日期返回true |
|
Angular.isDefined() |
如果引用的已定义返回true |
|
Angular.isElement() |
如果引用的是DOM元素返回true |
|
Angular.isFunction() |
如果引用的是函数返回true |
|
Angular.isNumber() |
如果引用的是数字返回true |
|
Angular.isObject() |
如果引用的是对象返回true |
|
Angular.isString() |
如果引用的是字符串返回true |
|
Angular.isUndefined() |
如果引用的是未定义返回true |
|
Angular.equals() |
如果两个对象相等返回true |
JSON
|
API |
描述 |
|
Angular.fromJson |
反序列化JSON字符串 |
|
Angular.toJson |
序列化字符串 |
基础
|
API |
描述 |
|
Angular.bootstrap() |
手动启用angularJS |
|
Angular.element() |
包裹着一部分DOM element 或者是HTML字符串，把它作为一个JQuery元素来处理。 |
|
Angular.module() |
创建，注册或检索Angular模块 |