元素是 AngularJS 应用的 "所有者"。
+ * ng-model 指令将 input 输入框的值绑定到应用的 name 变量上。
+ * ng-bind 指令将
元素的 innerHTML 绑定到应用的 name 变量上。
+*/
+ 这里是要解析的内容
+
+///////////////////////////////////
+// AngularJS 表达式
+
+// AngularJS 表达式写在双括号内： {{ 表达式 }}。
+// AngularJS 表达式采用和 ng-bind 指令一样的方式将数据绑定到 HTML。
+// AngularJS 将在编写表达式的原样位置上 "输出" 数据。
+// AngularJS 表达式非常像 JavaScript 表达式：它们能包含文本，运算符和变量。
+// 例如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
+
+
+
+
+
+
My first expression: {{ 5 + 5 }}
+
+
+
+
+//如果你删除了 ng-app 指令， HTML 将原样显示表达式，不对它进行解析：
+
+
+
+
+
+
My first expression: {{ 5 + 5 }}
+
+
+
+
+// AngularJS 表达式采用和 ng-bind 指令一样的方式将 AngularJS 数据绑定到 HTML。
+
+
+
+
+
+
+
+
+// AngularJS 的数字类似 JavaScript 的数字：
+
+
Total in dollar: {{ quantity * cost }}
+
+
+//AngularJS 的字符串类似 JavaScript 的字符串：
+
+
+//AngularJS 的对象类似 JavaScript 的对象：
+
+
The name is {{ person.lastName }}
+
+
+//AngularJS 的数组类似 JavaScript 的数组：
+
+
The third result is {{ points[2] }}
+
+
+// 和 JavaScript 表达式一样， AngularJS 表达式能包含文本，运算符和变量。
+// 和 JavaScript 表达式不同， AngularJS 表达式能写在 HTML 内。
+// AngularJS 表达式不支持条件，循环和异常，而 JavaScript 表达式却支持。
+// AngularJS 表达式支持过滤器，而 JavaScript 表达式不支持。
+
+///////////////////////////////////
+// AngularJS 指令
+
+
+//AngularJS 指令使用前缀 ng- 扩展 HTML 属性。
+//ng-app 指令初始化一个 AngularJS 应用。
+//ng-init 指令初始化应用的数据。
+//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
+
+
Name:
+
You wrote: {{ firstName }}
+
+
+//使用 ng-init 并不常见。你将在有关控制器的章节中学习如何初始化数据。
+
+//ng-repeat 指令会重复一个 HTML 元素：
+
+
+//ng-repeat 指令用在一个对象数组上：
+
+
+
+ {{ x.name + ', ' + x.country }}
+
+
+
+
+// AngularJS 最适合用于数据库 CRUD (Create Read Update Delete) 的应用。
+// 只需设想这些对象都是来自一个数据库的记录。
+
+// ng-app 指令定义一个 AngularJS 应用的根元素。
+// ng-app 指令将在页面加载后自动启动（自动初始化）应用。
+// 稍后你将学习如何为 ng-app 设置一个值（如 ng-app="myModule"）， 来连接代码模块。
+
+// ng-init 指令为一个 AngularJS 应用定义初始值。
+// 通常，你不太使用 ng-init。你会转而使用一个控制器或模块。
+// 你将在稍后学到更多有关控制器和模块的内容。
+
+//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
+//ng-model 指令还能：
+//为应用的数据提供类型验证 (number, email, required)。
+//为应用的数据提供状态信息 (invalid, dirty, touched, error)。
+//为 HTML 元素提供 CSS 类。
+//将 HTML 元素绑定到 HTML 表单。
+
+//ng-repeat 指令为集合（一个数组）中的每个元素克隆出 HTML 元素。
+
+///////////////////////////////////
+// AngularJS 控制器
+
+// AngularJS 控制器控制 AngularJS 应用中的数据。
+// AngularJS 控制器就是常规的 JavaScript 对象。
+
+// AngularJS 应用由控制器控制。
+// ng-controller 指令定义应用的控制器。
+// 一个控制器就是一个 JavaScript 对象， 通过标准的 JavaScript 对象构建器创建。
+
+
+
+First Name:
+
+
+
+//应用的解析：
+
+//AngularJS 应用通过 ng-app="myApp" 定义。该应用运行在
内。
+//ng-controller="myCtrl" 属性是一个 AngularJS 指令。它定义了一个控制器。
+//myCtrl 函数是一个 JavaScript 函数。
+//AngularJS 将使用一个 $scope 对象来调用控制器。
+//AngularJS 中， $scope 就是该应用对象（应用的变量和函数的所有者）。
+//该控制器在 $scope 内创建了两个属性（即变量 firstName 和 lastName）。
+//ng-model 指令将输入表单项绑定到控制器的属性上（firstName 和 lastName）。
+
+//以上的例子演示了一个包含有两个属性 lastName 和 firstName 的控制器。
+//一个控制器也可以有方法（函数的变量）：
+
+
+First Name:
+
+
+
+//在较大型的应用中， 通常是将控制器代码保存在外部文件中。
+//只需将 标签之间的代码复制到一个名为 personController.js 的外部文件中：
+
+
+
+First Name:
+
+
+
+// 为方便下个例子使用，我们将创建一个新的控制器文件：
+angular.module('myApp', []).controller('namesCtrl', function($scope) {
+ $scope.names = [
+ {name:'Jani',country:'Norway'},
+ {name:'Hege',country:'Sweden'},
+ {name:'Kai',country:'Denmark'}
+ ];
+});
+
+//将文件保存为 namesController.js：
+//然后在一个应用中使用该控制器：
+
+
+
+
+
+ {{ x.name + ', ' + x.country }}
+
+
+
+
+
+
+
+///////////////////////////////////
+// AngularJS 过滤器
+
+// 过滤器可以通过一个管道符添加到表达式和指令上。
+// AngularJS 过滤器能用来转换数据：
+
+- **currency**: 将一个数字格式化成货币格式。
+- **filter**: 从一个数组中选择一组子集元素。
+- **lowercase**: 将一个字符串格式化成小写形式。
+- **orderBy**: 依据一个表达式排序一个数组。
+- **upper**: 将一个字符串格式化成大写形式。
+
+//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个表达式上。
+//（在下面的两个例子中，我们将使用前一章中的 person 控制器）
+//uppercase 过滤器将字符串格式化成大写格式：
+
+
+
The name is {{ lastName | uppercase }}
+
+
+
+//lowercase 过滤器将字符串格式化成小写格式：
+
+
+
The name is {{ lastName | lowercase }}
+
+
+
+//currency 过滤器将一个数字格式化成货币格式：
+
+
+//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个指令上。
+//orderBy 过滤器根据一个表达式排序一个数组：
+
+
+
+
+ {{ x.name + ', ' + x.country }}
+
+
+
+
+
+//一个输入框过滤器可以通过一个管道符 (|)
+//以及后跟一个冒号和模式名的 filter 添加到一个指令上。
+//该过滤器从一个数组中选择一个子集：
+
+
+
+
+
+
+
+ {{ (x.name | uppercase) + ', ' + x.country }}
+
+
+
+
+
+///////////////////////////////////
+// AngularJS AJAX - $http
+
+//$http 是一个从远程服务器读取数据的 AngularJS 服务。
+
+// 以下数据可由一个 web 服务器提供：
+// http://www.w3schools.com/angular/customers.php
+// **访问 URL 来查看数据格式**
+
+// AngularJS $http 是一个从 web 服务器上读取数据的核心服务。
+// $http.get(url) 这个函数用来读取服务器数据。
+
+
+
+
+ {{ x.Name + ', ' + x.Country }}
+
+
+
+
+
+
+
+// 应用解析：
+
+// AngularJS 应用由 ng-app 定义。该应用运行在一个
中。
+// ng-controller 指令命名控制器对象。
+// customersCtrl 函数是一个标准的 JavaScript 对象构造器。
+// AngularJS 会使用一个 $scope 和 $http 对象来调用 customersCtrl。
+// $scope 就是该应用对象（应用的变量和函数的所有者）。
+// $http 是一个用于请求外部数据的 XMLHttpRequest 对象。
+// $http.get() 从 http://www.w3schools.com/angular/customers.php 读取 JSON 数据。
+// 如果成功， 该控制器会根据来自服务器的 JSON 数据，在 $scope 中创建一个属性 (names)。
+
+
+// 向不同的服务器（不同于请求页）请求数据，称作跨站 HTTP 请求。
+// 跨站请求在网站上很普遍。许多网页会从不同的服务器加载 CSS，图片和脚本。
+// 在现代浏览器中，基于安全原因，从脚本内进行跨站 HTTP 请求是被禁止的。
+// 下面的这行代码，已被加入到我们的 PHP 例子中，以便允许跨站访问。
+header("Access-Control-Allow-Origin: *");
+
+
+///////////////////////////////////
+// AngularJS 表格
+
+// 使用 angular 显示表格非常简单：
+
+
+
+
+ {{ x.Name }}
+ {{ x.Country }}
+
+
+
+
+
+
+
+// 要排序表格，添加一个 orderBy 过滤器：
+
+
+ {{ x.Name }}
+ {{ x.Country }}
+
+
+
+// 要显示表格索引值，添加一个带有 $index 的
：
+
+
+ {{ $index + 1 }}
+ {{ x.Name }}
+ {{ x.Country }}
+
+
+
+// 使用 $even 和 $odd
+
+
+ {{ x.Name }}
+ {{ x.Name }}
+ {{ x.Country }}
+ {{ x.Country }}
+
+
+
+///////////////////////////////////
+// AngularJS HTML DOM
+
+//AngularJS 有用于将应用的数据绑定到 HTML DOM 元素属性的指令。
+
+// ng-disabled 指令将 AngularJS 应用的数据绑定到 HTML 元素的 disabled 属性上。
+
+
+
+
+Click Me!
+
+
+
+
+
+
+Click Me!
+
+
+// 如果 mySwitch 的值求值为 false，则该按钮将不会被禁用：
+
+ Click Me!
+
+
+// ng-show 指令显示或隐藏一个 HTML 元素。
+
+
+
+
I am visible.
+
+
I am not visible.
+
+
+
+
Click me!
+
+
{{ count }}
+
+
元素的可见性，该元素含有两个输入框。
+// 函数 toggle() 将 myVar 在 true 和 false 间进行切换。
+// 值 ng-hide="true" 使得该元素不可见。
+
+
+// ng-show 指令也能用来设置一个应用的某部分的可见性。
+// 值 ng-show="false" 使得一个 HTML 元素不可见。
+// 值 ng-show="true" 使得一个 HTML 元素可见。
+// 这个例子与上面的一样，但用 ng-show 替代了 ng-hide：
+
+
+
+
+///////////////////////////////////
+// AngularJS 模块
+
+// 一个 AngularJS 模块定义一个应用。
+// 模块是一个应用的不同部分所在的一个容器。
+// 模块是应用控制器的一个容器。
+// 控制器总是隶属于一个模块。
+
+// 这个应用 ("myApp") 有一个控制器 ("myCtrl")：
+
+
+
+
+
+
+
+{{ firstName + " " + lastName }}
+
+
+
+
+
+
+
+// 在 AngularJS 应用中通常将模块和控制器放置在 JavaScript 文件中。
+// 在本例中，"myApp.js" 包含了一个应用模块的定义，而 "myCtrl.js" 包含了控制器：
+
+
+
+
+
+
+
+{{ firstName + " " + lastName }}
+
+
+
+
+
+
+
+
+//myApp.js
+var app = angular.module("myApp", []);
+
+// 模块定义中的 [] 参数可用来定义依赖的模块。
+
+// myCtrl.js
+app.controller("myCtrl", function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName= "Doe";
+});
+
+// JavaScript 中应该避免使用全局函数。它们会非常容易地被覆盖
+// 或被其它脚本破坏。
+
+// AngularJS 脚本通过将所有函数保存在模块内，缓解了这种问题。
+
+// 虽然 HTML 应用中通常是将脚本放置在
+// 元素的末尾，但还是推荐你要么在
+// 中要么在 的开头处加载 AngularJS 库。
+
+// 这是因为对 angular.module 的调用只有在库被加载后才能被编译。
+
+
+
+
+
+
+
+{{ firstName + " " + lastName }}
+
+
+
+
+
+
+
+
+///////////////////////////////////
+// AngularJS 应用
+
+// AngularJS 模块定义 AngularJS 应用。
+// AngularJS 控制器控制 AngularJS 应用。
+// ng-app 指令定义该应用，ng-controller 定义该控制器。
+
+ First Name:
+
+
+// AngularJS 模块定义应用：
+var app = angular.module('myApp', []);
+
+// AngularJS 控制器控制应用：
+app.controller('myCtrl', function($scope) {
+ $scope.firstName= "John";
+ $scope.lastName= "Doe";
+});
+```
+
+## 来源 & 参考
+
+**例子**
+
+- http://www.w3schools.com/angular/angular_examples.asp
+
+**参考**
+
+- http://www.w3schools.com/angular/angular_ref_directives.asp
+- http://www.w3schools.com/angular/default.asp