angular有哪些牛逼特性呢？

1、模板机制
2、双向数据绑定
3、模块
4、指令
5、依赖注入
6、路由
7、过滤器

AngularJs核心特性

1、MVVM双向数据绑定（Model-View-viewModel）model变化，view也变化
2、模板，将html文件解析到DOM中
3、模块化与依赖注入
4、指令可以用来创建自定义标签，也可以用来装饰元素或者操作DOM属性

angular的路由和机制

angular路由功能是纯前端的解决方案，与我们熟悉的后台路由不太一样，后台路由，通过不用的url会路由到不同的控制器上（controller），再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则 (routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng- view)中。

angular的前端路由，虽然url输入不一样，页面展示不一样，其实完成单页（ng-app）视图(ng-view)的局部刷新，这样看来，AngularJs做单页应用就有点标配的感觉

Angular指令

ng-init：初始化变量
在属性值中用=符号为变量值，用户；隔开，并且不能使用var

ng-app：定义项目容器元素
可以有属性值，此时要在js中定义这个项目
如果没有属性值，可以直接在视图中使用了

ng-model：双向绑定

ng-bind：插值的另一种写法
页面渲染时看不到插值符号

ng-controller：定义控制的

Angular.module 获取应用程序的
第一个参数表示app名称
第二个参数表示依赖集合
注意：即使没有依赖也要写上空数组

controller 定义控制器的
第一个参数表示控制器的名称
第一个参数表示工厂方法
默认没有参数的
作用域是一个空对象
用参数注入技术引入作用域服务
$scope

参数注入
使用什么服务注入什么服务
注意事项：
服务名字不能写错

事件
定义ng-事件名称 = “callback”
与vue事件比较
不同点
1、定义方式
angular ng- 指令定义的
vue v-on 指令定义的

2、回调函数
angular 必须有参数集合（）
vue 可以不加参数集合（）

3、定义回调函数
angular 在作用域中定义
vue 在methods 中定义

4、回调函数参数
angular 与调用时候参数一致
vue 如果没有参数集合，默认一个参数就是事件对象

5、回调函数作用域
angular $scope
vue vue实例化对象

6、更改数据
angular 更改数据的两种方式
this
$scope
vue 只能通过this
相同点：都可以通过server传递时间对象参数

显隐元素：
ng-show：显示元素
ng-hide：隐藏元素
他们实现原理都是通过设置class实现的
vue中ng-show是通过style行内样式中的display样式设置的

插值表达式
在angular插值表达式不仅仅可以写在插值符号中，还可以写在ng-bind中

过滤器
json：将对象转正json字符串
currency 过滤器
转换价格
第一个参数表示前面表示符号
第二个参数表示保留小数位数
最后一位四舍五入

Date 过滤器
格式化日期
y 表示年
M 表示月
d 表示天
E 表示星期
h 表示12进制的小时
H 表示24进制的小时
s 表示秒
m 表示分
sss 表示毫秒

Filter 过滤器
过滤集合数据的
参数可以是字符串，此时会根据这个字符串进行过滤
参数可以是变量，此时会根据这个变量的值进行过滤
参数可以是函数，此时会根据这个函数执行结果进行过滤，函数不能执行，执行的话会根据执行的结果的值进行过滤。
这个过滤器在ng-bind指令中使用会有问题

字符串过滤器
uppercase 将字符串转换成大写的
lowercase 将字符串转换成小写的
limitTo 截取字符串
第一个参数表示截取的长度
第二个参数表示截取的位置
相当于subStr
这个过滤器可以截取数组

Number 过滤器
科学计数法：没三位加一个
参数表示保留小数的位数
最后一位会进行四舍五入

orderBy 过滤器
对集合数据的排序
第一个参数表示排序的字段
如果字段值是数字，将比较数字的大小
如果字段只是字符串，将比较字符对应的编码
第二个参数表示是否倒序
True 倒序
false 正序（默认值）

自定义过滤器
应用程序有个filter方法，用来定义过滤器
两个参数
第一个参数表示过滤器的名称
第二个参数表示过滤器的工厂方法
只执行一次
作用域空对象
没有参数
必须有返回值就是过滤函数
第一个参数表示处理的数据
从第二个参数开始表示过滤器传递的参数
作用域是全局作用域
返回的值就是处理后的结果

与vue比较
Filter方法第二参数
参数
angular 没有参数
vue 就是处理的数据以及传递的参数

作用域
angular 空对象
vue vue实例化对象

返回值
angular 过滤器函数
vue 处理的结果

在angular中可以是用多个过滤器
就要使用多个过滤器符号|
此时前一个过滤器输出将作为

脏值检测

就是表单验证
要为表单元素添加name属性，angular会根据这个属性在作用域中创建一个变量
四个属性

$dirty 是否输入
True 表示修改过
False 表示没有修改过

$pristine 是否未输入过
True 表示没有修改过
False 修改过

$valid 是否合法
True 合法
False 不合法

$invalid 是否非法
True 非法
False 合法

表单元素 form 元素的name的属性值对应的变量里面是四个属性
$dirty 所有表单子元素有没有全部输入过
$valid 所有子元素全部合法

