AngularJS控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据，控制器是常规的 JavaScript 对象。

1. angular.module(name, [requires], [configFn]);

name：字符串类型，代表模块的名称；

requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；

configFn：用来对该模块进行一些配置。

<!-- 双向绑定，应用程序名字和控制器名字 -->
<div ng-app="myApp" ng-controller="Ctrl1">
    <!--ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）-->
    <input type="text" ng-model="userName" placeholder="请输入用户名" />
    <input type="text" ng-model="userPsw" placeholder="请输入密码" />
    <p>
        用户信息：{{userName}} {{userPsw}}
    </p>
    <p>
        用户信息：{{userInfo()}}
    </p>
    <ul>
        <!-- 循环输出names对象的属性 -->
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []); //模块加载,创建一个对象
app.controller('Ctrl1', function($scope) { //创建一个控制器
    /*控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。*/
    $scope.userName = "peter";
    $scope.userPsw = "123456";
    $scope.userInfo = function() { //控制器也可以有方法（变量和人函数）
        return this.userName + " " + $scope.userPsw;
        //此时的this是$scope；
    };
     $scope.names = [{ //控制器也可以有json对象
        name: 'peter',
        country: 'china'
    }, {
        name: 'Hege',
        country: 'Sweden'
    }, {
        name: 'jj',
        country: 'beijing'
    }];
});
</script>

注意：控制器可以存储在外部文件中。

结果如下：

 

2.总结

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

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

（3）ng-repeat 循环输出对象或者数组的值

（4）app.controller('modelName', function($scope) { }) ;//创建一个控制器

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