AngularJS控制器

浏览数：29 / 时间：2015年06月09日

注意：文章代码参照书籍：AngularJS权威教程

控制器在AngularJs中的作用是增强视图，控制器其实就是一个函数.

每当我们创建一个控制器的时候，AngularJs都会创建一个新的作用域$scope

并传递给这个控制器，可以再控制器中初始化$scope。

创建控制器：为了不污染全局空间，我们在模块里面创建控制器

创建模块：var app=angular.module(‘app‘,[]);

创建控制器：app.controller(‘firstController‘,function($scope){

　　　　$scope.message=‘hello world‘;
});

注：firstController是控制器的名字

在控制器中进行DOM的操作和数据的操作不是一个号的现象，我们应该设计良好的应用会将复杂的逻辑放到指令和服务中。

通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式：

angular.module(‘myApp‘, []).controller(‘MyController‘, function($scope,UserSrv) {
　　//内容可以被指令控制
　　$scope.onLogin = function(user) {
　　　　UserSrv.runLogin(user);
　　};
});

下面是一个控制器的简单例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>控制器应用</title>
 5 </head>
 6 <body>
 7     <div ng-app=‘app‘ ng-controller=‘myController‘>
 8         <a class="btn" ng-click=‘add(1)‘ href=‘#‘>add</a>
 9         <h1>{{count}}</h1>
10     </div>
11 
12 
13     <script src=‘./angular.min.js‘ ></script>
14     <script type="text/javascript">
15         var app=angular.module(‘app‘,[]);
16         app.controller(‘myController‘,function($scope){
17 
18             $scope.    count=0;
19 
20             //add方法 ： 实现数字递增的功能
21             $scope.add=function(num){
22 
23                 $scope.count+=num;
24 
25             }    
26 
27         });
28     </script>
29 </body>
30 </html>