AngularJS控制器在AngularJS应用程序中起着重要作用。所有AngularJS应用程序主要依靠控制器来控制该应用程序中的数据流。基本上, 它控制AngularJS应用程序的数据, 而控制器则是Javascript对象, 由标准JavaScript创建对象构造函数.
ng-controller指令定义应用程序控制器。在AngularJS中, 控制器是由Javascript构造函数定义的, 并用于AngularJS范围以及该函数$ scope)是在定义控制器时定义的, 它返回的是$ scope.firstname和$ scope.lastname.
语法如下：
<element ng-controller="expression">Contents...</element>例子：本示例使用ng-controller指令显示用户的First和Second输入的串联。
<!DOCTYPE html>
<html>
<head>
<title>ng-controler 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" >lsbin</h1>
<h2>ng-controler 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-controler 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" >lsbin</h1>
<h2>ng-controler 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>输出如下：
在写名字之前：
写下名字后：
外部文件中的控制器
在较大的应用程序中, 通常将控制器存储在一个外部文件中, 你只需要复制该文件nime并将其粘贴到<script>标记中即可。这里的外部文件名是" lsbin.js"
例子：
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<script src= "lsbin.js" ></script>
</head>
<body>
<center>
<h1 style= "color:green" >lsbin</h1>
<h2>ng-controler 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>输出如下：
