通过上一节中的HelloWorld的示例,大家应该对AngularJS的语法有了一些了解,前面我说过,AngularJS是 MVC体系结构,今天就来介绍一下AngularJS的控制器(Controller),它负责响应于用户输入并执行交互数据模型对象。
开发环境
Sublime Text(建议使用)
AngularJS-1.5.6
AngularJS控制器
不多说,直接上代码
//html代码
<div ng-app="count">
<h1>两个数的相加</h1>
<div id="add" ng-controller="add">
加法:
<input type="text" ng-model="one" placeholder="0">
+
<input type="text" ng-model="two" placeholder="0">
= {{one*1 + two*1}}
</div>
</div>
新建一个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指令:
<div ng-app="count">
之前介绍过ng-app这个指令,在本例中,ng-app的作用域是局部,并且,指定了一个count模块,意指在这个作用域中,只有count这个模块中的controller才会起作用。
ng-controller指令:
<div id="add" ng-controller="add">
ng-controller有些类似于ng-app的作用,是控制器的作用范围。付给ng-controller的值,是指定一个控制器,如前面js代码中定义的控制器“add”。
ng-model和双大括号表达式{{}}在上一节中已经介绍过了,这一节就不在另做说明了。
给大家留个疑问,双大括号表达式为什么要写成
{{one*1 + two*1}}