angular.extend、angular.$watch、angular.bootstrap
1、angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象。
直接上代码来的简单明了:
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var json= {
name:'jsck',
age:20
}
var json1 = {
sex:'men'
}
var c = angular.extend(json,json1);
console.log(c)
</script>
返回的结果:
Object {name: "jsck", age: 20, sex: "men"}
angular.extend方法就介绍到这里。
2.angular.$watch,当你数据中的某一部分发生了变化时,$watch函数就可以发出通知,监控那部分数据。
下面来看下实例吧
<!DOCTYPE html>
<html ng-app="mk">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('mk', []);
app.controller('ctrl', function($scope) {
$scope.init = {
name: "jack",
age: 20
};
$scope.$watch('init.age', function(newVal, oldVal) {
console.log("new--" + newVal);
console.log("old--" + oldVal);
}, true)
})
</script>
</head>
<body ng-controller="ctrl">
user:<input type="text" ng-model="init.name"/> age:
<input type="number" ng-model="init.age" />
</body>
</html>
在网页中展现的效果:
看一下监听到的内容:
3、angular.bootstrap,此方法用于手动加载angularjs模块。
angular.bootstrap(element, [modules], [config]);
参数名称 | 参数类型 | 描述 |
---|---|---|
element | DOMElement | DOM元素 |
modules | Array | 要加载的模板 |
config | Object | 配置选项的对象。 |
说多无益,直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app1 = angular.module('mk1', []);
var app2 = angular.module('mk2', []);
app1.controller("ctrl1", function($scope) {
$scope.a = 12;
})
app2.controller("ctrl2", function($scope) {
$scope.b = 20;
})
var aDiv = document.getElementsByTagName('div');
angular.element(document).on('click', function() {
angular.bootstrap(aDiv[0], ['mk1']); //手动开启angular应用模式,第一个参数是定义哪个模块
angular.bootstrap(aDiv[1], ['mk2']);
})
</script>
</head>
<body>
<div ng-controller="ctrl1">
{{a}}
</div>
<div ng-controller="ctrl2">
{{b}}
</div>
</body>
</html>
在网页中刚出来的效果是这样的
然后手动点击{{a}}、{{b}}
最后展示效果
angular.extend、angular.$watch、angular.bootstrap的更多相关文章
- AngularJs angular.forEach、angular.extend
angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...
- Angular - - angular.forEach、angular.extend
angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...
- angular.js 的angular.copy 、 angular.extend 、 angular.merge
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular 配置开发环境、测试环境、生产环境
1. 配置开发环境.测试环境.生产环境 (1). environment.ts - 开发环境: 用于程序开发 (创建项目时自动生成) export const environment = { prod ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- angular 引入ocLazyLoad实现js、controller懒加载
项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...
- angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 4、Swing在JPanel中添加背景图片方法
4.Jpanel面板中加载背景图片 在实际应用Java做界面的过程中,常常会涉及到加载背景图片以使页面美化.下面整理了一个小模块以便于调用. 1 package com.tntxia.commonsw ...
- (数字IC)低功耗设计入门(二)——功耗的分析
前面学习了进行低功耗的目的个功耗的构成,今天就来分享一下功耗的分析.由于是面向数字IC前端设计的学习,所以这里的功耗分析是基于DC中的power compiler工具:更精确的功耗分析可以采用PT,关 ...
- RGB565的理解
一个彩色图像由R G B三个分量组成,一个RGB565的每一个像素点数据为2Byte,即16位,那么从名字上就可看出来这16位中,高5位为R分量,中间6位为G分量,低5位为B分量. 下面做了一个实验, ...
- [原创]安全系列之端口敲门服务(Port Knocking for Ubuntu 14.04 Server)
Port Knocking for Ubuntu 14.04 Server OS:ubuntu 14.04 server 原理简单分析: 端口敲门服务,即:knockd服务.该服务通过动态的添加ipt ...
- linux命令11
tar命令的使用 tar文件是把几个文件的(或)目录集合在一个文件夹里,是创建备份和归档的最佳工具. [root@localhost ~]# tar --help用法: tar [选项...] [FI ...
- 微信小程序封装http访问网络库实例代码
之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...
- DOM知识梳理
DOM 我们知道,JavaScript是由ECMAScript + DOM + BOM组成的.ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合. ...
- iOS项目评估报告
1.整体项目无分层概念,结构混乱,代码耦合严重. 影响:后期扩展困难,维护困难. 解决方案:1.整体采用mvc模式. 2.在原来的基础再抽离出业务层 3.业务层按模块管理,合理分层分包. 4.做好共用 ...
- robot framework环境搭建
来源:http://www.cnblogs.com/puresoul/p/3854963.html[转] 一. robot framework环境搭建: 官网:http://robotframewor ...
- Python中的枚举
在Python中想要实现枚举功能的方式比较多,可以通过字典这一数据结构,利用键与值的对应关系,可以实现枚举的功能. my_Enum={ 'red':1, 'yellow':2, 'blue':3 } ...