AngularJS 中 Controller 的使用方法及生命周期-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是一款非常流行的前端框架，它提供了一种 MVC（Model-View-Controller）的架构模式，使得前端开发更加简单和高效。在 AngularJS 中，Controller 是一个非常重要的概念，它负责控制视图和数据之间的交互。本文将介绍 AngularJS 中 Controller 的使用方法及其生命周期。

Controller 的基本用法

在 AngularJS 中，我们可以通过 ng-controller 指令来声明一个 Controller。例如：

<div ng-controller="myController">
  <!-- 这里是视图 -->
</div>

上面的代码中，我们声明了一个名为 myController 的 Controller，并将它绑定在一个 DOM 元素上。这样，该元素及其子元素就可以直接访问该 Controller 中的属性和方法。

在 Controller 中，我们可以定义一些属性和方法，例如：

app.controller('myController', function($scope) {
  $scope.message = 'Hello, AngularJS!';
  
  $scope.showMessage = function() {
    alert($scope.message);
  };
});

上面的代码中，我们定义了一个名为 myController 的 Controller，并在其中定义了一个 $scope.message 属性和一个 $scope.showMessage() 方法。在视图中，我们可以直接访问这些属性和方法，例如：

<div ng-controller="myController">
  <p>{{ message }}</p>
  <button ng-click="showMessage()">Show Message</button>
</div>

上面的代码中，我们在视图中使用了 {{ message }} 插值表达式来显示 $scope.message 属性的值，并通过 ng-click 指令来触发 $scope.showMessage() 方法。

Controller 的生命周期

在 AngularJS 中，Controller 有着自己的生命周期。当一个 Controller 被创建时，AngularJS 会依次调用以下方法：

constructor($scope, $element, $attrs, $transclude)：Controller 的构造函数，用于初始化一些属性和方法。
$onInit()：当 Controller 被初始化后，AngularJS 会自动调用该方法。
$onChanges(changesObj)：当绑定到 Controller 的属性发生变化时，AngularJS 会自动调用该方法。
$doCheck()：每次 AngularJS 执行脏检查时，都会调用该方法。
$onDestroy()：当 Controller 被销毁时，AngularJS 会自动调用该方法。

下面是一个完整的示例代码：

app.controller('myController', function($scope) {
  // 构造函数
  this.$onInit = function() {
    console.log('Controller initialized.');
  };
  
  // 属性发生变化时的回调函数
  this.$onChanges = function(changesObj) {
    console.log('Property changed:', changesObj);
  };
  
  // 脏检查时的回调函数
  this.$doCheck = function() {
    console.log('Dirty checking...');
  };
  
  // Controller 被销毁时的回调函数
  this.$onDestroy = function() {
    console.log('Controller destroyed.');
  };
  
  // 初始化属性和方法
  $scope.message = 'Hello, AngularJS!';
  
  $scope.showMessage = function() {
    alert($scope.message);
  };
});

总结

本文介绍了 AngularJS 中 Controller 的基本用法和生命周期，希望能够帮助读者更好地理解和使用 AngularJS。在实际开发中，合理地使用 Controller 可以提高代码的可读性和可维护性，同时也能够提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658b7e6feb4cecbf2d0bf566