您的位置：首页 > Web前端 > AngularJS

（4）AngularJS 1.X 之控制器

2017-02-06 15:35 183 查看
引言

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 代码实现

<body ng-init="test='a'">
{{test}}
</body>


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",[])
的返回值为当前模块，我们赋值为变量
app


app.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页面的时候，我们定义我们的控制器，在控制器中定义我们的变量，然后输出。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航