以下是一个简单的 AngularJS 控制器的示例:
// 定义一个 AngularJS 模块
var app = angular.module('myApp', []);
// 在模块中创建一个控制器
app.controller('myController', function($scope) {
// 在控制器中定义数据和行为
$scope.message = 'Hello, AngularJS!';
$scope.changeMessage = function() {
$scope.message = 'Welcome to the world of AngularJS!';
};
});
在这个示例中,我们首先创建了一个 AngularJS 模块 myApp,然后在模块中创建了一个控制器 myController。控制器通过使用 $scope 对象来与视图进行通信,$scope 是 AngularJS 中的作用域对象。
在控制器中,我们定义了一个变量 $scope.message,并赋予其初始值。同时,我们还定义了一个函数 $scope.changeMessage,该函数可以在视图中调用,用于修改 $scope.message 的值。
在 HTML 中,我们使用指令将控制器与视图关联起来:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myController">
<!-- 使用控制器中的数据和行为 -->
<h1>{{ message }}</h1>
<button ng-click="changeMessage()">Change Message</button>
</body>
</html>
在这个例子中,ng-app="myApp" 指明了 AngularJS 应用程序的根元素,而 ng-controller="myController" 则指定了应用程序中使用的控制器。在视图中,我们使用双花括号 {{ message }} 来显示控制器中定义的数据,同时使用 ng-click 指令来调用控制器中的函数。
需要注意的是,AngularJS 推崇使用控制器别名语法 controllerAs,以便更好地支持组件化开发。在现代的 Angular(Angular 2+)中,使用组件替代了控制器的概念。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4858/Angular