AngularJS 控制器

2021年09月15日 阅读数:1
这篇文章主要向大家介绍AngularJS 控制器,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
AngularJS 控制器
  • AngularJS 控制器 控制 AngularJS 应用程序的数据。
  • AngularJS 控制器是常规的 JavaScript 对象。由标准的JavaScript对象的构造函数建立。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/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定义。应用程序在
    内运行。
  • ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
  • myCtrl 函数是一个 JavaScript 函数。
  • AngularJS 使用$scope 对象来调用控制器。
  • 在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
  • 控制器的 $scope (至关于做用域、控制范围)用来保存AngularJS Model(模型)的对象。
  • 控制器在做用域中建立了两个属性 (firstName 和 lastName)。 ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。 控制器也能够有方法(变量和函数):html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<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>

外部文件中的控制器

在大型的应用程序中,一般是把控制器存储在外部文件中。app

只须要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中便可:ide

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</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'}
    ];
});

保存文件为nameController.js,而后在应用中使用控制器文件函数

<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>
上一篇: cakephp控制器
下一篇: c语言字符串_续