AngularJS学习记录-工具方法

最新推荐文章于 2023-06-04 10:23:37 发布

web_LamHo

最新推荐文章于 2023-06-04 10:23:37 发布

阅读量396

点赞数

分类专栏： Angular学习文章标签： AngularJS

本文链接：https://blog.csdn.net/web_LamHo/article/details/51427089

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Angularjs 工具方法

angular.isArray – 判断是否是一个数组

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var arr = [1,1,1,1,1,1];
                var hasArr = angular.isArray(arr);
                console.log(hasArr);

            })

angular.isDate – 判读是否是一个日期

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var date = new Date();
                var hasDate = angular.isDate(date);
                console.log(hasDate);

            })

angular.isDefined – 判断一个数据是否是defined类型

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var a = [];
                var isDefined1 = angular.isDefined(a);
                var isDefined2 = angular.isDefined(undefined);
                console.log(isDefined1); //-true
                console.log(isDefined2); //-false


            })

angular.isElement – 判断是否是一个标签

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var body = document.querySelector('body');
                var arr = [];
                var isElement1 = angular.isElement(body);
                var isElement2 = angular.isElement(arr);

                console.log(isElement1)//-true
                console.log(isElement2)//-false



            })

angular.isFunction – 判断是否为一个函数

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var fn1 = function(){
                    console.log('我是一个函数');
                };

                function fn2(){
                    console.log('我也是一个函数');
                }

                var arr = [];
                var isFunction1 = angular.isFunction(fn1);
                var isFunction2 = angular.isFunction(fn2);
                var isFunction3 = angular.isFunction(arr);
                var isFunction4 = angular.isFunction(function(){console.log('我还是一个函数')});

                console.log(isFunction1);//-true
                console.log(isFunction2);//-true
                console.log(isFunction3);//-false
                console.log(isFunction4);//-true
            })

angular.isNumber – 判断是否为一个数字类型数据

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var num = 123123123;
                var str1 = '阿斯达';
                var str2 = '123123';

                var isNumber1 = angular.isNumber(num);
                var isNumber2 = angular.isNumber(str1);
                var isNumber3 = angular.isNumber(str2);


                console.log(isNumber1);//-true
                console.log(isNumber2);//-false
                console.log(isNumber3);//-false
            })

angular.isObject – 判断是否为一个对象

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var num = 123123123;
                var str1 = '阿斯达';
                var obj = {name:'LamHo'};

                var isObject1 = angular.isObject(num);
                var isObject2 = angular.isObject(str1);
                var isObject3 = angular.isObject(obj);


                console.log(isObject1);//-false
                console.log(isObject2);//-false
                console.log(isObject3);//-true
            })

angular.isString – 判断是否为一个字符串

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                var num = 123123123;
                var str1 = '阿斯达';
                var obj = {name:'LamHo'};

                var isString1 = angular.isString(num);
                var isString2 = angular.isString(str1);
                var isString3 = angular.isString(obj);


                console.log(isString1);//-false
                console.log(isString2);//-true
                console.log(isString3);//-false
            })

angular.uppercase – 把字符串转为大写(英文)

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.str = 'this is string';

                $scope.newStr = angular.uppercase($scope.str);

                console.log($scope.str);//-this is string
                console.log($scope.newStr);//-THIS IS STRING

            })

angular.lowercase – 把字符串转为小写(英文)

 angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.str = 'THIS IS STRING';

                $scope.newStr = angular.lowercase($scope.str);

                console.log($scope.str);//-THIS IS STRING
                console.log($scope.newStr);//-this is string

            })

angular.equals – 把两个变量进行比较

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.equalsStr1 = 'THIS IS STRING';
                $scope.equalsStr2 = 'this is string';

                $scope.eqNumber1 = 123;
                $scope.eqNumber2 = 321;
                $scope.eqNumber3 = 123;

                $scope.obj1 = {name:'LamHo',age:'22'};
                $scope.obj2 = {name:'LamHo1',age:'23'};
                $scope.obj3 = {name:'LamHo',age:'22'};


                console.log(angular.equals($scope.equalsStr1,$scope.equalsStr2));//-false

                console.log(angular.equals($scope.eqNumber1,$scope.eqNumber2));//-false
                console.log(angular.equals($scope.eqNumber1,$scope.eqNumber3));//-true

                console.log(angular.equals($scope.obj1,$scope.obj2));//-false
                console.log(angular.equals($scope.obj1,$scope.obj3));//-true


            })

angular.extend – 对象的拓展，对象间的属性继承

 angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.obj1 = {name:'LamHo',age:'22'};
                $scope.obj2 = {name:'Jay',age:'32'};
                $scope.obj3 = {school:'sada',sex:'man'};


                $scope.newObj1 = angular.extend($scope.obj1,$scope.obj2);//obj2会替换obj1中相同的key的value
                console.log($scope.newObj1);//-Object {name: "Jay", age: "32"}

                $scope.newObj2 = angular.extend($scope.obj1,$scope.obj3);//如果obj1中没有obj3里相同的key，会新增obj3的key和value给obj1
                console.log($scope.newObj2);//-Object {name: "Jay", age: "32", school: "sada", sex: "man"}


            })

