AngularJS - 控制器( Controllers)
AngularJS应用程序主要依靠控制器来控制应用程序中的数据流。 使用ng-controller指令定义ng-controller 。 控制器是一个包含属性/属性和函数的JavaScript对象。 每个控制器接受$ scope作为参数，该参数指控制器需要处理的应用程序/模块。
<div ng-app = "" ng-controller = "studentController">
...
</div>
在这里，我们使用ng-controller指令声明一个名为studentController的控制器。 我们将其定义如下 -
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
studentController被定义为一个JavaScript对象，其中$ scope作为参数。
$ scope指的是使用studentController对象的应用程序。
$ scope.student是studentController对象的属性。
firstName和lastName是$ scope.student对象的两个属性。 我们将默认值传递给它们。
属性fullName是$ scope.student对象的函数，它返回组合名称。
在fullName函数中，我们获取student对象，然后返回组合名称。
作为注释，我们还可以在单独的JS文件中定义控制器对象，并在HTML页面中引用该文件。
现在我们可以使用ng-model或使用表达式来使用studentController的学生属性，如下所示 -
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
我们将student.firstName和student.lastname绑定到两个输入框。
我们将student.fullName（）绑定到HTML。
现在，无论何时在名字和姓氏输入框中输入任何内容，您都可以看到全名自动更新。
例子 (Example)
以下示例显示了控制器的使用 -
testAngularJS.htm
<html>
<head>
<title>Angular JS Controller</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
<br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
输出 (Output)
在Web浏览器中打开文件testAngularJS.htm并查看结果。
新页面打开