1.ng-app
<html lang="en" ng-app>
ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。
2.AngularJS模板的核心功能——绑定
<p>Nothing here {{'yet' + '!'}}</p>
这个绑定由双大括号{{}}和表达式'yet' + '!'组成。
这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。
AngularJS表达式Angular expression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。
3.视图与模板
<html ng-app>
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
{{phone.snippet}}
</li>
</ul>
</body>
</html>
ng-controller="PhoneListCtrl"
ng-repeat="phone in phones"是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板为列表中的每一部手机创建一个<li>元素
js/controllers.js--->模型与控制器
'use strict';
/* Controllers */
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
控制器函数的作用域（$scope）
AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中
3.ng-model/filter
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div> 数据绑定： 这是AngularJS的一个核心特性。当页面加载的时候，AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性。
在这段代码中，用户在输入框中输入的数据名字称作query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。当数据模型引起迭代器输入变化的时候，迭代器可以高效得更新DOM将数据模型最新的状态反映出来
-
使用
filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。
3.Directives/Expressions
<!-- html -->
<ul>
<li ng-click="hide_child = !hide_child">
Item 1
<ul ng-hide="hide_child">
<li>Item child 1</li>
</ul>
</li>
</ul>
ng-click
和
ng-hide
都是框架自带的Directives（指令），前者相当于给li标签提供了一个Event Handler，在该HTML元素（li）被点击的时候，会执行hide_child = !hide_child这个Expression（表达式）。我们先看一下ng-hide这个指令，它会根据赋值的表达式结果（布尔值）来控制该HTML元素是否要显示（通过CSS实现）。也就是说，如果hide_child这个变量如果是true，那么ul就会被隐藏，否则结果相反。
这里hide_child其实是$scope上的一个变量，对它的值的变更，也可以用controller控制器包装一个方法来实现，只不过现在的语句比较简单，直接写在了指令的赋值里面。
通过以上简单的代码分析，我们可以看到AngularJS两个比较明显的特点：
1.通过指令和表达式对DOM的操作进行了封转，只需简单的代码便可省去额外的JavaScript代码
2.指令和表达式的应用，只直接嵌套在HTML中的，这和jQuery推从的Unobtrusive JavaScript的代码风格有些背道而驰