在 AngularJS 中,控制器(Controller)是一个 JavaScript 构造函数或对象,用于定义 AngularJS 应用程序的行为和业务逻辑。控制器负责管理应用程序的模型数据,以及定义用户界面的交互逻辑。

以下是一个简单的 AngularJS 控制器的示例:
// 定义一个 AngularJS 模块
var app = angular.module('myApp', []);

// 在模块中创建一个控制器
app.controller('myController', function($scope) {
  // 在控制器中定义数据和行为
  $scope.message = 'Hello, AngularJS!';

  $scope.changeMessage = function() {
    $scope.message = 'Welcome to the world of AngularJS!';
  };
});

在这个示例中,我们首先创建了一个 AngularJS 模块 myApp,然后在模块中创建了一个控制器 myController。控制器通过使用 $scope 对象来与视图进行通信,$scope 是 AngularJS 中的作用域对象。

在控制器中,我们定义了一个变量 $scope.message,并赋予其初始值。同时,我们还定义了一个函数 $scope.changeMessage,该函数可以在视图中调用,用于修改 $scope.message 的值。

在 HTML 中,我们使用指令将控制器与视图关联起来:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Controller</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="myController">
  <!-- 使用控制器中的数据和行为 -->
  <h1>{{ message }}</h1>
  <button ng-click="changeMessage()">Change Message</button>
</body>
</html>

在这个例子中,ng-app="myApp" 指明了 AngularJS 应用程序的根元素,而 ng-controller="myController" 则指定了应用程序中使用的控制器。在视图中,我们使用双花括号 {{ message }} 来显示控制器中定义的数据,同时使用 ng-click 指令来调用控制器中的函数。

需要注意的是,AngularJS 推崇使用控制器别名语法 controllerAs,以便更好地支持组件化开发。在现代的 Angular(Angular 2+)中,使用组件替代了控制器的概念。


转载请注明出处:http://www.pingtaimeng.com/article/detail/4858/Angular