神奇的angularJS——controller控制器的作用

一、什么是controller

在angularJS中,controlle是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为



二、controller的作用域


上一篇博客中,我写了个控制器,并将name赋值为“菲尔”
app.controller('helloCtrl', function ($scope) {
    $scope.name = "菲尔";
});

如何将helloCtrl控制器绑定到相应的页面中了 ,我们在body使用了 ng-controller指令,因此整个body都成为了helloCtrl的作用范围,因此 我们可以将 {{name}}写于body的任何地方,假如我们将helloCtrl放置于div中,如:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">


<p> {{name}}</p>


<div ng-controller="helloCtrl">
    {{name}}
</div>


</body>


<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>

我们在来看看结果,发现只出现了一个菲尔


还有一个{{name}}去哪里了呢,为了更清晰的表示,我们给第一个{{name}}加入style如:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">

<p style="background: yellow;height: 20px"> {{name}}</p>

<div ng-controller="helloCtrl">
    {{name}}
</div>

</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>
看看结果,明白了  第一个{{name}}的值为空,也就是说,helloCtrl并没有给第一个{{name}}赋值


三、多controller的实现

根据上面我们知道,angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容,因此我们可以在同一个界面上划分不同的模块,通过不同的控制器控制不同的模块来进行开发,这样通过划分模块的开发方式,对今后维护代码带来了便利。
还是以前的例子,我们在controller.js中再写一个控制器:如
app.controller('helloCtrl', function ($scope) {
    $scope.name = "菲尔";
});

app.controller('worldCtrl', function ($scope) {
    $scope.name="hello world";
});
并且在html中绑定 worldCtrl


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="Hello">

<p style="background: yellow;height: 20px" ng-controller="worldCtrl"> {{name}}</p>

<div ng-controller="helloCtrl">
    {{name}}
</div>

</body>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>
这个时候 第一个{{name}}也就解析成功了


我们会发现,不同的controller他们scope对象是不一样的,即使都是用了name这个变量,可以看出controller之间是封闭的,可是有时候我们面对两个模块之间进行数据交互,必然在两个controller之间进行通信,这就涉及到angular中的service操作,我会在下一篇文章进行记录。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值