AngularJS控制器示例
时间：2020-02-23 14:29:33 来源:igfitidea点击:
在本教程中，我们将学习控制器。
什么是控制器
我们可以将控制器视为模型视图更改的主驱动程序。
它是Angular JS应用程序的主要部分，它是实际执行UI操作JavaScript函数或者对象。
它控制AngularJS应用程序的数据。
什么是$scope？
范围（scope）是一种物体，它在模型和视图之间粘合。
因此，如果要将数据从模型传递到查看和查看模型，则通过示波器对象来完成。
控制器和范围如何相关？
实际控制器将Scope对象传递为构造函数参数和初始化模型值和函数。
请不要担心，如果它听起来非常令人困惑，一旦我们看到简单的例子，你就可以联系起来。
控制器语法声明：
在创建控制器之前，我们需要声明模块。
我们将在下一个教程中了解模块。
因此，我们使用模块的控制器方法来声明控制器。
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.theitroadMsg = "Hello from theitroad";
});
简单的例子：
复制以下文本，打开记事本，粘贴它并将其保存为AngularJscontrolleExample.html并在浏览器中打开它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
</br>
{{theitroadMsg}} !!!
</div>
</body>
</html>
app.js.
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.theitroadMsg = "Hello from theitroad";
});
如果你不想使用$scope怎么办？
是的，如果我们不想使用$scope变量，我们也可以使用控制器作为选项。
因此，我们需要使用使用控制器的优势作为选项：
- 代码变得更加可读。
- 它删除了处理这个范围和绑定。
- 在视图(.html)和JavaScript中使用的别名没有依赖关系
让我们举个例子：
复制以下文本，打开记事本，粘贴它并将其保存为AngularJscontrolleExample.html并在浏览器中打开它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller as con">
</br>
{{con.theitroadMsg}} !!!
</div>
</body>
</html>
app.js.
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function() {
var cont= this;
cont.theitroadMsg = "Hello from theitroad with controller as option";
});
