angularjs1-3,工具方法，bootstrap，多个module，引入jquery
2024-08-28 09:08:17
<!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>
最新文章
- 关于C#调用非托管动态库方式的性能疑问
- signal(SIGPIPE, SIG_IGN)
- MyEclipse使用总结——MyEclipse去除网上复制下来的来代码带有的行号
- 实现一个不停发包的Android应用（类似于电脑上的Ping命令）
- 从头开始编写一个Orchard网上商店模块(2) - 配置您的Orchard开发环境
- Windows打印体系结构之Print Spooler概念与架构
- hdu 1542 线段树 求矩形并
- Python 内嵌函数运用（探究模块）
- CTF杂项之BubbleBabble加密算法
- EDI 学习开发（一）
- [python] A*算法基于栅格地图的全局路径规划
- spring的4种事务特性，5种隔离级别，7种传播行为
- [No0000E4]C# 常量
- L1-007 念数字
- Django输入 中文参数保存异常解决方法
- web语义化，从松散到实战
- 一些常见http状态码
- HAProxy+Varnish+LNMP实现高可用负载均衡动静分离集群部署
- QHeaderView的点击和双击事件
- AngularJS中$watch