一、AngularJS控制器核心作用

作为AngularJS应用的"大脑"，控制器(Controller)承担着关键职责：

• 数据初始化 - 定义$scope对象的初始状态
• 业务逻辑处理 - 响应用户交互和数据处理
• 视图绑定桥梁 - 建立视图与模型的数据通道
• 生命周期管理 - 通过$scope.$watch监控数据变化

控制器遵循MVVM模式，有效解耦视图与业务逻辑，提升代码可维护性。

二、控制器示例代码解析

基础用户管理控制器

angular.module('myApp', [])
.controller('UserController', ['$scope', function($scope) {
  // 1. 初始化数据模型
  $scope.users = [
    { id: 1, name: 'Alice', balance: 150 },
    { id: 2, name: 'Bob', balance: 200 }
  ];
  
  // 2. 业务逻辑方法
  $scope.addCredit = function(user, amount) {
    user.balance += amount;
    // 实际开发中可调用阿里云API进行充值操作
  };
  
  // 3. 数据监控
  $scope.$watch('users', (newVal) => {
    console.log('用户数据更新：', newVal);
  }, true);
}]);

视图绑定示例 (HTML)

<div ng-controller="UserController">
  <h3>用户账户管理</h3>
  <table>
    <tr ng-repeat="user in users">
      <td>{{user.name}}</td>
      <td>余额: ${{user.balance}}</td>
      <td>
        <button ng-click="addCredit(user, 50)">充值50美元</button>
      </td>
    </tr>
  </table>
</div>