AngularJS 控制器

控制器（Controller） 是 AngularJS 中用于处理数据和逻辑的核心部分。它是一个 JavaScript 函数，用来将业务逻辑与视图层进行分离。控制器的主要作用是为视图提供数据，并处理视图与模型之间的交互。控制器通常与作用域（$scope）一起使用，通过在控制器中定义数据和函数，视图层能够访问这些数据并在界面中动态呈现。

控制器的基本概念

控制器的定义：控制器是一个 AngularJS 模块中注册的 JavaScript 函数。控制器通过 ng-controller 指令与 HTML 视图关联。
$scope 作用域：控制器和视图之间通过 $scope 对象建立联系。控制器将数据和函数添加到 $scope 上，这些数据和函数可以在视图中使用。
控制器实例化：每次 AngularJS 创建视图时，它都会实例化控制器，并通过 $scope 将数据传递到视图中。

控制器的创建与使用

创建控制器

模块和控制器：控制器通常在 AngularJS 模块内注册，并通过 $scope 对象向视图传递数据。

示例：定义一个简单的控制器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 控制器示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ greeting }}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            $scope.greeting = "Hello, AngularJS!";
        });
    </script>
</body>
</html>

在这个例子中：

使用 ng-controller="myController" 在 HTML 中绑定控制器。
在控制器中，通过 $scope.greeting 向视图传递数据。视图中通过 {{ greeting }} 来显示控制器传递的内容。

控制器的构造函数

控制器定义时，通常是一个普通的 JavaScript 函数。该函数的参数包括 $scope 对象和其他依赖项（例如 $http、$routeParams 等）。

示例：控制器带有参数

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 控制器参数示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            $scope.message = "AngularJS 控制器示例";
        });
    </script>
</body>
</html>

`$scope` 和视图的交互

控制器通过 $scope 共享数据和函数。视图可以访问 $scope 上的数据，并使用这些数据进行显示或绑定。视图和控制器之间的交互通常是双向数据绑定的。

控制器与视图的双向绑定

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 双向绑定示例</title>
</head>
<body ng-controller="myController">
    <input type="text" ng-model="name" placeholder="输入你的名字">
    <p>你输入的名字是: {{ name }}</p>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        
        app.controller('myController', function($scope) {
            $scope.name = '张三';
        });
    </script>
</body>
</html>

在这个例子中：

ng-model="name" 使得输入框和 name 数据绑定。
双向数据绑定：当用户在输入框中输入内容时，name 的值会更新，并反映在视图中。

控制器的依赖注入（Dependency Injection）

AngularJS 通过依赖注入（DI）来管理控制器和服务之间的依赖关系。控制器可以通过注入其他服务（如 $http、$scope 等）来访问这些服务并在控制器中使用它们。

示例：注入 `$http` 服务

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 控制器依赖注入示例</title>
</head>
<body ng-controller="myController">
    <h1>数据从服务器加载:</h1>
    <ul>
        <li ng-repeat="item in items">{{ item.name }}</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope, $http) {
            $http.get('https://jsonplaceholder.typicode.com/users')
                .then(function(response) {
                    $scope.items = response.data;
                });
        });
    </script>
</body>
</html>

在这个例子中：

$http.get 用来发送 HTTP 请求，获取远程数据。
控制器注入了 $http 服务，获取数据并将数据存储在 $scope.items 中，供视图显示。

控制器的作用域和生命周期

作用域：控制器通过 $scope 对象将数据传递到视图，并在视图中响应用户输入。
生命周期：每次视图需要重新渲染时，AngularJS 会重新实例化控制器。控制器的生命周期由 AngularJS 框架管理，并会随着视图的销毁而被销毁。

示例：控制器的生命周期事件

app.controller('myController', function($scope) {
    $scope.$on('$destroy', function() {
        console.log('控制器已销毁');
    });
});

在这个例子中，$destroy 事件触发时，表示控制器已经销毁。

控制器的嵌套与父子关系

AngularJS 支持控制器的嵌套。子控制器可以继承父控制器的作用域，这为创建层次结构清晰的应用程序提供了方便。

示例：嵌套控制器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>嵌套控制器示例</title>
</head>
<body ng-controller="parentController">
    <h1>{{ parentMessage }}</h1>

    <div ng-controller="childController">
        <h2>{{ childMessage }}</h2>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        
        app.controller('parentController', function($scope) {
            $scope.parentMessage = '这是父控制器的消息';
        });

        app.controller('childController', function($scope) {
            $scope.childMessage = '这是子控制器的消息';
        });
    </script>
</body>
</html>

在这个例子中：

parentController 和 childController 分别是父控制器和子控制器。
子控制器的作用域可以访问父控制器的数据，但父控制器无法直接访问子控制器的数据。

总结

控制器（Controller） 是 AngularJS 中处理数据和业务逻辑的核心组件，它通过 $scope 将数据与视图绑定。
控制器用于向视图传递数据、处理用户输入、进行逻辑处理等。
控制器可以通过依赖注入获取 AngularJS 服务（如 $http、$routeParams 等）。
AngularJS 支持控制器的嵌套，子控制器可以继承父控制器的数据和方法。
控制器的生命周期由 AngularJS 框架管理，控制器销毁时，可以通过 $destroy 事件进行清理。

控制器在 AngularJS 中是非常重要的，它帮助你组织业务逻辑，确保视图与数据的分离，提升代码的可维护性和可重用性。

AngularJS 控制器