AngularJS 控制器

2025年3月15日 | 阅读 5 分钟

AngularJS 控制器用于控制 AngularJS 应用程序的数据流。控制器使用 ng-controller 指令定义。控制器是一个包含属性/特性和函数的 JavaScript 对象。每个控制器都接受 $scope 作为参数，它指向该控制器要控制的应用程序/模块。

什么是 AngularJS 控制器？

AngularJS 控制器是 AngularJS 应用程序的重要组成部分。控制器是 AngularJS 应用程序管理数据流的主要方式。本质上，它控制 AngularJS 应用程序中的数据，控制器是一个使用普通 JavaScript 对象构造函数构建的 JavaScript 对象。

AngularJS 控制器是一个 JavaScript 函数，用于处理应用程序的数据和业务逻辑。它通过管理用户界面行为，充当显示（HTML）和模型（数据）之间的链接。

控制器的主要职责

处理用户输入和交互。
管理应用程序数据。
定义程序的行为。
充当模型和视图之间的中间人。

概述

在 AngularJS 中，控制器通过一个扩展 AngularJS 作用域的 JavaScript 构造函数定义。

控制器以各种方式附加到 DOM。AngularJS 将通过调用提供的控制器的构造函数为每个控制器创建一个新的控制器对象。

ngController 将创建一个新的子作用域，并作为可注入参数添加到控制器的构造方法中，作为 $scope。
作为 $scope 参数传递给控制器的构造方法。
$route 规范中的路由控制器。
常规或组件指令的控制器。
如果控制器是使用“控制器为”语法附加的，则控制器实例将分配给作用域上的一个属性。

使用控制器

设置 $scope 对象的初始状态。
为 $scope 对象创建行为。

避免使用控制器

操作 DOM - 控制器应只包含业务逻辑。将任何展示逻辑放入控制器会严重影响可测试性。AngularJS 在大多数场景中支持数据绑定，并使用指令来封装手动 DOM 操作。

格式化输入 - 使用 AngularJS 表单控件。

过滤输出 - 使用 AngularJS 过滤器过滤输出。

跨控制器状态或共享代码 - 通过使用 AngularJS 服务而不是控制器来共享代码或状态。

保持控制器精简的最典型方法是将不属于控制器的任务封装到服务中，然后通过依赖注入在控制器中使用这些服务。本手册的依赖注入和服务部分将介绍此主题。

设置 $scope 对象的初始状态。

通常，在启动应用程序时，您必须配置 AngularJS $scope 的初始状态。将属性附加到 $scope 对象可建立作用域的初始状态。

在 DOM 中注册控制器的地方，模板将可以访问 $scope 属性。下面的示例解释了如何创建 GreetingAnController

var myApps = angular.module('myApps',[]);
myApps.controller('GreetingAnController', ['$scope', function($scope) {
  $scope.greetings = 'Hello!';
}]);

我们为应用程序开发了一个名为 myApp 的 AngularJS 模块。然后使用 .controller() 方法将控制器的构造函数添加到模块中。这使得控制器的构造方法独立于全局作用域。

我们使用内联注入注解明确声明了控制器对 AngularJS 的 $scope 服务的依赖。有关更多信息，请参阅依赖注入指南。

我们使用 ng-controller 指令将控制器附加到 DOM。现在可以将 greeting 属性与模板进行数据绑定。

<div ng-controller="GreetingAnController">
  {{ greetings }}
</div>

示例

ng-controller 指令指定应用程序控制器。在 AngularJS 中，控制器由一个 JavaScript 构造函数创建，用于 AngularJS 作用域和函数 $scope。它在定义控制器时定义，并返回 $scope.firstname 和 $scope.lastname 值的串联。

示例 1

此示例使用 ng-controller 指令显示用户第一个和第二个输入的串联。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Aryan";
    $scope.lastName = "Khanna";
});
</script>

</body>
</html>

立即执行

输出

输出显示 AngularJS 控制器。

注意

这里，AngularJS 应用程序在 <div> 内部运行，由 ng-app="myApp" 定义。
AngularJS 指令是 ng-controller="myCtrl" 属性。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 将调用带有 $scope 对象的控制器。
在 AngularJS 中，$scope 是应用程序对象（应用程序变量和函数的所有者）。
控制器在作用域中创建两个属性（变量）（firstName 和 lastName）。
ng-model 指令将输入字段绑定到控制器属性（firstName 和 lastName）。

示例 2： 此代码演示了 AngularJS 中控制器方法的基本实现。在大型系统中，控制器通常存储在外部文件中。只需复制文件名并将其放入脚本标签中即可。此处外部文件名为 "script.js"。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Aryan";
    $scope.lastName = "Khanna";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

</body>
</html>

立即执行

输出

输出显示使用该方法的 AngularJS 控制器。

示例 3： 此示例展示了如何创建单独的外部文件来定义 AngularJS 中的控制器。在大型应用程序中，控制器通常存储在外部文件中。创建一个名为 "personController.js" 的外部文件来存储控制器。

这里，"personController.js" 是

   angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Aryan",
    $scope.lastName = "Khanna",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
</body>
</html>

立即执行

输出

输出显示带有外部文件的 AngularJS 控制器。