angular.fromJson – 字符串转JSON

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.str = '{"name":"LamHo","age":"22","school":"sada","sex":"man"}';


                $scope.obj = angular.fromJson($scope.str);

                console.log($scope.obj);//-Object {name: "LamHo", age: "22", school: "sada", sex: "man"}


            })

angular.toJson – JSON转字符串

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.obj1 = {name:'LamHo',age:'22',school:'sada',sex:'man'};


                $scope.str1 = angular.toJson($scope.obj1);
                $scope.str2 = angular.toJson($scope.obj1,true);//如果传入第二个参数为true会格式化字符串，默认false

                console.log($scope.str1);//-{"name":"LamHo","age":"22","school":"sada","sex":"man"}
                console.log($scope.str2);
//                {
//                  "name": "LamHo",
//                  "age": "22",
//                  "school": "sada",
//                  "sex": "man"
//                 }


            })

angular.copy – 对象的深拷贝

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.obj = {
                    "name":"LamHo",
                    "age":"22",
                    "school":"sada",
                    "sex":"man"
                };


                $scope.newObj = angular.copy($scope.obj);

                console.log($scope.newObj);


            })

angular.forEach – 对象的遍历

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                $scope.obj1 = {
                    "name":"LamHo",
                    "age":"22",
                    "school":"sada",
                    "sex":"man"
                };

                $scope.obj2 = {};

                //基本循环
                angular.forEach($scope.obj1,function(value,key){
                    console.log(key + ':' + value);
                });

                /**
                 * 还有第三个参数 angular.forEach(obj, iterator, [context])
                 * context 迭代函数中上下文
                 * **/

                angular.forEach($scope.obj1,function(value,key){
                    console.log(key + ':' + value);
                    console.log(this);//-指向$scope.obj2

                    /**
                     * 我们可以做以下操作
                     * 每遍历一个就为this添加对应的key和val
                     * **/

                    this[key] = value;
                    console.log(this);

                },$scope.obj2);

                /**
                 * 在一般情况下我们可以这么做
                 * **/

                $scope.obj3 = {};
                angular.forEach($scope.obj1,function(value,key){
                    console.log(key + ':' + value);
                    /**
                     * 我们可以做以下操作
                     * 每遍历一个就为this添加对应的key和val
                     * **/

                    $scope.obj3[key] = value;
                    console.log($scope.obj3);

                });

            })

angular.bind – 返回一个新的函数，绑定这个函数的this指向

angular.module('myApp',[])
            .controller('myCtr',function($scope){

                /**
                 * angular.bind(self, fn, args)
                 * 作用：返回一个新的函数，绑定这个函数的this指向self
                 * 参数：
                 *   self：新函数的上下文对象
                 *   fn：需要绑定的函数
                 *   args：传递给函数的参数
                 *
                 * 返回值：this指向self的新函数
                 *
                 * **/


                var obj = {
                    name: 'xxx',
                    print: function (country) {
                        console.log(this.name + ' is form ' + country);
                    }
                };

                var self = {
                    name: 'yyy'
                };


                var bindFn = angular.bind(self, obj.print, 'China');//var bindFn = angular.bind(self, obj.print, ['China']);

                obj.print('American'); //$ xxx is form American
                bindFn(); //$ yyy is form China

                //注意：bind会根据你的参数类型来决定调用call或apply，所以args可以是一个个数据，也可以是一个数组哦。

            })

angular.bootstrap – 手动启动模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/ng/js/angular.js"></script>
</head>
<body>

<div ng-app="myApp1" ng-controller="myCtr">{{text}}</div>
<div ng-app="myApp2" ng-controller="myCtr">{{text}}</div>

<script>
    angular.module('myApp1',[])
            .controller('myCtr',function($scope){
                $scope.text = '我是模块1';
            });

    angular.module('myApp2',[])
            .controller('myCtr',function($scope){
                $scope.text = '我是控模块2';
            });

</script>
</body>
</html>

一般情况下，angular只会启动一个module，按照上面的写法会出现myApp1启动成功，而myApp2则没有启动。解决方法就是通过用angular.bootstrap进行手动启动，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/ng/js/angular.js"></script>
</head>
<body>

<div id="div1" ng-controller="myCtr">{{text}}</div>
<div id="div2" ng-controller="myCtr">{{text}}</div>

<script>
    angular.module('myApp1',[])
            .controller('myCtr',function($scope){
                $scope.text = '我是模块1';
            });

    angular.module('myApp2',[])
            .controller('myCtr',function($scope){
                $scope.text = '我是模块2';
            });

    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById("div1"),["myApp1"]);
        angular.bootstrap(document.getElementById("div2"),["myApp2"]);
    });

</script>
</body>
</html>