（4）AngularJS 1.X 之控制器

最新推荐文章于 2018-05-23 20:51:11 发布

GISer.Wang

最新推荐文章于 2018-05-23 20:51:11 发布

阅读量629

点赞数 1

分类专栏： angularjs1.X

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54882840

版权

angularjs1.X 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言
AngularJS之控制器

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页面的时候，我们定义我们的控制器，在控制器中定义我们的变量，然后输出。

GISer.Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（4）AngularJS 1.X 之控制器

引言AngularJS之控制器1 ng-init指令创建变量11 代码实现12 运行结果13 代码解释2 通过控制器赋值变量21 代码实现22 代码解释3 控制器产生作用域31 代码实现32 代码解释1.引言在起初我们就说过AngularJS基于MVC的实现，在开发过程中我们是将controller和view分离的，在此篇博客中我们就来看看如果在AngularJS中
复制链接

扫一扫