（4）AngularJS 1.X 之控制器

2024-04-27 15:08:24

字体：大中小

来源：转载

供稿：网友

引言AngularJS之控制器1 ng-init指令创建变量11 代码实现12 运行结果13 代码解释2 通过控制器赋值变量21 代码实现22 代码解释3 控制器产生作用域31 代码实现32 代码解释

1.引言

在起初我们就说过AngularJS基于MVC的实现，在开发过程中我们是将controller和view分离的，在此篇博客中我们就来看看如果在AngularJS中实现控制器。

2.`AngularJS`之控制器

2.1 `ng-init`指令创建变量

在说控制器之前我们先看看，如果没有控制器，我们应该如何赋值我们的变量呢？在第一篇博客中我们说了一个指令叫做ng-init，通过该指令我们可以创建我们的变量。

2.1.1 代码实现

2.1.2 运行结果

这里写图片描述

2.1.3 代码解释

我们通过ng-init指令创建了一个变量，叫做test然后我们给test变量赋值字符串a然后我们通过表达式输出test的变量

2.2 通过控制器赋值变量

在上面的例子中存在明显的缺陷，缺陷就是html是我们的view，应该仅仅负责页面的显示，不应该参与过多的控制代码：例如创建变量等等，创建变量应该存在我们的控制器中,在AngularJS中使用ng-controller指令创建我们的控制器，在AngularJS中控制器的实现是一个function对象，接下来我们就来看一下如何实现控制器。

2.2.1 代码实现

首先引入我们的AngularJS函数库（省略）指定我们的AangularJS作用域（注意我们的ng-app指定为myApp）<html ng-app="myApp"> <head> </head> <body> </body></html>使用ng-controller指令指定我们控制器（注意我们的控制器名称为：firstController）<div ng-controller="firstController"> {{test}}</div>然后我们使用代码定义我们的变量test <script> var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="第一个控制器"; }) </script>运行结果

这里写图片描述

2.2.2 代码解释

angular.module("myApp",[])方法有两个参数，第一个参数是模块的名称，对应着ng-app指令对应的值，第二个参数是模块的依赖，此处为空，这个参数在使用插件的时候会指定，在模块化编程当中也会使用。var app=angular.module("myApp",[])的返回值为当前模块，我们赋值为变量appapp.controller()方法有两个参数，第一个参数是控制器的名称，对应着ng-controller指令，每一个ng-controller指令都应有着function对象关注控制器的第二个参数对象function，函数对象有一个$scope参数，这个参数不能修改，必须写成$scope，我们通过给$scope对象添加了一个test参数，相当于在controller作用域中添加了一个test对象$scope对象其实是一个服务，也就是service，关于service的介绍我们将在以后说。

2.3 控制器产生作用域

在这里我们看一下AngularJS中控制器产生的作用域，话不多少，看一下下面的代码实例。

2.3.1 代码实现

我们的html标签<body ng-init="test='ng-init'"> <div ng-controller="firstController"> {{test}} <div ng-controller="thirdController"> {{test}} </div> <div ng-controller="forthController"> {{test}} </div> </div> <div ng-controller="secondController"> {{test}} </div></body>我们的控制器代码 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="firstController"; }) app.controller("thirdController",function($scope){ $scope.test="thirdController"; }) app.controller("secondController",function($scope){ }) app.controller("forthController",function($scope){ })运行结果

这里写图片描述

2.3.2 代码解释

我们首先看一下html标签的结构

这里写图片描述

我们在forthController输出test变量，因为forthController没有test变量，所以向上查找，找到firstController控制器，所以输出firstController我们在secondController输出test变量，因为secondController没有test变量，所以向上查找，找到body标签，body标签定义了test变量，所以输出ng-init。我们的控制器会形成一个树状图，我们通过树状图查找变量，直到查找到为止，如果最终什么都没查找到那么就什么也不会输出。最重要的一条，在AngularJS中，我们的变量的作用域是基于控制器的，一般在写html页面的时候，我们定义我们的控制器，在控制器中定义我们的变量，然后输出。

上一篇：网页访问IE8以下CLOSE浏览器

下一篇：JAVASCRIPT之禁止网页刷新