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繼承中，不會在出現命名衝突的問題。