1.浅谈非入侵式JavaScript

<div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有下面不同之处：

        在全部浏览器中具有同样的行为。Angular将会帮你屏蔽差异性。

不会在全局命名空间中进行操作。你所指定的表达式仅仅能訪问元素控制器作用域范围内的函数和数据。

2.列表、表格以及其它迭代型元素

        ng-repeat可能是最实用的Angular指令了，它能够依据集合中的项目一次创建一组元素的多份拷贝。无论在什么地方，仅仅要你想创建一组事物的列表，你就能够使用这条令。

        js代码：

var students = [{name:'Mary Contrary', id:'1'},

{name:'Jack Sprat', id:'2'},

{name:'Jill Hill', id:'3'}];

function StudentListController($scope) {

$scope.students = students;

$scope.insertTom = function () {

$scope.students.splice(1, 0, {name:'Tom Thumb', id:'4'});

};

}

        html代码：

<ul ng-controller='StudentListController'>

<li ng-repeat='student in students'>

<a href='/student/view/{{student.id}}'>{{student.name}}</a>

</li>

</ul>

<button ng-click="insertTom()">Insert</button>

        ng-repeat指令能够通过$index返回当前引用的元素序号；还能够通过$first、$middle及$last，ng-repeat指令返回布尔值，告诉你当前元素是否是集合中的第一个元素、中间的某个元素，或者最后一个元素。

html代码：

<table ng-controller='AlbumController'>

<tr ng-repeat='track in album'>

<td>{{$index + 1}}</td>

<td>{{track.name}}</td>

<td>{{track.duration}}</td>

</tr>

</table>

js代码：

var album = [{name:'Southwest Serenade', duration: '2:34'},

{name:'Northern Light Waltz', duration: '3:21'},

{name:'Eastern Tango', duration: '17:45'}];

function AlbumController($scope) {

$scope.album = album;

}

3.隐藏和显示

       这个样例将会使用ng-show和ng-hide。这两条指令的功能是等价的，可是执行效果正好相反，它们都能够依据你所传递的表达式来显示或者隐藏元素。

这两条指令的工作原理是：依据实际情况把元素的样式设置为display:block来显示元素；设置为display:none来隐藏元素。

4.CSS类和样式

Angular提供了ng-class和ng-style指令。这两个指令都能够接受一个表达式，表达式运行的结果可能是例如以下取值之中的一个：

                          表示CSS类名的字符串，以空格分隔。  

                          CSS类名数组。  

                          CSS类名到布尔值的映射。

    css代码：

.selected {

background-color: lightgreen;

}

在模板中，我们把ng-class设置为{selected:  $index==selectedRow}。这样做的效果就是，当模型属性selectedRow的值等于ng-repeat中的$index时，selected样式就会被设置到那一行上。

js代码：

function RestaurantTableController($scope) {

$scope.directory = [{name:'The Handsome Heifer', cuisine:'BBQ'},

{name:'Green's Green Greens', cuisine:'Salads'},

{name:'House of Fine Fish', cuisine:'Seafood'}];

$scope.selectRestaurant = function(row) {

$scope.selectedRow = row;

};

}

html代码：

<table ng-controller='RestaurantTableController'>

<tr ng-repeat='restaurant in directory' ng-lick='selectRestaurant($index)'

ng-class='{selected: $index==selectedRow}'>

<td>{{restaurant.name}}</td>

<td>{{restaurant.cuisine}}</td>

</tr>

</table>

5.反思src和href属性

       因为浏览器会优先使用并行的方式来载入图片和其它内容，所以Angular没有机会拦截到数据绑定请求。

      这里应该使用ng-src指令，你的模板应该写成这样：

             <img ng-src="/images/cats/{{favoriteCat}}">

       类似地，对于<a>标签，应该使用ng-href指令：

      <a ng-href="/shop/category={{numberOfBalloons}}">some text</a>

6.表达式

表达式是通过Angular内置的解析器运行的。在这款解析器中，你找不到循环结构（for、while等）、流程控制操作符（if-else、throw），以及改动数据的操作符（++、--）。当你须要这些类型的操作符时，请在你的控制器中运行或者通过指令运行。尽管在非常多方面这里的表达式比JavaScript更严格，可是它们对undefined和null的容错性更好。假设遇到错误，模板仅仅是简单地什么都不显示，而不会抛出一个NullPointerException错误。

7.区分ui和控制器的职责

在应用中控制器有三种职责：

1> 为应用中的模型设置初始状态。 

    2> 通过 $scope对象把数据模型和函数暴露给视图（UI模板）。

    3> 监视模型其余部分的变化，并採取对应的动作。

为视图中的每一块功能区域创建一个控制器。

有两种基本的方法能够把控制器关联到DOM节点上，第一种是在模板中通过ng-controller属性来声明，还有一种是通过路由把它绑定到一个动态载入的DOM模板片段上，这个模板叫做视图。     

<div ng-controller="ParentController">

<div ng-controller="ChildController">...</div>

</div>

尽管我们把这样的方式叫做控制器嵌套，但真实的嵌套发生在$scope对象上。通过内部的原型继承机制，父控制器对象上的$scope会被传递给内部嵌套控制器的$scope。具

体到上面样例就是，ChildController的$scope对象能够訪问ParentController的$scope对象上的全部属性（和函数）。

8.利用$scope暴露模型数据

对于显式地创建$scope属性我们已经看到过非常多样例了，比如$scope.count  =  5。还能够间接地通过模板自身创建数据模型。你能够通过下面几种方式来实现这一点。

      1>通过表达式。

<button ng-click='count=3'>Set count to three</button>

2>在表单输入项上使用ng-model。与表达式类似，ng-model上指定的模型參数相同工作在外层控制器内。唯一的不同点在于，这样会在表单项和指定的模型之间建立双向绑定关系。