AngularJS-控制器篇(controller)

  今天公司突然停电了，临时回家，哈哈 莫名很兴奋。

                              

                                

回家里已经把工作做完，今晚上一起看个电影啊  度过愉快的周末~

说说今天的用的控制器  再出去耍 哈哈哈

控制器

什么是控制器？

控制器是AngularJS的核心之一，它的作用主要是对视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。

用一段代码看一下

var app = angular.module(“myApp”, []);  
  app.controller(“myCtrl”, function($scope) {  
     // 控制器函数操作部分  
     // 控制器主要进行数据的初始化操作和事件函数  
  的定义  
});  

控制器怎么用？

          首先声明模块
          模块下挂载控制器→控制器的作用范围仅限于当前模块→局部控制器
          Angular1.2版本以前，控制器的定义，是直接通过全局函数来实现的。

         控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
          全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
          废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

        

//控制器：全局控制器  
    function ctrl($scope){  
    $scope.name="tom"//挂载数据  
}  

这里用到了挂载，抽空会单独给大家讲解这个~

控制器的作用

    1、通过$scope进行数据状态的初始化操作
     2、通过$scope进行事件处理函数的挂载操作

控制器的使用注意事项

   不要用控制器做下面的事情：
        1、ＤＯＭ操作：使用AngularJs中的数据双向绑定和自定义指令执行操作
        2、表单处理：使用Angular中的form controls进行操作
        3、 数据格式化展示：使用Angular中的过滤器Filter来进行操作
        4、不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理

全局控制器和局部控制器

     AngularJS1.2版本之前，AngularJS中定义控制器，是直接定义成window全局函数进行处理的。

    这样的控制器可以被所有的模块共用，称为全局控制器；

    这样的处理模式的优点是编写方便，处理流程清晰；

    缺点是容易造成变量和函数的全局污染。

   所以AngularJS在1.2版本之后，进行了优化调整，废弃了全局控制器，

   而是将控制器注册在模块中，成为模块中的局部控制器存在，局部控制器也就相当于限定了控制器的作用域范围。

 

控制器的作用域

模块中，可以给模块挂在一个或者多个控制器，挂载好的控制器在当前的模块范围内，可以通过ng-controller指令  来指定控制的作用域。

 app.controller("myCtrl",function($scope){
        $scope.name=summer";
    });

多个控制器

    相信大家也对控制器有所了解了，
    根据上面我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容。
    因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发， 
    这样通过划分模块的开发方式，对今后维护代码带来了便利。
    我们可以写一个控制器：如

   
      
      
           
           
           
      
      
            
{{name}}
            
  
                    {{name}}  
            
  
       
      
     

js中这么写  

app.controller('myCtrl', function ($scope) {  
        $scope.name = "summer";  
    });  

    app.controller('myCtrl2', function ($scope) {  
        $scope.name="zeoy";  
    });  

 
    这样页面就能完美的显示出两个不同的名字了
    这样不同的controller他们scope对象是不一样的, 
    即使都是用了name这个变量，可以看出controller之间是封闭的， 
    可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信， 
    

 

 相信大家也对控制器有所了解了，中间有涉及到$scope挂载方面的知识，下次再分享啦~

 好了，最后预祝大家周末愉快~

  相信大家也对控制器有所了解了，