AngularJS 是一种流行的前端 JavaScript 框架，它提供了一种简单、快速和可维护的方式来构建复杂的 Web 应用程序。本文将介绍 AngularJS 中的控制器，帮助读者更好地理解 AngularJS 的工作原理。
什么是控制器？
在 AngularJS 中，控制器是一个 JavaScript 函数，用于管理应用程序的数据和行为。它负责处理用户的输入和输出，并与模型和视图交互。控制器通常与特定的 HTML 元素相关联，并且可以在 HTML 中使用指令来声明。
如何定义控制器？
要定义控制器，需要使用 AngularJS 的 controller 函数。这个函数有两个参数：控制器的名称和控制器函数。
angular.module('myApp', [])
.controller('myController', function($scope) {
// Controller logic goes here
});这段代码定义了一个名为 myController 的控制器，它依赖于 $scope 服务。$scope 是 AngularJS 中的一个重要概念，它充当控制器和视图之间的桥梁。我们将在后面的章节中详细讨论 $scope。
控制器的作用域
控制器拥有自己的作用域，它可以访问 $scope 对象中定义的属性和方法。如果在控制器内部创建一个变量或函数，它们只能在该控制器中使用。
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.name = 'John';
$scope.sayHello = function() {
alert('Hello, ' + $scope.name + '!');
};
});在这个例子中，我们在 $scope 对象中定义了一个名为 name 的属性和一个名为 sayHello 的函数。我们可以在 HTML 中使用这些属性和函数：
<div ng-controller="myController"> <input type="text" ng-model="name"> <button ng-click="sayHello()">Say Hello</button> </div>
当用户在文本框中输入名称并单击“Say Hello”按钮时，控制器将调用 sayHello 函数，并向用户显示一个警报框。
控制器之间的通讯
在 AngularJS 中，可以通过 $rootScope 服务在不同的控制器之间共享数据。$rootScope 是 AngularJS 中的根作用域，所有其他作用域都是它的后代。在这种方式下，多个控制器可以访问同一个对象。
angular.module('myApp', [])
.controller('myController1', function($scope, $rootScope) {
$rootScope.message = 'Hello from Controller 1!';
})
.controller('myController2', function($scope, $rootScope) {
$scope.message = $rootScope.message;
});在这个例子中，我们在 myController1 中定义了一个名为 message 的属性并将其添加到 $rootScope 对象中。在 myController2 中，我们使用 $scope 服务将 message 属性添加到控制器的作用域中，并使其可在 HTML 中使用。
<div ng-controller="myController1"></div>
<div ng-controller="myController2">
{{ message }}
</div>当页面加载时，{{ message }} 将显示“Hello from Controller 1!”。
总结
本文介绍了 AngularJS 中的控制器，讨论了如何定义控制器、控制器的作用域以及控制器之间的通讯。掌握这些概念是学习 AngularJS 的关键，它们可以帮助开发人员构建
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2929