一、AngularJS控制器核心作用

作為AngularJS應(yīng)用的"大腦"，控制器(Controller)承擔(dān)著關(guān)鍵職責(zé)：

• 數(shù)據(jù)初始化 - 定義$scope對象的初始狀態(tài)
• 業(yè)務(wù)邏輯處理 - 響應(yīng)用戶交互和數(shù)據(jù)處理
• 視圖綁定橋梁 - 建立視圖與模型的數(shù)據(jù)通道
• 生命周期管理 - 通過$scope.$watch監(jiān)控數(shù)據(jù)變化

控制器遵循MVVM模式，有效解耦視圖與業(yè)務(wù)邏輯，提升代碼可維護性。

二、控制器示例代碼解析

基礎(chǔ)用戶管理控制器

angular.module('myApp', [])
.controller('UserController', ['$scope', function($scope) {
  // 1. 初始化數(shù)據(jù)模型
  $scope.users = [
    { id: 1, name: 'Alice', balance: 150 },
    { id: 2, name: 'Bob', balance: 200 }
  ];
  
  // 2. 業(yè)務(wù)邏輯方法
  $scope.addCredit = function(user, amount) {
    user.balance += amount;
    // 實際開發(fā)中可調(diào)用阿里云API進行充值操作
  };
  
  // 3. 數(shù)據(jù)監(jiān)控
  $scope.$watch('users', (newVal) => {
    console.log('用戶數(shù)據(jù)更新：', 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>