步骤1——静态模板+步骤2---Angular模板

步骤1——静态模板

这里将举例展示Angular是如何增强标准HTML的。你将创建一个纯粹的静态HTML页面，下面的步骤你会看到我们如何把HTML代码转为Angular模板，通过数据来动态显示出相同的结果。

在这一步中，我们将添加两部手机的基本信息到一个HTML页面中。 页面现在显示了两个手机的一个列表信息

工作区切换到步骤1

git checkout -f step-1

此时的app/index.html:

这里我们展示完整的html

  
    
    
    
    
    
  
  

    

      

        Nexus S
        

          Fast just got faster with Nexus S.
        
      
      

        Motorola XOOM™ with Wi-Fi
        

          The Next, Next Generation tablet.
        
      
    

  

步骤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

  
    
    
    
    
    
    
  
  

    

      

        {{phone.name}}
        
{{phone.snippet}}
      
    

  

这里我们用ngRepeat指令和两个Angular表达式(expression)取代了硬编码的电话列表:

• li的ng-repeat="phone in phones"属性就是一个Angular重复指令，它告诉angular在列表中为每个电话信息重复创建li元素，这里的li标签就作为了模板。
  ![Uploading tutorial_02_000240.png . . .]
• 在双大括号中的表达式{{phone.name}}和{{phone.snippet}}会用实际的值替代。

这里，我们还添加了新的指令，叫做ng-controller，它为标签指定了一个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数据模型中。注意，我们在中的ng-app指令现在指定了一个phonecatApp的数据模型，这将在启动Angular过程中加载。

尽管现在看来控制器并没有做什么特别的事，但它是至关重要的。通过上下文数据模型,控制器允许我们建立模型和视图之间的数据绑定。我们由此连接起二者间的描述、数据和逻辑，它们是如下工作的：

• ngController指令定位到标签，引用指定名称的控制器，PhoneListCtrl在JavaScript文件app.js中设定。
• PhoneListCtrl控制器把数据链接到$scope来注入我们的控制器函数。这个scope是一个在应用定义时预定义（指定）的根作用范围(root scope)，然后这个控制器通过 标签绑定。

作用范围

在Angular中作用范围的概念至关重要。作用范围被视作把模型、视图和控制器粘合起来协同工作的胶水。Angular利用作用范围来整合模板中的信息、数据模型和控制器，保持模型和视图之间的独立与同步。任何在模型中的变化都被反映到视图中，在视图中的操作变化也反映到数据模型。

参考资料

步骤1——静态模板

步骤2——Angular模板