<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
{{name}}
{{isArray}}
{{name1}}
{{eq}}
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller(‘firstController‘,[‘$scope‘,function($scope){
/*$scope.name=‘zhangsan‘;
$scope.arr=[1,2,3];
$scope.isArray=angular.isArray($scope.arr);
$scope.name1=angular.uppercase($scope.name);
$scope.a=‘111‘;
$scope.b=‘111‘;
$scope.eq=angular.equals($scope.a,$scope.b);
console.log($scope.eq);//true
$scope.a={name:‘张三‘};
$scope.b={age:10};
$scope.c=angular.extend($scope.b,$scope.a);
console.log($scope.c);//Object {age: 10, name: "张三"}
var json = {"name":"hello","age":"20"};
console.log(json);//Object {name: "hello", age: "20"}
$scope.json=angular.toJson(json);
console.log($scope.json);//{"name":"hello","age":"20"}
$scope.json=angular.toJson(json,true);
console.log($scope.json);
var json = ‘{"name":"hello","age":"20"}‘;
console.log(json);//{"name":"hello","age":"20"}
$scope.json=angular.toJson(json);
$scope.json=angular.fromJson(json);
console.log($scope.json);//Object {name: "hello", age: "20"}
$scope.a={name:‘张三‘};
$scope.b={age:10};
$scope.c=angular.copy($scope.a,$scope.b);
console.log($scope.a);
console.log($scope.b);
var json = {"name":"hello","age":"20","sex":‘男‘};
angular.forEach(json,function(val,key){
console.log(val);
console.log(key);
});*/
var json = {"name":"hello","age":"20","sex":‘男‘};
var results=[];
angular.forEach(json,function(val,key){
console.log(val);
console.log(key);
this.push(key+‘--‘+val);
},results);
console.log(results);
//绑定对象，作为函数的上下文
var self={name:‘张三‘};
var f=angular.bind(self,function(age){
$scope.info=this.name+‘ is ‘+age;
console.log($scope.info);
});
f(30);
var f=angular.bind(self,function(age){
$scope.info=this.name+‘ is ‘+age;
console.log($scope.info);
},10);
f();
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div>
<!-- <div ng-controller="firstController" ng-app="myApp1">
{{name}}
</div>
<div ng-controller="secondController" ng-app="myApp2">
{{name}}
</div>
var app1 = angular.module("myApp1", []);
var app2 = angular.module("myApp2", []);//报错，module只会初始化一次， -->
<div id=‘div1‘ ng-controller="firstController"
{{name}}
</div>
<div id=‘div2‘ ng-controller="secondController">
{{name}}
</div>
</div>
//bootstrap不是css的bootstrap，一般一个页面只有一个module，bootstrap用于页面初始化多个module，
<script type="text/javascript">
var app1 = angular.module("myApp1", []);
var app2 = angular.module("myApp2", []);//报错，module只会初始化一次，
app1.controller(‘firstController‘,function($scope){
$scope.name=‘张三‘;
});
app2.controller(‘secondController‘,function($scope){
$scope.name=‘李四‘;
});
var div1=document.getElementById(‘div1‘);
var div2=document.getElementById(‘div2‘);
document.onclick=function(){//动态加载多个module
angular.bootstrap(div1,[‘myApp1‘]);
angular.bootstrap(div2,[‘myApp2‘]);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="module02.js"></script>
<!-- module02.js：
var app2 = angular.module("myApp2", []);
app2.controller(‘secondController‘,function($scope){
$scope.name=‘李四‘;
});
app2.controller(‘threeController‘,function($scope){
$scope.name=‘王五‘;
});-->
</head>
<body ng-app="myApp">
<div>
<div ng-controller="firstController">
{{name}}
</div>
<div ng-controller="secondController">
{{name}}
</div>
<div ng-controller="threeController">
{{name}}
</div>
</div>
<script type="text/javascript">
var app1 = angular.module("myApp", [‘myApp2‘])//模块的依赖，[‘myApp2‘,‘myApp3‘]可以引入多个，这是插件化引入。
app1.controller(‘firstController‘,function($scope){
$scope.name=‘张三‘;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
//jqueru要放在上面
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="module02.js"></script>
<!-- module02.js：
var app2 = angular.module("myApp2", []);
app2.controller(‘secondController‘,function($scope){
$scope.name=‘李四‘;
});
app2.controller(‘threeController‘,function($scope){
$scope.name=‘王五‘;
});-->
</head>
<body ng-app="myApp">
<div>
<div ng-controller="firstController">
<div id="obj1">
</div>
{{name}}
</div>
<div ng-controller="secondController">
{{name}}
</div>
<div ng-controller="threeController">
{{name}}
</div>
</div>
<script type="text/javascript">
var app1 = angular.module("myApp", [‘myApp2‘]);
app1.controller(‘firstController‘,function($scope){
$scope.name=‘张三‘;
// $("#obj1").html(‘<span>尿道嗦嘎电视柜 v邓先生广东省高</span>‘);
var obj1=document.getElementById(‘obj1‘);
angular.element(obj1).html(‘这是angularjs中的jqlite‘);
});
</script>
</body>
</html>
时间： 2024-10-08 12:25:43