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的更多相关文章

  1. AngularJs angular.forEach、angular.extend

    angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...

  2. Angular - - angular.forEach、angular.extend

    angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...

  3. angular.js 的angular.copy 、 angular.extend 、 angular.merge

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  5. 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 的目的是 ...

  6. angular 配置开发环境、测试环境、生产环境

    1. 配置开发环境.测试环境.生产环境 (1). environment.ts - 开发环境: 用于程序开发 (创建项目时自动生成) export const environment = { prod ...

  7. Angular：路由的配置、传参以及跳转

    ①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...

  8. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  9. angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. CPU最核心的电子元件叫做石英晶振

    CPU是电子计算机的主要设备之一,是电脑中的核心配件.主要功能是解释计算机指令以及处理计算机软件中的数据.有人会问,你知道CPU里面都有什么吗?我想大家都会说硅晶体,集成度极大的半导体材料.却没有人提 ...

  2. dockerfile语法

    dockerfiles的指令不区分大小写,但约定为全部大写 dockerfiles支持如下语法命令: 1.FROM <image name> 所有的dockerfile都必须以from命令 ...

  3. Asp.Net Core MVC项目实现多语言（Globalization/Localization）

    正好最近手上在给一个Razor MVC项目实现一个多语言功能,叫Globalization也好,Localization也好,whatever.最终要实现的效果呢,就是一键切换全站语言,并且开发的时候 ...

  4. Implement a Linked List

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Lin ...

  5. Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  6. javacpp-opencv图像处理之2：实时视频添加图片水印，实现不同大小图片叠加，图像透明度控制，文字和图片双水印

    欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...

  7. Java代码编写规范（不是标准规范，自行整理，无须纠结）

    最近回过头来给以前的项目增加功能,发现之前写的注释非常不全,代码也非常的不整洁,有些地方写的''窝七八烂的,看着很不舒服:又恰好经理最近也经常跟我提起代码规范,我们就讨论了一下代码规范的重要性和必要性 ...

  8. Spring学习（7）--- @Required注解

    @Required注解是用于bean属性的setter方法 这个注解仅仅表示,受影响的bean属性必须在配置时被填充,通过在bean定义胡通过自动装配一个明确的属性值 package com.mypa ...

  9. 走进BFC

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位: Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由 ...

  10. 浅谈卷积神经网络及matlab实现

    前言,好久不见,大家有没有想我啊.哈哈.今天我们来随便说说卷积神经网络. 1卷积神经网络的优点 卷积神经网络进行图像分类是深度学习关于图像处理的一个应用,卷积神经网络的优点是能够直接与图像像素进行卷积 ...