Angular1.x关于module,controller,做用域的概念

Angular中控制器是一个函数，是用来加强视图的，用来向视图的做用域添加功能。默认的控制器函数，是定义在全局做用域中的。如

function myController($scope){

   $scope.message ='hi guys!'

}

建立一个控制器时，angular会生成一个新的$scope（局部做用域）,控制器的做用域是能够嵌套的，如父控制器和子控制器。

$scope能够

• 提供观察者以监测数据模型的变化

• 能够把数据模型的变化通知给应用

• 能够嵌套

• 给表达式提供运行时环境

$rootscope是和根ng-app绑定的。

为了不污染全局，就要用到模块，修改成以下

angular.module('myapp',[])

.controller('myController',function($scope){

 $scope.message ='hi guys!'

})

和以上几个概念都有关的还有一个概念指令directives,能够理解为自定义html元素，和属性。

指令在建立时，angular也会为她建立一个做用域。这个做用域分为外部做用域和独立做用域。

来看下最简单的指令

<my-directive></my-directive>

    angular.module('myapp',[])

    .directive('my-directive',function(){

        return {

             restrict:'E',

             template:'<a href="http://baidu.com">Click me to baidu</a>'    

            }

    })

给指令传递数据，能够直接使用外部controller的做用域的属性。存在的问题是一旦控制器被移除或修改，咱们的指令就要修改。

能够以下形式，经过建立独立做用域，使用绑定策略来传递数据给指令

<my-directive></my-directive>

     angular.module('myapp',[])

         .directive('my-directive',function(){

         return {

         scope:{}/*建立独立做用域*/

         restrict:'E',

         template:'<a href="http://baidu.com">Click me to baidu</a>'

        }

    })

实例以下

<div my-directive my-url="http://baidu.com" my-link-text="Click me to baidu">

     angular.module('myapp',[])

     .directive('my-directive',function(){

       return{

            restrict:'A',

            repalce:true,

            scope:{

                   myUrl:@,

                    myLinkText:@

                  },

             template:'<a href='{{myUrl}}'>'+'{{myLinkText}}</a>'

            };

      });

独立做用域绑定策略有3种：@，＝，&。

&绑定，对于带参数的调用，须要传递一个对象，对象的key是参数名称，值是参数内容。

如<div show="show(email)">,在指令中调用show({email:data})

最后就controller与scope的概念再举例说命一下，必定要知道controller就是函数，$scope是局部做用域。

var module=angular.module('myApp',[])

     // module.controller('mainController',function() {

    // // body...//

         this.name ="Ari";

        // this.hello = function(){

        // alert('hi');

        // }

    // });

module.controller('mainController',mainController);

function mainController(){ 

    this.name ="Ari";

     this.hello = function(){ 

                    alert('hi'); 

                }

}

module.controller('controller2',controller2);

function controller2($scope){ 

    $scope.sex ="女";

}

借用controler as能够在代码中去除对$scope的依赖，让你写出耦合性小的纯JS函数。

** 能够规定对于controller as的写法以下：连接

angular.module("app",[])

 .controller("demoController",[function(){

     var vm = this;

     vm.title = "angualr";

    return vm; 

}])

其优点为：

1. 定义vm这样会让咱们更好的避免JavaScript的this的坑。

2. 若是某个版本的angular再也不支持controller as,能够轻易的注入$scope,修改成 var vm = $scope;

3. 由于再也不注入$scope了，controller更加的POJO，就是一个很普通的JavaScript对象。

4. 也由于没有了$scope，而controller实例将会成为scope上的一个属性，因此在controller中咱们不再能使用$watch,$emit,$on之类的特殊方法，由于这些东西每每不应出如今controller中的，给你们一个警告，更好的控制。可是一旦若是没办法必须用的话，能够在征得项目组一致赞成，将此controller退回$scope.

5. 由于controller实例将会只是$scope的一个属性，因此view模板上的全部字段都会在一个引用的属性上，这能够避开JavaScript原型链继承对于值类型的坑。参加https://github.com/angular/an...

6. controller as 对于 coffescript,liveScript更友好。

7. 模板上定义的每一个字段方法都会在scope寄存在controller as别名上的引用上，因此在controller继承中，不会在出现命名冲突的问题。