验证指令
1、必填项
Required和ng-required
相同点
1 都是在初始化时候验证了
2 做必填项验证
不同点
1 required是h5属性会被浏览识别 ng-required是angular提供的
2 required不用设置值 ng-required 必须设置值

2 长度验证
Maxlength Minlength ng-maxlength ng-minlength
相同点
1 输入时进行验证
2 都是验证长度
不同点
1Maxlength Minlength 是h5属性，浏览器识别ng-maxlength ng-minlength angular指令

3 正则验证
pattern 和 ng-pattern
相同点
1 输入时验证
2 都做正则验证
不同点
1 pattern 是h5提供的属性 ng-pattern是angular提供的
2 pattern 是正则的内容 ng-pattern是完整的正则表达式
ng-disabled表示表单元素是否可用
True表示禁用
False表示可用
ng-readyonly 表示表单元素是否只读的
True 表示只读
False 表示可以输入

ng-disabled

angular 提供一个控制表单是否使用的指令叫做ng-disabled
如果属性值是true 表示禁止
如果属性值是false 表示启用
我们可以通过切换他的值可以动态的控制他们

ng-checked指令

选框元素是否被选中
true 表示选中
false 表示没被选中

ng-change事件

在输入的内容改变时触发
无法访问事件对象的
并且这个事件要依赖于 ng-model指令

ng-submit

表单提交事件
这个事件要绑定给form元素
触发的这个事件元素确定form元素内容submit类型元素

run方法

在应用程序创建以后开始执行一个方法，在这个方法中可以访问全局变量
因此在这个方法中我们可以定义全局作用域信息
想使用跟作用域，，我们必须注入跟作用域服务
在这个方法中不能使用控制器作用，但是在控制器中可以使用跟作用域
跟作用域叫$rootScope
$element服务，获取容器元素，是一个jqlite对象，可以像jq那样使用，设置样式，捕获子元素，链式调用等等

angular的作用域是基于原型式继承的，因此子作用域中没有该数据，会顺着原型链往上找，找到对应的数据。一旦某个父作用域更改了原型链上的数据，此时子作用域就睡使用该数据，不会在向上去查找了。（就进原则）

在作用域中，我们可以通过
$$prevsibing访问上一个作用域
$$nextsibing访问下一个作用域
在工作中不建议我们这样，因为他将作用域耦合在一起了
但是我们可以通过$parent,访问父作用域，这是可以的
我们在作用域中可以通过原型链访问父作用域中的数据，因此就不在使用$parent
如果子作用域中已经定义了数据，在修改父级作用域中相同名称数据时候，不会影响子作用域

ng-href 指令

为a标签提供的一个指令，这个指令可以动态的渲染a标签的href属性
避免在渲染a标签的时候，href不存在打开错误的页面
动态添加href属性，因此在没有添加该属性之前不会有a连接特性的

ng-src指令

动态创建src属性的，提高用户体验，否则会根据插入符号请求一张错误的图片地址（裂图）
注意 ng-href与ng-src指令，都是一个指令，但是他们属性值都是一个字符串，所以我们要使用插值符号
这个两个指令要使用数据通过插值符号{{}}

创建类

vue中有三中
class = '{{}}'
v-bind:class='{}'
v-bind:class='[]'

angualr也支持，并且，数组成员以及对象成员可以包含多个类
ng-class动态绑定类
值可以是字符串（可以包含空格，此时是多个类）
值可以是变量（变量的值可以是空格，此时是多个类）
值可以是对象（对象的属性名称可以包含空格，此时一个属性名成表示多个类名）
属性值是一个布尔值
true表示保留这个类
false表示删除这个类
值可以是数组（数组成员可以包含空格，此时一个成员代表多个类）
在使用对象或者数组的时候，我们尽量一个成员，一个属性代表一个类，这样每个类都是可控的，否则多个类耦合在一起是不可控的

ng-style指令

动态创建样式的，但是跟vue有些不同
angular中ng-style属性值只能有两种情况
一种值是对象
属性名称（key）是css样式名称
属性值（value）是css样式值
一种值是变量，变量的值就是一个对象
属性名称（key）是css样式名称
属性值（value）是css样式值

ng-if

模板判断指令
值为true显示
值为false隐藏
angular中ng-if指令控制的元素显示位置是通过注释确定的
当我们为一个元素添加一个ng-fi指令的时候，会创建一个相对应的注释

ng-swith

跟js中swith语句很象，多分枝控制模板创建
angular根据case创建一个ng-swith-when指令
根据default创建了一个ng-swicth-when指令
ng-switch通过on属性来添加一个判断的条件

ng-repeat 指令

相当于vue中v-for指令
语法ng-repeat='item in data'
是用来循环创建模板的
提供了6个临时变量
$index: 循环的索引值
$first: 是否第一次循环
$last: 是否是最后一次循环
$middle: 除了第一次和最后一次循环
$odd: 奇数次循环 （视图中对应偶数次）
$even: 偶数次循环 （视图中对应奇数次）
后五个指令的值都是布尔值

ng-include

异步加载模板指令
在页面中，我们可以通过异步请求来加载一个模板
他的值是一个js环境，我们是可以用变量
如果这个指令具有控制元素的使用，此时将作为控制内的模板，该控制器定义的的数据可以在该模板中使用