编码世界程序员的那些事儿程序员

AngularJS入门教程-控制器(三)

2016-06-12  本文已影响65人  憨厚的老菜鸟

通过上一节中的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}}
上一篇下一篇

猜你喜欢

热点阅读