angularjs 工具方法

简介:
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

//angular.bind(); -> $.proxy() : 改this指向
function show(n1,n2){
    alert(n1);
    alert(n2);
    alert(this);
}
angular.bind(document,show,3)(4);//改变show函数的this指向,

//angular.copy();  //拷贝对象
var a = {name : 'hello'};
var b = {age : '20'};
var c = angular.copy(a,b);   //a把所有值覆盖给了b
console.log(b);

//angular.extend();   //对象继承
var a = {
    name : 'hello'
};
var b = {
    age : '20'
};
var c = angular.extend(b,a); //c有
console.log(b);
</script>
</head>
<body>
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-1.11.1.js"></script>
<script src="angular.min.js"></script>
<script>

var a = [];
console.log(angular.isArray(a));//是不是数组
window.onload = function(){
    console.log(angular.isElement( document.body ));
    console.log(angular.isElement( $(document.body) ));
};

console.log(angular.version);
var a = NaN;
var b = NaN;
console.log(angular.equals(a,b));
var values = ['a','b','c'];
var values = {'name':'hello','age':'20'};
var result = [];
angular.forEach(values,function(value,i){
    console.log(value);
    console.log(i);
    this.push( value + i );//this是result
},result);
console.log(result);

//JSON.parse() JSON.stringify()
var str = '{"name":"hello","age":"20"}';
var json = angular.fromJson(str);
console.log(json);
var json = {"name":"hello","age":"20"};
var str = angular.toJson(json,true);
console.log( str );
//angular.identity/noop

var str = 'hello';
console.log(angular.identity(str));  //hello
function identity(str){
    return str;
}
console.log(angular.noop());  //undefined
function noop(){
}
console.log(angular.uppercase('hello'));
</script>
</head>

<body>
<div id="div1">aaaaaaaa</div>
<script>
var oDiv = document.getElementById('div1');
$('#div1').css('background','red');
//angular.element === $
</script>
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp1',[]);
var m2 = angular.module('myApp2',[]);

m1.controller('Aaa',['$scope',function($scope){//定义Aaa控制器的函数,
    $scope.name = 'hello';
}]);
m2.controller('Bbb',['$scope',function($scope){
    $scope.name = 'hi';
}]);

document.onclick = function(){
    var aDiv = document.getElementsByTagName('div');
    angular.bootstrap(aDiv[0],['myApp1']);
    angular.bootstrap(aDiv[1],['myApp2']);
};

</script>
</head>
<body>
<div ng-controller="Aaa">
    <p>{{name}}</p>
</div>
<div ng-controller="Bbb">
    <p>{{name}}</p>
</div>
</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
    $scope.name = 'hello';
    setTimeout(function(){
        //$scope.name = 'hi';
        $scope.$apply(function(){//$apply针对数据变化有用
            $scope.name = 'hi';
        });
    },2000);
    $timeout(function(){
        $scope.name = 'hi';
    },2000);
    
    $scope.show = function(){
        $scope.name = 'hi';
    };
    
}

</script>
</head>

<body>
<!--<div ng-controller="Aaa" ng-click="name='hi'">-->
<div ng-controller="Aaa" ng-click="show()">
    <p>{{name}}</p>
</div>

</body>
</html>
复制代码
复制代码
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>


var m1 = angular.module('myApp',[]);

/*m1.controller('Aaa',['$scope',function($scope){//控制器的函数
    $scope.name = 'hello';
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'hi';
}]);*/
m1.run(['$rootScope',function($rootScope){  // 
    $rootScope.name = 'hello';
}]);
console.log( m1 );

</script>
</head>

<body>
<div>
    <p>{{name}}</p>
</div>

</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5738313.html,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
前端开发 JavaScript 开发者
AngularJS 和 React区别
@[TOC](目录) AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点,例如都是基于 JavaScript 的开源框架,都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点,如下所述: # 1. 背景: AngularJS 由 Google 的前雇员 Misko Hevery 开发,并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架,旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发,并于 2013 年首次发布。它是一个基于 JavaScript 的库,可以用于
135 0
|
JavaScript
AngularJs错误http://errors.angularjs.org/1.2.9/$injector/unpr?p0=...
AngularJs错误http://errors.angularjs.org/1.2.9/$injector/unpr?p0=...
78 0
|
JavaScript 前端开发
AngularJS中的方法参数的问题
AngularJS中的方法参数的问题
97 0
AngularJS中的方法参数的问题
|
JSON 前端开发 JavaScript
总结—angularjs项目
总结—angularjs项目
233 0
总结—angularjs项目
|
前端开发 JavaScript UED
AngularJS中的按需加载ocLazyLoad
初学者,有不足的地方希望各位指出   一、前言     ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。
1613 0
|
JavaScript 前端开发
AngularJs-变量
Angularjs-变量 名字 : Hello {{name}} ...
775 0