AngularJS控制器

注意:文章代码参照书籍: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>
原文地址:https://www.cnblogs.com/hellome/p/4008420.html