angularJS

Angular.js

架构思想：MVVM
视图和模型绑定可把MV加到VM中
ng-app：主模块
ng-repeat：重复循环

服务和依赖注入
AngularJS服务其作用就是对外提供某个特定的功能。
AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

指令（Directives）
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
（ng-）指令内部自带
（$）是angularjs的内制服务
有一个根作用域root全局
子元素设置自己的属性不然父元素会把子元素影响。

数据绑定
AngularJS的双向数据绑定，意味着你可以在Mode(JS)中改变数据，而这些变动立刻就会自动出现在View上，反之亦然。即：一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。

ng-controller
要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性

ajax
$http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。
$http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建HTTP请求；它将返回一个承诺，其中提供两个方法： success方法和error方法。

过滤器
过滤器（filter），作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。过滤器通常是伴随标记来使用的，将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。ng内置了一些过滤器，它们是：
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。

ng的内置过滤器
ng内置了九种过滤器
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

currency (货币处理)
　　使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：{{num | currency : '￥'}}

　　date (日期格式化)
　　原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}　　


指令(directive)
　　通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。
　    模板中可以使用的东西包括以下四种：
1.指令(directive)：ng提供的或者自定义的标签和属性，用来增强HTML表现力；
2.标记(markup)：即双大括号{{}}，可将数据单向绑定到HTML中；
3.过滤器(filter)：用来格式化输出数据；
4.表单控制：用来增强表单的验证功能。
其中，指令无疑是使用量最大的，ng内置了很多指令用来控制模板，如ng-repeat，ng-class，也有很多指令来帮你完成业务逻辑，如ng-controller,ng-model。
指令的几种使用方式如下：
作为标签：<my-dir></my-dir>
作为属性：<span my-dir="exp"></span>
作为注释：<!-- directive: my-dir exp -->
作为类名：<span class="my-dir: exp;"></span>
其实常用的就是作为标签和属性。


样式相关的指令
　　既然模板就是普通的HTML，那我首要关心的就是样式的控制，元素的定位、字体、背景色等等如何可以灵活控制。下面来看看常用的样式控制指令。
1. ng-class
　　    ng-class用来给元素绑定类名，其表达式的返回值可以是以下三种：
类名字符串，可以用空格分割多个类名，如’redtext boldtext’；
类名数组，数组中的每一项都会层叠起来生效；
一个名值对应的json对象，其键值为类名，值为boolean类型，当值为true时，该类会被加在元素上。
　　下面来看一个使用map的例子：
ng-class测试
红色 加粗 删除线 
<div ng-class=”{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}” ></div>
　　如果你想拼接一个类名出来，可以使用插值表达式，如：
　　<div class=”{{style}}text”>字体样式测试</div>
　　然后在controller中指定style的值：
　　$scope.style = ‘red’;
　　与ng-class相近的，ng还提供了ng-class-odd、ng-class-even两个指令，用来配合ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。
2. ng-style
　　ng-style用来绑定元素的css样式，其表达式的返回值为一个js对象，键为css样式名，值为该样式对应的合法取值。用法比较简单：
<div ng-style="{color:'red'}">ng-style测试</div>
<div ng-style="style">ng-style测试</div>
$scope.style = {color:'red'};　　
3. ng-show，ng-hide
　　　对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。框架会用display:block和display:none来控制元素的显隐。


表单控件功能相关指令
　　对于常用的表单控件功能，ng也做了封装，方便灵活控制。
　　ng-checked控制radio和checkbox的选中状态
　　ng-selected控制下拉框的选中状态
　　ng-disabled控制失效状态
　　ng-multiple控制多选
　　ng-readonly控制只读状态
　　以上指令的取值均为boolean类型，当值为true时相关状态生效，道理比较简单就不多做解释。注意： 上面的这些只是单向绑定，即只是从数据到模板，不能反作用于数据。要双向绑定，还是要使用 ng-model 。