angularJs(三)--angularJs的模块化和工具方法

来源：互联网发布：windows hook 框架编辑：程序博客网时间：2024/06/15 04:06

angularJs的模块化

1.模块化的好处是：
(1)减少变量之间的污染
(2)可以实现模块之间的相互依赖

2.angularJs的模块化的实现：
(1) angular.module("app",[])，该方法接收两个参数：
　　第一个参数是模块化的名字；
　　第二个参数是数组类型，存放要依赖的模块。如果需要依赖任何模块，直接写一个空数组就行。
(2) 在此之后需为页面中的”ng-app”指定初始化模块;
(3) app.controller(“Bbb”,Bbb),该方法接收两个参数：
第一个是函数名称，第二个是函数

     <pre>         <!DOCTYPE html>         <!--ng-app需要指定初始模块是哪个-->         <html lang="en" 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.onload=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);//返回值是一个对象,结果如下图所示：
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 lang="en">    <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 lang="en"><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>

运行结果如下图所示：
这里写图片描述
要想实现多次初始化，可以用angular.bootstrap()方法，代码如下：

<pre>    <!DOCTYPE html>    <html lang="en">    <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的其它知识，故会在后面详细讲如何使用此方法。

阅读全文

0 0