您的位置：首页 > Web前端 > AngularJS

angularJS学习之路（三）---控制器

2015-11-22 19:43 591 查看

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

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

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

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

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
</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 type="text/javascript" src="../js/angular.min.js" ></script>
<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>

AngularJS 应用程序（模块）由 ng-app 定义。应用程序在 <div> 内运行（作用域）。

ng-controller="myCtrl" 用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

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

在 AngularJS 中， $scope 代表：应用变量和函数。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

上面的例子中：

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

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

PS：控制器只负责从数据模型向视图模型传递信息（数据）和设置事件监听器

不做DOM操作和数据操作以及对象状态操作

控制器其实可以理解为一个类结构，有变量有方法只是用来存储数据只是一个媒介桥梁不要有其他的操作

将业务逻辑放在自定义指令和服务中

对变量还可以用类的形式进行定义比如：

app.controller('myController',function($scope){

$scope.person = {

name : 'abc dd'

};

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航