AngularJS 控制器
AngularJS控制器在AngularJS应用程序中起着重要的作用，所有的AngulaJS应用程序主要依靠控制器来控制应用程序中的数据流。它控制AngularJS应用程序的数据，控制器是JavaScript对象，由标准JavaScript对象构造函数创建。
ng-controller 指令定义应用程序控制器。在 AngularJS 中，控制器由JavaScript构造函数定义，并在控制器定义时使用该函数（AngularJS作用域和函数$scope），它返回$scope.firstname和$scope.lastname的连接值。
语法：
<element ng-controller="expression">内容...</element>示例：使用 ng-controller 指令来显示用户的第一个和第二个输入的连接值。
- Javascript
<!DOCTYPE html> <html> <head> <title>ng-controller Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "Geeks"; $scope.lastName = "Geeks"; }); </script> </head> <center> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-controller Directive</h2> <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"> <br> Last Name: <input type="text" ng-model="lastName"> <br> <br> Full Name: {{firstName + "for" + lastName}} </div> </body> </center> </html>
输出：
控制器方法
第一个例子演示了一个控制器对象，它有两个属性：fname和lname。在AngularJS中，当控制器定义时，函数（$scope）被定义，它返回$scope.firstname和$scope.LastName的连接。这里控制器也可以有方法（变量作为函数）：
例子：
<!DOCTYPE html>
<html>
<head>
<title>ng-controller Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
var app = angular.module('geeks', []);
app.controller('personCtrl', function($scope) {
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</head>
<center>
<body style="padding: 30px">
<div ng-app="geeks" ng-controller="personCtrl">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-controller Directive</h2> First Name:
<input type="text" ng-model="firstName">
<br><br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{fullName()}}
</div>
</body>
</center>
</html> 输出：
外部文件中的控制器
在较大的应用程序中，通常将控制器存储在外部文件中，您只需复制该文件名并将其粘贴到 <script> 标签。这里的外部文件名是“geeksforgeeks.js”
例子：
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="geeksforgeeks.js"></script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-controller Directive</h2>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName">
<br>
Last Name: <input type="text" ng-model="lastName">
<br><br>
Full Name: {{fullName()}}
</div>
</center>
</body>
</html>输出：
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
