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 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.ο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);//返回值是一个对象,结果如下图所示:
    这里写图片描述
  • 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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值