AngularJS入门（二）

AngularJS控制器

1.  AngularJS控制器由ng-controller指令定义并控制AngularJS应用程序的数据。控制器本身是普通的js对象，由标准js构造函数创建，控制器的$scope是控制器所指向的应用程序/html元素，如下所示：

<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{person.firstName + " " + person.lastName}}</div><script>function personController($scope) {    $scope.person = {        firstName: "John",        lastName: "Doe"    };}</script>

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

ng-controller 指令把控制器命名为 object。

函数 personController 是一个标准的 JavaScript 对象的构造函数。

控制器对象有一个属性：$scope.person。

person 对象有两个属性：firstName 和 lastName。

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

<script>function personController($scope) {    $scope.person = {        firstName: "John",        lastName: "Doe",        fullName: function() {            var x;            x = $scope.person;            return x.firstName + " " + x.lastName;        }    };}</script>

这样控制器拥有方法fullName()，则可以在$scope中调用：{{person.fullName()}}
2.  构建大型应用程序，控制器通常存储在外部文件中。只需要把<script>标签中的的代码复制到名为<ng-controller指令名称>.js的外部文件中即可，如：

<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{person.firstName + " " + person.lastName}}</div><script src="personController.js"></script>

声明：此文章内容均来自http://www.w3cschool.cc/angularjs