angularJs(三)--angularJs的子產品化和工具方法

angularJs的子產品化

1.子產品化的好處是：

(1)減少變量之間的污染

(2)可以實作子產品之間的互相依賴

2.angularJs的子產品化的實作：

(1)

angular.module("app",[])

，該方法接收兩個參數：

　　第一個參數是子產品化的名字；

　　第二個參數是數組類型，存放要依賴的子產品。如果需要依賴任何模塊，直接寫一個空數組就行。

(2) 在此之後需為頁面中的”ng-app”指定初始化子產品;

(3) app.controller(“Bbb”,Bbb),該方法接收兩個參數：

第一個是函數名稱，第二個是函數

<pre>
         <!DOCTYPE html>
         <!--ng-app需要指定初始子產品是哪個-->
         <html  ng-app="app">
         <head>
             <meta charset="UTF-8">
             <title>Title</title>
             <script src="js/angular.min.js"></script>
             <script type="text/javascript">

                 var app=angular.module("app",[]);
                 //一個頁面中可能會有多個子產品，都可以作為初始子產品
                // angular.module("app2",[]);
               //為指定子產品設定一控制器，設定兩個參數：第一個是函數名稱，第二個是函數
                 app.controller("Aaa",function($scope){
                     $scope.name="hello";
                 });

                 app.controller("Bbb",Bbb);
                 function Bbb($scope){
                     $scope.name="hi";
                 }
             </script>
         </head>
         <body>
             <div ng-controller="Aaa">
                 <p>{{name}}</p>
             </div>
             <div ng-controller="Bbb">
                 <p>{{name}}</p>
             </div>
         </body>
         </html>
     </pre>

注意：在`app.controller(“Aaa”,function( scope)‘中，函數的形參作為依賴注入，必須得寫成這樣” scope”.作為開發版本這樣寫沒問題，但是作為線上版本不行。因為上線前會對JS代碼進行壓縮處理，壓縮工具可能會把“$scope”壓縮成一個非常簡短的名字，那麼這個局部作用域就找不到了。為了解決這個問題，AngularJS子產品提供一種數組的書寫方式：

//這裡寫的字元串形式的"$scope"，對應函數的第一個形參
    app.controller("Aaa",["$scope",function($scope){
        $scope.name="hello";
    }]);

通過上述形式得到了一種對應關系，壓縮工具将函數的形參壓縮就沒有影響，如下面代碼所示：

//運作結果與開發版本的一緻
   app.controller("Aaa",["$scope",function($s){
       $s.name="hello";
   }]);

是以，建議在寫Angular子產品化時，采用這種數組形式的寫法，避免壓縮後代碼運作有問題。

AngularJs的工具方法

其實上文中的angular.module方法也是一種AnularJs的工具方法

(1)angular.bind

angular.bind方法與JQuery中的$.proxy()方法非常類似：修改this的指向。

與JS中的bind方法也很類似。

<pre>
    <script type="text/javascript">
        function show(n1,n2){
            console.log(n1,n2);
            alert(this);
        }
        //這三種寫法的運作效果差不多
        /*angular.bind(document,show)(3,4);*/
       /* angular.bind(document,show,3,4)();*/
        angular.bind(document,show,3)(4);
    </script>
</pre>

(2)angular.copy

用來拷貝對象

<pre>
    var a={
        name:"hello"
    };
    var b={
        age:20
    }
    var c=angular.copy(a,b);//a把所有值覆寫給了b
    console.log(b);//列印{ name:"hello" }
    console.log(c);//列印{ name:"hello" }
</pre>

(3)angular.extend

對象繼承

var a={
        name:"hello"
    };
    var b={
        age:20
    }
     var c2=angular.extend(b,a);//b繼承a的值
     console.log(b);//列印出{  age:20,name:"hello" },c的值和b的值是一緻的

(4)angular的判斷元素類型的工具方法

angular.isArray(arr);//判斷是否為數組，如果是的話，該方法傳回true
angular.isDate(arr);//判斷是否為時間對象，如果是的話，該方法傳回true
angular.isDefined(arr);//判斷一個元素是否存在，如果元素不是undefined，該方法傳回true
angular.isUndefined(arr);
angular.isFunction(arr);
angular.isNumber(arr);
angular.isObject(arr);
angular.isString(arr);
angular.isElement(arr);//用來判斷是否為一個元素

window.οnlοad=function(){
        //列印出true
        console.log(angular.isElement(document.body);
        //列印出false
        console.log(angular.isElement("12a");

        //列印出true,說明此方法支援用JQuery的形式書寫的元素
        console.log(angular.isElement($(document.body));
    }

說明:此方法支援用JQuery的形式書寫的元素

(5)angular的其它工具方法

angular.version //判斷目前所使用的angularJs的版本 console.log(angular.version); //傳回值是一個對象,結果如下圖所示：

angularJs(三)--angularJs的子產品化和工具方法
angular.equals(a,b)//判斷兩個元素是否相等

(1)
console.log(angular.equals(3,"3"));//列印出false (2)
```
var a=[],b=[];
    console.log(angular.equals(a,b));//列印出true
      
