AngularJS | ng-controller指令

在AngularJS中，指令（Directives）是一组用于扩展HTML语法的标记。其中ng-controller是一个非常重要的指令，它使用了MVVM（Model-View-ViewModel）架构模式，用于管理应用程序的数据模型和视图展现，实现了逻辑与视图的分离，是AngularJS应用程序中至关重要的组成部分。

使用方法

使用ng-controller指令很简单，只需要在HTML标记中加入如下代码即可：

<div ng-controller="MyController">
  ...
</div>

其中'MyController'是一个控制器（Controller）的名称。控制器是一个JavaScript函数，用于管理应用程序的数据及处理业务逻辑，通常情况下会定义在单独的JS文件中。

控制器定义

控制器定义示例：

var app = angular.module('myApp', []);

app.controller('MyController', ['$scope', function($scope) {
  $scope.message = 'Hello, AngularJS!';
}]);

其中，使用angular.module定义了一个新的AngularJS模块，模块名称为'myApp'。使用app.controller定义了一个新的控制器，控制器名称为'MyController'，并注入了一个名为'$scope'的服务。在控制器中，通过$scope.message将数据模型和视图绑定在一起。

控制器内部方法

除了管理数据模型，控制器还可以定义一些用于处理业务逻辑的方法。例如：

app.controller('MyController', ['$scope', function($scope) {
  $scope.username = '';
  $scope.greet = function() {
    alert('Hello, ' + $scope.username + '!');
  };
}]);

其中，除了定义了数据模型'$scope.username'外，还定义了一个名为'greet'的方法，用于弹出当前用户的名字。

在HTML代码中，可以使用ng-click指令来绑定这个方法：

<div ng-controller="MyController">
  <input type="text" ng-model="username" />
  <button ng-click="greet()">Greet</button>
</div>

总结

ng-controller指令是AngularJS应用程序中最为重要的指令之一，它的作用是管理数据模型和视图展现，实现逻辑与视图的分离。开发者可以通过定义控制器来定义数据模型和业务逻辑，并将其与HTML视图绑定在一起，从而实现一个完整的AngularJS应用程序。