AngularJS入门教程-控制器（三）

通过上一节中的HelloWorld的示例，大家应该对AngularJS的语法有了一些了解，前面我说过，AngularJS是 MVC体系结构，今天就来介绍一下AngularJS的控制器（Controller），它负责响应于用户输入并执行交互数据模型对象。

开发环境

Sublime Text（建议使用）
AngularJS-1.5.6

AngularJS控制器

不多说，直接上代码

//html代码

        
两个数的相加
        

            加法：
            
            ＋
            
            ＝ {{one*1 + two*1}}
        
  

新建一个js文件，可以命名为controller.js，也可以直接在html文件中写js代码，我习惯将js代码写在js文件里。

//javascript代码
angular.module('count',[])
.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

或

//javascript代码
var app = angular.module('count',[]);
app.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

代码解释：
从代码上可以看出来，这个Demo的功能是计算两个数相加。

我们先来看一下javascript代码，

创建一个模块：

var app = angular.module('count',[]);

这段代码是创建一个module应用模块，名为count，第二个参数是它的依赖模块列表，我们这里创建了一个独立的模块。

创建一个控制器：

app.controller('add',function($scope){
    $scope.one = 0;
    $scope.two = 0;
})

创建一个属于名为count模块的控制器，控制器的名称为add，一个应用模块可以包含多个控制器。构造函数可以获取$scope 对象，$scope用于存储所有controller 暴露的接口和方法，$scope会被Angular传递到视图和指令层。在本例中，$scope会接收视图中的one和two模型，然后再把这个两个参数传回视图。

下面在来看下html代码

ng-app指令：

之前介绍过ng-app这个指令，在本例中，ng-app的作用域是局部，并且，指定了一个count模块，意指在这个作用域中，只有count这个模块中的controller才会起作用。

ng-controller指令：

ng-controller有些类似于ng-app的作用，是控制器的作用范围。付给ng-controller的值，是指定一个控制器，如前面js代码中定义的控制器“add”。

ng-model和双大括号表达式{{}}在上一节中已经介绍过了，这一节就不在另做说明了。

给大家留个疑问，双大括号表达式为什么要写成

 {{one*1 + two*1}}