Angularjs 控制器controller的作用

Posted 2020-06-17

    我们在view中给模型的一个参数name赋值 “hello world” .

这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那么视图里是无法执行复杂操作的,这时控制器就派上用场了.

简单讲:控制器 controller 就是实现视图和模型之间数据传递,方法调用,改变模型等一系列操作,他是javascript函数(也可以看做类或者类型)

控制器有几点需要注意的地方:

1.一个控制器最好只包含一个视图的业务逻辑.以后你会看到我们的目录结构Client/scripts/controllers 包含很多个控制器脚本.

2.控制器之间不存在相互调用,共用的工具方法和不属于控制器的业务单独抽出来做成一个服务,然后在控制器中注入服务来调用.比如请求服务器拿到数据就应该单独做成服务,毕竟有些数据是很多个控制器共用的.

3.控制器不应该操作DOM.

4.控制器里不应该做数据过滤,因为angular.js 有强大的filter 过滤器.

下面我们在 index.html 页面中写一个最简单的控制器 myCtrl

脚本如下:

        <script type="text/javascript">
	var myApp = angular.module("YIJIEBUYI" , []).
	       controller( "myCtrl", function ($scope) {
	       $scope.name = ‘一介布衣‘;
	});
	</script>

首先看到这个控制器监视的应用名 "YIJIEBUYI" ,ng-app可以看做angular.js的一个应用入口.

通过这个入口我们创建了简单的控制器 "myCtrl"  这时你看到了一个对象 $scope ,这个东西我们会单独开博来说明,这里你就把它当做一个上下文环境.

它联通了模型和视图,非常重要.我们给$scope对象属性 name 赋值 "一介布衣",那么在视图中如何访问呢?

<div ng-controller="myCtrl">
	显示文字,<span ng-bind="name" ></span>
</div>

我们在视图中有了angular.js 指令标识 ng-controller ,它指定了控制器名称 "myCtrl" ,而此控制器我们已经在当前页面上实现了脚本.

span标签通过 ng-bind 绑定了模型中的 name 属性的值.

通过上面的控制器我们可以看到$scope的name属性已经赋值 "一介布衣",我们运行页面看下效果.

可以看到控制器里给模型name属性的赋值已经在视图中成功显示出来.