标签：核心 依赖注入 功能 radio sel 接收参数 框架 request对象 奇数
<html ng-app="mainApp"> 指定angular的作用域是在<html>标签以内部分; var mainApp= angular.module(mainApp, []);在js文件中调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。就可以让angular运行起来了；
明白内置的filter的使用，以及如何定义一个filter。
filter的两种使用方法：1. 在模板中使用filter
我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：
{{ expression | filter }}
也可以多个filter连用，上一个filter的输出将作为下一个filter的输入：
{{ expression | filter1 | filter2 | ... }}
filter可以接收参数，参数用 : 进行分割，如下：
{{ expression | filter:argument1:argument2:... }}
除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，
代码如下：
app.controller(‘test‘,function($scope,currencyFilter){
$scope.num = currencyFilter(123);
}
在模板中使用{{num}}就可以直接输出$123.00了！
在服务中使用filter也是同样：
要在controller中使用多个filter，并不需要一个一个注入吗，提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了；
使用方法如下：
app.controller(‘test‘,function($scope,$filter){
$scope.num = $filter(‘currency‘)(123);
$scope.date = $filter(‘date‘)(new Date());
}
自定义过滤器：
filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果；
例如：返回一个数组中下标为偶数的元素；
/* Controller js */
mainApp.filter("oushu",function(){
return function(Array){
var array = [];
for(var i=0;i<iArray.length;i++){
if(i%2!==0){
array.push(Array[i]);
}
}
return array;
}
});
13.指令：
模板中可以使用的东西有以下四种：
1.指令(directive)：angular提供的或者自定义的标签和属性，用来增强HTML表现力；
2.标记(markup)：即双大括号{{}}，可将数据双向绑定到HTML中；
3.过滤器(filter)：用来格式化输出数据；
4.表单控制：用来增强表单的验证功能。
指令的几种使用方式如下：
作为标签：<my-dir></my-dir>
作为属性：<span my-dir="exp"></span>
作为注释：<!-- directive: my-dir exp -->
作为类名：<span class="my-dir: exp;"></span>
常用的就是作为标签和属性；
样式相关的指令：
ng-class: 给元素绑定类名；
表达式的返回值可以是类名字符串，用空格分割多个类名；
类名数组，数组中的每一项都会层叠起来生效；
一个名值对应的json对象，其键值为类名值为boolean类型，当值为true时，该类会被加在元素上。
ng-class-odd ng-class-even 用来配合 ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。
ng-style：用来绑定元素的css样式；
ng-show ng-hide: 元素显隐控制，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效；
表单控件功能相关指令：
ng-checked 控制radio和checkbox的选中状态
ng-selected 控制下拉框的选中状态
ng-disabled 控制失效状态
ng-multiple 控制多选
ng-readonly 控制只读状态
以上指令的取值均为boolean类型，当值为true时相关状态生效。
上面的这些只是单向绑定，只是从数据到模板，不能反作用于数据。要双向绑定，还是要使用 ng-model；
事件绑定相关指令：
ng-click
ng-change
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
事件绑定指令的取值为函数，并且需要加上括号，例如：
<select ng-change=”change($event)”></select>
然后在controller中定义如下：
$scope.change = function($event){
conolse.log($event.target);
}
在模板中可以用变量$event将事件对象传递到controller中;
特殊的指令：
ng-src:angular框架时在DOM内容加载完成之后才开始发挥作用的，如果模板中存在<img src="{{url}}">,那么在
页面开始在加载angular完成之前，页面会一直显示一张错误的图片，因为路径还没有被替换；为了避免这种情况，
我们使用ng-src指令，这样在路径被正确得到之前就不会显示找不到图片。
ng-href: 同上理，<a>标签的href属性也需要换成ng-href，这样页面上就不会先出现一个地址错误的链接；
我们在模板中使用{{}}显示数据时，在angular编译完成之前页面会显示出大括号及里面的表达式。为了避免这个，ng中有一个与{{}}等同的指令:ng-bind，
同样用于单向绑定，在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样，{{}}那么好用，还不能用了不成？好消息是我们依然可以使用。因为
编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，
就可以放心使用{{}}了。
自定义指令： （还没写）
标签：核心 依赖注入 功能 radio sel 接收参数 框架 request对象 奇数
原文地址：http://www.cnblogs.com/liaolei1/p/6843981.html
