AngularJS初识

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