AngularJS控制器

第一、AngularJS控制器

AngularJS控制器AngularJS控制应用程序的数据.是常规的js对象。
ng-controller指令定义了应用程序控制器。
控制器是Javascript对象，由标准的Javascript对象的构造函数创建。
实例：

<div ng-app="myApp" ng-controller="myCtrl">
名：<input type="text" ng-model="firstName"><br/>
姓：<input type="text" ng-model="lastName"><br/>
姓名：{{fisrtName+""+lastName}}
</div>
<script>
  var app=angular.module('myApp',[]);
   app.controller('myCtrl',function($scope)
   {
      $scope.firstName="tom";
      $scope.lastName="steph";
   });
</script>

过程解析：由ng-app定义应用程序在内运行-->有ng-controller指令定义一个控制器 myCtrl是一个js函数-->通过$scope调用控制器在AngularJs中$scope是一个应用象（属于应用变量和函数）

第二、控制器方法
控制器的$scope(相当于作用域。控制范围) 用来保存AngularJS Model(模型)的对象。上面的例子中控制器在作用域中创建了两个属性即firstName和lastName; ng-model指令绑定输入域到控制器的属性（firstName和lastName）控制器除了有上面的属性对象外还有自己的方法即变量和函数：

<div ng-app="myApp" ng-controller="personCtrl">
名：<input type="text" ng-model="firstName"><br/>
姓：<input type="text" ng-model="lastName"><br/>
姓名：{{ fullName() }}
</div>
<script>
  var app=angular.module('myApp',[]);
  app.controller('personCtrl',function($scope)
 {
     $scope.firstName="tom";
     $scope.lastName="steph";
     $scope.fullName=function()
     {
       return firstName+‘’+ lastName;
      }
});
</script>

第三、外部文件中的控制器

外部文件中的控制器即把js文件的内容放在一个js文件里面。然后引用即可。示例如下：

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

personCtroller.js文件内容如下：

anguler.module('myApp',[]).controller('personCtrl',function($scope)
{
   $scope.firstName="tom";
   $scope.lastName="steph";
  $scope.fullName=function()
   {
      return $scope.firstName+''+$scope.lastName;
   }

})

通过创建新的控制器文件被应用到实例中：
新的控制器namesController.js文件内容如下：

angular.module('myApp',[]).controller('namesCtrl',function($scope) {
$scope.names=[ 
       {name:'tom',age:23},
       {name:'jeeny',age=22},
       {name:'mary',age=19} ];
 });

使用上面的文件：

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>
       <li ng-repeat='x in names'>
         {{  x.name+','+x.age  }}
      </li>
   </ul>
</div>
<script src="namesController.js"><script>

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。