AngularJS 控制器

AngularJS 控制器是 AngularJS 框架中的一个关键组件，用于控制应用程序中的视图层（HTML）和数据层（JavaScript 对象）之间的交互。

控制器的主要作用是对一些动态数据进行引用和处理，以及对视图的响应式行为进行编程。它们通常绑定到视图的特定部分，以便在呈现和用户交互中使用。

创建控制器

在 AngularJS 中，可以使用 controller() 方法来创建控制器。该方法需要两个参数：控制器名称和一个返回控制器实例的函数。

angular.module('myApp', [])
  .controller('myController', function() {
    // 控制器逻辑
  });

上述示例代码中，我们首先使用 angular.module() 方法创建了一个新的 AngularJS 模块，然后使用 .controller() 方法创建了一个名为 myController 的控制器。

注意：在实际开发环境中，我们通常会将控制器的逻辑定义在一个单独的 JavaScript 文件中，然后使用 <script> 标签将其引入到 HTML 页面中。

控制器的作用域

在 AngularJS 中，每个控制器都有自己的作用域，它是一个 JavaScript 对象，用于绑定和管理视图和控制器之间的数据。

通过 controller() 方法创建的控制器会继承一个 $scope 对象作为参数，该对象用于存储控制器中所需的所有数据和方法。

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.name = "John";
    $scope.age = 30;
  });

上述示例代码中，我们在控制器的作用域中定义了两个变量 name 和 age，它们可以在控制器所绑定的 HTML 中使用。

<div ng-app="myApp" ng-controller="myController">
  <p>Name: {{name}}</p>
  <p>Age: {{age}}</p>
</div>

上述示例代码中，我们将控制器 myController 绑定到了 <div> 标签中，然后使用 {{}} 插值表达式来绑定控制器中的变量。

控制器的方法

除了绑定和处理控制器作用域中的变量外，控制器还可以定义一些可以在视图中调用的方法。

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.name = "John";
    
    $scope.sayHello = function() {
      alert('Hello ' + $scope.name);
    };
  });

上述示例代码中，我们在控制器中定义了一个 sayHello() 方法，它通过 alert() 弹窗方法向用户展示一条问候语。

在 HTML 中，我们可以通过 ng-click 指令来绑定这个方法到一个按钮上，以便在用户点击时调用。

<div ng-app="myApp" ng-controller="myController">
  <p>Name: {{name}}</p>
  <button ng-click="sayHello()">Say Hello</button>
</div>

总结

AngularJS 控制器是一个非常有用的组件，用于将视图和数据联系起来，并编写响应式的交互行为。在实际开发中，我们需要合理运用控制器和其他 AngularJS 组件，以便创建出更加健壮且易于维护的 Web 应用程序。