引言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",[])的返回值为当前模块，我们赋值为变量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页面的时候，我们定义我们的控制器，在控制器中定义我们的变量，然后输出。
转载请注明原文地址: https://ju.6miu.com/read-661832.html
