AngularJS基础——工具方法_angular 工具类js-优快云博客

angularJS的工具方法主要有以下这些：
angular.bind
angular.bootstrap
angular.copy
angular.element
angular.equals
angular.extend
angular.forEach
angular.fromJson
angular.isArray
angular.isDate
angular.isDefined
angular.isNumber
angular.isObject
angular.isString
angular.isUndefined
angular.lowercase
angular.module
angular.toJson
angular.uppercase

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        {{name}}    <br/>
        {{isArray}} <br/>
        {{uppName}} <br/>
        {{eq}} <br/>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('firstCtrl',function($scope){
        $scope.name="zhangsanfeng";
        $scope.arr=[1,3,5];

        //angular.isArray()——判断对象是否为数组
        $scope.isArray=angular.isArray($scope.arr);

        //angular.uppercase()——将对象的字符串格式为大写
        $scope.uppName=angular.uppercase($scope.name);

        //angular.equals()——判断对象是否相等
        $scope.num1=5;
        $scope.num2=3;
        $scope.eq=angular.equals($scope.num1,$scope.num2);

        //angular.extend()——实现a对象继承于b对象
        //angular.copy()——将b对象复制为a对象
        $scope.people={name:'huangfeihong'};
        $scope.student={age:28};
        $scope.teacher={age:56};
        $scope.ex=angular.extend($scope.student,$scope.people);
        $scope.co=angular.copy($scope.people,$scope.teacher);
        console.log($scope.student);//=> Object { age=28,  name="huangfeihong"}
        console.log($scope.teacher);//=> Object { name="huangfeihong"}

        //angular.toJson()——将对象转换为JSON格式,并格式化(可选)
        var object1={name:'fangshiyu',age:22};
        $scope.json=angular.toJson(object1,true);
        console.log($scope.json);//=>
        /*
        {
            "name": "fangshiyu",
             "age": 22
        }
        */

        //angular.fromJson()——将JSON格式的字符串转换为对象
        var object2='{"name":"fangshiyu","age":22}';
        $scope.fromJson=angular.fromJson(object2);
        console.log($scope.fromJson);//=> Object { name="fangshiyu",  age=22}

        //angular.forEach()——将对象的键和值循环遍历
        var object3={name:'fangshiyu',age:22,sex:'男'};
        var results=[];
        angular.forEach(object3,function(value,key){
            this.push(key+"---"+value);
        },results);
        console.log(results);//=> ["name---fangshiyu", "age---22", "sex---男"]

        //angular.bind()——绑定对象，作为函数的上下文
        var self={name:'张三'};
        var f=angular.bind(self,function(age){
            $scope.info=this.name+" is "+age;
            return $scope.info;
        });
        console.log(f(25));//=>张三 is 25
        var f2=angular.bind(self,function(age){
            $scope.info=this.name+" is "+age;
            return $scope.info;
        },26);
        console.log(f2());//=>张三 is 26
    });

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

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>

    <div id="div1" ng-controller="firstCtrl">
        {{name}}
    </div>

    <div id="div2" ng-controller="secondCtrl">
        {{name}}
    </div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp1=angular.module('myApp1',[]);
    myApp1.controller('firstCtrl',function($scope){
        $scope.name='张三';
    });
    var myApp2=angular.module('myApp2',[]);
    myApp2.controller('secondCtrl',function($scope){
        $scope.name='李四';
    });
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    //angular.bootstrap()——动态加载module,而且可以加载多个
    angular.bootstrap(div1,['myApp1']);
    angular.bootstrap(div2,['myApp2']);
    
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        {{name}}
    </div>

    <div ng-controller="secondCtrl">
        {{name}}
    </div>
</div>

<script src="angular.min.js"></script>
<script src="module.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',['myApp2']);//模块依赖，引入另一个js的模块
    myApp.controller('firstCtrl',function($scope){
        $scope.name='张三';
    });

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

var myApp2=angular.module('myApp2',[]);
myApp2.controller('secondCtrl',function($scope){
    $scope.name='李四';
});

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        <span id="name">{{name}}</span>
        <span id="age">{{age}}</span>
    </div>

</div>

<script src="jquery-1.11.2.min.js"></script>
<script src="angular.min.js"></script>
<script src="module.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',['myApp2']);//模块依赖，引入另一个js的模块
    myApp.controller('firstCtrl',function($scope){
        $scope.name='张三';
        $scope.age=25;
        //引入jQuery则可直接使用jQuery
        $("#name").css('background','#f00');
        //使用angular.element的内置了Angular的jqLite，也可以实现很多jQuery的方法
        var ageEle=document.getElementById("age");
        angular.element(ageEle).css('background','#00f');

    });
</script>
</body>
</html>