AngularJS控制器
时间：2020-02-23 14:29:33 来源:igfitidea点击:
控制数据流非常重要。
尤其是当我们谈论Web应用程序时。
什么是ANGULARJS控制器？
AngularJS应用程序的数据由AngularJS控制器控制。
这些控制器不过是JavaScript对象。
控制器从视图中获取数据并进行处理。
然后将数据发送到视图，该视图又显示给用户。
应用程序控制器由ng-controller定义。
例子：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="firstApp" ng-controller="firstCtrl">
Initials: <input type="text" ng-model="Initials"><br>
Middle Name: <input type="text" ng-model="middlename"><br>
<br>
Full Name: {{Initials + " " + middlename}}
</div>
<script>
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function($scope) {
$scope.Initials = "E";
$scope.middlename = "Ari";
});
</script>
</body>
</html>
上面给出的应用程序由ng-app =" firstApp"定义。
我们还定义了一个AngularJS属性，例如：ng-controller =" firstCtlr"。
这定义了控制器。
firstCtrl函数是JavaScript函数。
AngularJS使用$scope对象调用控制器。
控制器在此范围内创建两个变量，例如：初始值和中间名。
ng-model指令将输入字段绑定到控制器属性或者变量。
控制器方法
控制器可以具有以下示例中所示的方法：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="firstApp" ng-controller="peopleCtrl">
Initials: <input type="text" ng-model="Initials"><br>
Middle Name: <input type="text" ng-model="middleName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('firstApp', []);
app.controller('peopleCtrl', function($scope) {
$scope.Initials = "E";
$scope.middleName = "Ari";
$scope.fullName = function() {
return $scope.Initials + " " + $scope.middleName;
};
});
</script>
</body>
</html>
外部文件中的控制器
我们可以将控制器存储在外部文件中，以用于更大的应用程序。
为了实现这一点，我们使用以下代码创建一个application.js文件：
angular.module('app',[]).controller('firstCtrl',function($scope)
{
$scope.message = "Ahoy!"
});
名为app的模块将控制器与控制器函数一起保存。
该控制器名为firstCtrl，用于显示" Ahoy！"。
信息。
代码中定义的范围对象用于将信息从控制器传递到视图。
在下一步中，我们使用div类包含ng-controller指令创建一个html文件。
必须注意，必须在代码中引用application.js文件。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="UTF 8">
<title>Hello</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> EXAMPLE CONTROLLER</h1>
<div class="container">
<div ng-controller="firstCtrl">{{message}}</div>
</div>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="application.js"></script>
</body>
</html>
控制器的主要职责是创建作用域对象，然后将其传递给视图。
