← AngularJS 作用域 ( Scope ) AngularJS 过滤器 →

AngularJS 控制器

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

AngularJS 控制器是常规的 JavaScript 对象

AngularJS 控制器

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

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

<div ng-app="myApp" ng-controller="myCtrl">
    <p>名: <input type="text" ng-model="firstName"></p>
    <p>姓: <input type="text" ng-model="lastName"></p>
    <hr/>
    <p>姓名: {{firstName + lastName}}</p>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "李";
    $scope.lastName = "白";
});
</script>

运行范例 »

上面的范例中

AngularJS 应用程序由 ng-app 定义，应用程序在 <div> 内运行

ng-controller="myCtrl" 属性是一个 AngularJS 指令，用于定义一个控制器

myCtrl 函数是一个 JavaScript 函数

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

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)

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

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

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

控制器方法

我们可以看到上面的范例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象

控制器也可以有方法和变量

<div ng-app="myApp" ng-controller="myCtrl">
    <p>名: <input type="text" ng-model="firstName"></p>
    <p>姓: <input type="text" ng-model="lastName"></p>
    <hr/>
    <p>姓名: {{firstName + lastName}}</p>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "李";
    $scope.lastName = "白";
    $scope.fullName = function()
    {
        return $scope.firstName + $scope.lastName;
    }
});
</script>

运行范例 »

外部文件中的控制器

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

只需要把 <script> 标签中的代码复制到名为 person.controller.js 的外部文件中即可

<div ng-app="myApp" ng-controller="personCtrl">
    <p>名: <input type="text" ng-model="firstName"></p>
    <p>姓: <input type="text" ng-model="lastName"></p>
    <hr/>
    <p>姓名: {{firstName + lastName}}</p>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script src="/static/tiy/js/angularjs/person.controller.js"></script>

运行范例 »

其它范例

下面的范例创建一个新的控制器文件

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'永定土楼',province:'福建'},
        {name:'都江堰',province:'四川'},
        {name:'凤凰古城',province:'湖南'}
    ];
});

保存文件为 names.controller.js

然后，在应用中使用控制器文件

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names">{{ x.name + ' 在 ' + x.province }}</li>
    </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
<script src="/static/tiy/js/angularjs/names.controller.js"></script>

运行范例 »

← AngularJS 作用域 ( Scope ) AngularJS 过滤器 →

AngularJS 控制器