(4)AngularJS 1.X 之控制器

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

1.引言

      在起初我们就说过AngularJS基于MVC的实现,在开发过程中我们是将controllerview分离的,在此篇博客中我们就来看看如果在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>
  • 运行结果

(4)AngularJS 1.X 之控制器_第1张图片

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){
        })
  • 运行结果

(4)AngularJS 1.X 之控制器_第2张图片

2.3.2 代码解释

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

(4)AngularJS 1.X 之控制器_第3张图片

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

你可能感兴趣的:(angularjs1.X)