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模块 |