AngularJs angular.bind、angular.bootstrap、angular.copy

angular.bind

返回一个调用self的函数fn（self代表fn里的this）.可以给fn提供参数args（*）.这个功能也被称为局部操作，以区别功能。

格式：angular.bind(self,fn,args);

self：object 对象； fn的上下文对象，在fn中可以用this调用

fn：function；绑定的方法

args：传入fn的参数

使用代码：　

var obj = { name: "Any" };
var fn = function (Adj) {console.log(this.name + "is a boy!!! And he is " + Adj + " !!!");};
var f = angular.bind(obj, fn, "handsome");
f();//Any is a boy!!! And he is handsome!!!
var t = angular.bind(obj, fn);
t("ugly");// Any is a boy!!! And he is ugly!!!

bind顾名思义绑定的意思，那么假如我们要把A绑到B上，那么必须又有绑定的东西和被绑定的东西。这里需要的就一个对象和一个函数。那么怎么绑？本兽的理解是把对象“绑”到函数的this上去执行，这时候fn的this就等于obj了，至于第三个参数，可有可无，看需求，如果函数需要传入参数，那么我们可以把angular.bind的第三个参数放上去，这就是传入fn函数的参数了。

案例中第一种写法是定义绑定的时候就把fn所需的参数传进去了，调用的时候直接用，而案例中第二种写法是先绑定，在调用执行的时候再给fn传参，效果是一样的...

angular.bootstrap

使用这个功能来手动启动angular应用。基于ngScenario的端对端测试不能使用bootstrap手动启动，需要使用ngApp.

Angular会检测应用在浏览器是否已启动并且只允许第一次的启动，随后的每次启动都将会导致浏览器控制台报错.

这可以防止应用出现多个Angular实例尝试在Dom上运行的一些奇异结果.

格式：angular.bootstrap(element,[modules]);

element：Dom元素，angular应用启动的根节点

modules：数组，angular的应用程序模块

使用代码：

  <div id="ngApp"><div ng-controller="testCtrl as ctrl">{{ctrl.value}}</div></div>

  (function () {angular.module("Demo", []).controller("testCtrl", testCtrl);function testCtrl() {this.value = "Hello World";}angular.bootstrap(document.getElementById("ngApp"), ["Demo"]);}());

一般来说，我们写ng程序，都会在页面Dom元素上写ngApp指令用来启动Angular程序，但是也可能出现一些特殊情况需要我们在启动之前干些什么或者需要我们手动启动应用程序，这时候angular.bootstrap就派的上用场了。

angular.copy

针对对象或数字创建一个深层的拷贝。

格式：angular.copy(source, [destination]);

source：被拷贝的对象

destination：接收的对象 [注意：参数类型是对象或数组]

使用代码：

var objA, objD = []; //objA:undefined objD:[]
var objB = { text: "Hello World" };
var objC = {text:"Hai",value:"Test"};
objA = angular.copy(objB); // objA:{ text:"Hello World"} objB:{ text:"Hello World"}
angular.copy(objC, objD);// objC:{text: "Hai", value: "Test"} objD:[text: "Hai", value: "Test"]

本兽对Angular API 逐个的学习并且进行翻译，然后写能运行成功的代码，并把学习过程进行整理记录及分享...

转载于:https://www.cnblogs.com/ys-ys/p/4909786.html

AngularJs angular.bind、angular.bootstrap、angular.copy相关推荐

angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
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 的目的是 ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
Angular (SPA) WebPack模块化打包.按需加载解决方案完整实现参考文章: (1)Angular (SPA) WebPack模块化打包.按需加载解决方案完整实现 (2)https:// ...
Angular标准 commit message 提交信息、commit 验证、standard-version 自动版本更替和 changelog 输出
辅助提交工具因为要使用 commitizen 工具来辅助提交信息填写 npm install commitizen -g 进而需要先安装 node 环境使用在项目目录下 # 需要先 npm in ...
Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）
1. Angular 图片.条件判断(*ngIf.[ngSwitch].属性[ngClass].[ngStyle]) 1.1 图片 1.1.1 本地图片: 我们在assets目录下面新建images文 ...
Angular表单中的FormControl、FormGroup、FormBuilder、FormArray
Angular表单中的FormControl.FormGroup.FormBuilder.FormArray 要使用响应式表单,首先需要在@angular/forms包中导入ReactiveForms ...
前端三大主流框架React、Vue.js、Angular的优缺点分析
对于一个前端人员来说,熟练掌握框架可以大大提高开发效率,同时框架也是他们与企业谈判薪资的底气.很多学习前端的人在完成对基础知识的掌握之后都要学习框架,接下来就给大家讲解三大主流框架React.Vue. ...
Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的
what is main.js and main.js.map? and other stuff 问题 chunk {main} main.js, main.js.map (main) 24.5 kB ...

AngularJs angular.bind、angular.bootstrap、angular.copy

AngularJs angular.bind、angular.bootstrap、angular.copy相关推荐

最新文章

热门文章