AngularJS基础——工具方法

来源：互联网发布：最新网络流行歌曲编辑：程序博客网时间：2024/06/05 12:40

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>

0 0