AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是一般的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序由控制器控制。

ng-controller 指令定义应用程序控制器。

控制器是由一个标准 JavaScript 对象构造函数 创建的 JavaScript 对象。

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
姓氏: <input type="text" ng-model="firstName"><br>
名字: <input type="text" ng-model="lastName"><br>
<br>
全名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>

运行一下

程序解释:

AngularJS 应用程序由 ng-app="myApp" 定义。应用程序在 <div> 中运行。

ng-controller="myCtrl" 属性是 AngularJS 指令。它定义了一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 将使用 $scope 对象调用控制器。

在AngularJS中，$scope 是应用程序对象（应用程序变量和函数的所有者）。控制器在作用域中创建两个属性（变量）（firstName 和 LastName）。

ng-model 指令将输入字段绑定到控制器属性（firstName 和 lastName）。

控制器方法

上面的示例演示了一个具有两个属性的控制器对象：lastName 和 firstName。

控制器也可以有方法（变量作为函数）:

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
姓氏: <input type="text" ng-model="firstName"><br>
名字: <input type="text" ng-model="lastName"><br>
<br>
全名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>
</body>
</html>

运行一下

外部文件中的控制器

在大型应用程序中，通常将控制器存储在外部文件中。

只需将 <script> 标记之间的代码复制到名为 personController.js 的外部文件中:

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
姓氏: <input type="text" ng-model="firstName"><br>
名字: <input type="text" ng-model="lastName"><br>
<br>
全名: {{fullName()}}
</div>
<script src="personController.js"></script>
</body>
</html>

运行一下

另外一个实例

在下一个示例中，我们将创建一个新的控制器文件:

 angular.module('myApp', []).controller('namesCtrl',  function($scope) {
 $scope.names = [
  {name:'Jani',country:'Norway'},
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}
  ];
});

将文件另存为 namesController.js:

然后在应用程序中使用控制器文件:

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>

运行一下

AngularJS 控制器

AngularJS 控制器

AngularJS 实例

控制器方法

AngularJS 实例

外部文件中的控制器

AngularJS 实例

另外一个实例

AngularJS 实例

分类导航