步骤1——静态模板
这里将举例展示Angular是如何增强标准HTML的。你将创建一个纯粹的静态HTML页面，下面的步骤你会看到我们如何把HTML代码转为Angular模板，通过数据来动态显示出相同的结果。
在这一步中，我们将添加两部手机的基本信息到一个HTML页面中。 页面现在显示了两个手机的一个列表信息
工作区切换到步骤1
git checkout -f step-1
此时的app/index.html:
这里我们展示完整的html
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM™ with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
</body>
</html>
步骤2——Angular模板
现在我们让利用AngularJS让页面动态化。我们还将添加一些测试，这将检验我们添加的控制器代码会执行预期的工作。
其实有很多方法来构建应用程序，在Angular中，我们推荐采用Model-View-Controller（MVC——模型-视图-控制器）的设计模式来解耦代码与单独的问题。利用这点，我们在model、view和controller中用到尽量少的Angular和Javascript。
程序将展示利用数据动态的列出3部手机列表。
工作区切换到步骤2
git checkout -f step-2
这里需要扩展一下视图（view）和模板（template）
在Angular中，视图是数据模型通过HTML模板的投影，这意味着任何数据模型的变化，Angular都会针对绑定点刷新视图。
现在我们再看一下，步骤2中的index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
这里我们用ngRepeat指令和两个Angular表达式(expression)取代了硬编码的电话列表:
- li的ng-repeat="phone in phones"属性就是一个Angular重复指令，它告诉angular在列表中为每个电话信息重复创建li元素，这里的li标签就作为了模板。
![Uploading tutorial_02_000240.png . . .] - 在双大括号中的表达式{{phone.name}}和{{phone.snippet}}会用实际的值替代。
这里，我们还添加了新的指令，叫做ng-controller，它为<body>标签指定了一个PhoneListCtrl的控制器，对于这点
- 在双大括号中的表达式{{phone.name}}和{{phone.snippet}}指定的绑定，将参考我们程序中的数据模型，这些都是在我们的PhoneListCtrl的控制器进行设置的。
注意：我们已经通过加载使用ng-app="phonecatApp"来指定了一个Angular数据模型，这里phonecatApp是我们数据模型的名字，这个模型被包含在PhoneListCtrl中。
tutorial_02.png
这里我们也需要扩展一下数据模型（Model）和控制器（Controller）
这里的数据模型（Model）（一个简单的电话信息数值）是由PhoneListCtrl控制器（Controller）实例化的。这个控制器只是简单的一个构造函数，它操作了一个$scope参数。
app/app.js
'use strict';
// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);
// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($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.'
}
];
});
这里，我们定义了一个叫做PhoneListCtrl的控制器，并且注册它到一个叫做phonecatApp的AngularJS数据模型中。注意，我们在<code><html></code>中的ng-app指令现在指定了一个phonecatApp的数据模型，这将在启动Angular过程中加载。
尽管现在看来控制器并没有做什么特别的事，但它是至关重要的。通过上下文数据模型,控制器允许我们建立模型和视图之间的数据绑定。我们由此连接起二者间的描述、数据和逻辑，它们是如下工作的：
- ngController指令定位到<code><body></code>标签，引用指定名称的控制器，PhoneListCtrl在JavaScript文件app.js中设定。
- PhoneListCtrl控制器把数据链接到$scope来注入我们的控制器函数。这个scope是一个在应用定义时预定义（指定）的根作用范围(root scope)，然后这个控制器通过 <code><body ng-controller="PhoneListCtrl"></code>标签绑定。
作用范围
在Angular中作用范围的概念至关重要。作用范围被视作把模型、视图和控制器粘合起来协同工作的胶水。Angular利用作用范围来整合模板中的信息、数据模型和控制器，保持模型和视图之间的独立与同步。任何在模型中的变化都被反映到视图中，在视图中的操作变化也反映到数据模型。
参考资料
网友评论