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 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的 ...
随机推荐
- BZOJ 1018 线段树维护图的连通性问题
思路: 我们可以搞一棵线段树 对于一段区间有6种情况需要讨论 左上右下.左上右上.左下右下.左下右上 这四种比较好维护 用左上右下举个例子吧 就是左儿子的左上右下&左区间到右区间下面有路&am ...
- Json转换成DataTable
今天看到Json转DataTable的例子,总结一下.... using System; using System.Collections; using System.Collections.Gene ...
- Java基础2一基础语法
1.标识符 定义:在Java中给类名.方法名.包名,参数名等命名时使用的字符序列即标识符 规则: 由字母.数字.下划线和$符组成 不能以数字开头 长度无限制 严格区分大小写 不能是java中的保留关键 ...
- 第一课 导入库 - 创建数据集 - CSV读取 - 导出 - 查找最大值 - 绘制数据
第1课 创建数据 - 我们从创建自己的数据集开始分析.这可以防止阅读本教程的最终用户为得到下面的结果而不得不下载许多文件.我们将把这个数据集导出到一个文本文件中,这样您就可以获得从文本文件中一些拉取数 ...
- 错误:the apk for your currently selected variant(app-release-unsigned.apk)is not signed.Please specity a signing configuration for this variant(release)
1:导入android studio project 时总会出现运行处一个红色叉号,这里可以点击选择叉号上面显示的Edit Configurations 查看右下角的错误警告信息.: 2:记录错误: ...
- Python 之 面向对象(一)
一.dir内置函数 在标识符/数据后输入一个.,然后按下TAB键,ipython会 提示该对象能够调用的方法列表 使用内置函数dir传入标识符/数据后,可以查看对象内所有的属性及方法 #查看注释 de ...
- ACM_____不再爱你……
不再爱你…… 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在有一个圆柱形水杯,里面装满了水,在它的底部有一个小洞,通过一些简单的物理知识我们可以知道: 1.由于重力 ...
- 「图解HTTP 笔记」Web 基础
Web 基础 三项构建技术: HTML:页面的文本标记语言 HTTP:文档传输协议 URL:指定文档所在地址 一些概念 HTTP(HyperText Transfer Protocol):通常被译为& ...
- 读书笔记「Python编程:从入门到实践」_3.列表简介
3.1 列表是什么 列表 由一系列按特定顺序排列的元素组成. 在Python中,用方括号([] )来表示列表,并用逗号来分隔其中的元素. 3.1.1 访问列表元素 指出列表的名称,再指出元素的索引 ...
- XSS Chanllenges 11-15
Stage #11 根据提示,发现正则匹配,过滤掉了很多关键字 除on 事件和script 事件外,能执行js 代码的还有a 标签构造的超链接 构造 "><a href=java ...