angularjs1-3,工具方法，bootstrap，多个module，引入jquery
<!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>
angularjs1-3,工具方法，bootstrap，多个module，引入jquery的更多相关文章
- jquery源码解析：jQuery延迟对象Deferred（工具方法）详解1
请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...
- angularjs工具方法
1.angular.extend var dst = {name: 'xxx', country: 'China'}; var src1 = {name: 'yyy', age: 10}; var s ...
- angular的工具方法笔记(equals, HashKey)
分别是angular脏值检测的工具方法equals和 类HashKey的使用方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- JQuery操作类数组的工具方法
JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...
- jQuery工具方法
目录 常用工具方法 判断数据类型的方法 Ajax操作 $.ajax 简便写法 Ajax事件 返回值 JSONP 文件上传 参考链接 jQuery函数库提供了一个jQuery对象(简写为$),这个对象本 ...
- jQuery晦涩的底层工具方法们
这里整理的是jQuery源码中一些比较晦涩难懂的.内部的.最底层的工具方法,它们多为jQuery的上层api方法服务,目前包括: jQuery.access jQuery.access: functi ...
- zepto源码学习-02 工具方法-详细解读
上一篇:地址 先解决上次留下的疑问,开始看到zepto.z[0]这个东西的时候,我很是不爽,看着它都不顺眼,怎么一个zepto的实例对象var test1=$('#items'); test__pr ...
- jQuery源代码 解析一 工具方法
1. 外层沙箱以及命名空间$ 几乎稍微有点经验前端人员都这么做,为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行",然后在暴露出命名空间(可以为API,函数,对象): 2 ...
- Underscore.js 常用类型判断以及一些有用的工具方法
1. 常用类型判断以及一些有用的工具方法 underscore.js 中一些 JavaScript 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的 ...
随机推荐
- CTF-Mayday
打开下载的Mayday.txt文件: 温柔 知足突然好想你 拥抱突然好想你 拥抱温柔 知足温柔 知足突然好想你 拥抱突然好想你 拥抱温柔 知足温柔 知足突然好想你 拥抱突然好想你 拥抱温柔 ...
- 运维自动化-Ansible
前言 天天说运维,究竟是干什么的?先看看工作流程呗.一般来说,运维工程师在一家企业里属于个位数的岗位,甚至只有一个.面对生产中NNN台服务器,NN个人员,工作量也是非常大的.所以嘛,图中的我好歹也会配 ...
- jah老师中关于集合的总结
--------概述:1.Java 集合就像一种容器,可以把多个对象的引用放入容器中 2.Java 集合类可以用于存储数量不等的多个对象,还可用于保存具有映射关系的关联数组3.Java 集合可分为 S ...
- guice基本学习，guice的学习资料(十)
这个是我前面几篇的参考. guice的学习资料下载:http://pan.baidu.com/s/1bDEPem 路途遥远,但是人确在走.不忘初心,方得始终.
- C#中DBNull问题
当数据库中一个字段不是必填项时,在往数据库中插入数据的时候往往会插入一个空字符串就草草了事了.在这里用DBNull可以解决这个问题 /// <summary> /// 插入数据 /// & ...
- Tomcat 日志切割
一.installing 日志轮训工具 yum install cronolog -y 二.安装.修改tomcat文件 wget http://mirrors.shuosc.org/apache/ ...
- pc端和移动端的轮播图实现（只是结构，内容以后慢慢补充）
轮播图 PC端 移动端 原生js的写法 图片顺序 8123456781 设置计时器 当过度完成之后判断index是否到达两边界限,是的话设置位移 手指touchstart时,获取位置,暂停计时器 手指 ...
- 【Oracle】利用trace文件重建控制文件
重建步骤: 1.生成trace文件: alter database backup controlfile to trace; 2.找到生成的trace文件: show parameter dump u ...
- linux openSSL 安装
包名:openssh-server apt安装:apt-get install openssh-server yum安装:yum install openssh-server 服务启动:service ...
- 「JavaSE 重新出发」05.03.03 使用反射编写泛型数组代码
Employee[] a = new Employee[100]; // ... // array is full a = Arrays.copyOf(a, 2 * a.length); 如何编写这样 ...