```
與angular.equals()方法不同的是，在原生JS中，a!=b,認為是兩個不同的引用

(3)
console.log(angular.equals(NaN,NaN));//列印出true 與angular.equals()方法不同的是，在原生JS中，NaN不與任何值相等，包括它自身。
angular.forEach()方法:周遊對象

接收三個參數：

(1)第一個參數：目标對象

(2)第二個參數：處理函數

var arr=["a","b","c"];
    angular.forEach(arr,function(value,index){
        console.log(value,index);//分别列印數組的每一項的值和下标
    });

    var obj={name:"hello",age:20};
    angular.forEach(obj,function(value,key){
    console.log(value,key);//分别列印對象的每一項的鍵值和鍵名

(3)第三個參數：處理函數得到的結果。 </br>

<pre>
    var obj1={name:"hello1",age:10};
    var result=[];
    angular.forEach(obj1,function(value,key){
        //此處的this指的是第三個參數
        this.push(key+"_"+value);
    },result);
    console.log(result);//列印出["name_hello1", "age_10"]
</pre>

- angular.fromJson/toJson

類似原生的JSON.parse(str)及JSON.stringify(object)方法。

var str='{"name":"hi","age":"20"}';
    var obj=angular.fromJson(str);

    var ob2={"name":"hi","age":"20"};
    //var str2=angular.toJson(ob2);

    //将angular.toJson方法的第二個參數設定成true,
    //就能使json字元串像對象一樣的分行顯示,便于閱讀
    var str2=angular.toJson(ob2,true);
    console.log(str2);

angular.identity/noop輔助方法

這兩個方法都是用來進行預設操作的

var str="hello"
    //此方法傳回的是傳入的參數
    console.log(angular.identity(str));//hello
    //此方法是生成一個空函數
    console.log(angular.noop());//列印出undefined

angular.lowercase(str)/uppercase(str)方法

類似原生JS中轉小寫/轉大寫的方法
angular.element()方法

擷取指定元素，類似JQuery中的$(…)方法

var oDiv=document.getElementById("div1");

    //搭配JQuery中的css方法使用，運作正确
    angular.element(oDiv).css("background","red");

注意：

(1) 直接這樣寫：

angular.element('#div1').css("background","red");

，在angular.element()方法中直接寫選擇器，是不行的。

如果想實作此種寫法，要先引入JQuery庫檔案，angular内部就會做一個這樣的處理：

angular.element====$

(2) 綜上說明：AngularJs融入了部分JQuery的方法。具體融入了哪些JQuery方法可去官網文檔進行查詢。

angular.bootstrap方法

(1)可以實作動态地初始化

<pre>
    <!DOCTYPE html>

    <html >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">

            var app=angular.module("app",[]);
            app.controller("Aaa",["$scope",function($scope){
                $scope.name="hello";
            }]);
            //實作了在需要的時候初始化
            document.onclick=function(){
                ;//等同于在html标簽裡的ng-app指令，兩者都可以不寫子產品名字，即angular.bootstrap(document,[])
                angular.bootstrap(document,['app'])
            }
        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>{{name}}</p>
        </div>
    </body>
    </html>
</pre>

(2)可以用它來實作多個子產品的初始化注意：一個頁面用指令的形式初始化隻能初始化一次,如下代碼所示：

<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">

        var app=angular.module("app",[]);
        app.controller("Aaa",["$scope",function($scope){
            $scope.name="hello";
        }]);

        var app2=angular.module("app2",[]);
        app2.controller("Bbb",["$scope",function($scope){
            $scope.name="hi";
        }]);
    </script>
</head>
<body>
//需要初始化兩次，實際上運作後隻會解析第一個子產品;
    <div ng-app="app" ng-controller="Aaa">
        <p>{{name}}</p>
    </div>
    <div ng-app="app2" ng-controller="Bbb">
        <p>{{name}}</p>
    </div>
</body>
</html>

運作結果如下圖所示：

angularJs(三)--angularJs的子產品化和工具方法

要想實作多次初始化，可以用angular.bootstrap()方法，代碼如下：

<pre>
    <!DOCTYPE html>

    <html >
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">

            var app=angular.module("app",[]);
            app.controller("Aaa",["$scope",function($scope){
                $scope.name="hello";
            }]);

            var app2=angular.module("app2",[]);
            app2.controller("Bbb",["$scope",function($scope){
                $scope.name="hi";
            }]);

            document.onclick=function(){
                var aDiv=document.getElementsByTagName("div");
                angular.bootstrap(aDiv[0],["app"]);
                angular.bootstrap(aDiv[1],["app2"]);
            }
        </script>
    </head>
    <body>
        <!--<div ng-app="app" ng-controller="Aaa">-->
        <div ng-controller="Aaa">
            <p>{{name}}</p>
        </div>
        <!--<div ng-app="app2" ng-controller="Aaa">-->
        <div ng-controller="Bbb">
            <p>{{name}}</p>
        </div>
    </body>
    </html>
</pre>

angular.injector

注冊器，主要是在Angular.js内部使用。

使用此方法還需學習一些angularJS的其它知識，故會在後面詳細講如何使用此方法。

angularJs(三)--angularJs的子產品化和工具方法

angularJs的子產品化

AngularJs的工具方法

(1)angular.bind

(2)angular.copy

(3)angular.extend

(4)angular的判斷元素類型的工具方法

(5)angular的其它工具方法

繼續閱讀

Non-resolvable import POM: Failure to find

解決loadrunner9中controller中無vuser的問題

軟體測試工具分類概述

2008年度軟體測試工具排行榜

關于git的一些進階技巧總結

如何寫測試政策

關于一個項目的函數的思考，及項目的規劃

dos指令(轉東轉西)

DOS 批處理檔案

QQ“隻愛陌生人”，MSN“不和陌生人說話”

在VC6.0開發環境中添加批量注釋和取消注釋

門戶通專訪草根站長九天狼：做站貴在堅持

給Code::Blocks配置gsl——lda源碼和ctr源碼windows下的編譯過程

叽歪網創始人李卓桓：叽歪的微資訊模式叽歪網創始人李卓桓：叽歪的微資訊模式叽歪的發展方向：商業服務還是媒體李卓桓：叽歪的網際網路過冬政策李卓桓：中國微網誌營運模式需共同探索

IBM SOA 解決方案設計師認證考試準備，第 1 部分：SOA 最佳實踐

坐标系統和投影變換在桌面産品中的應用