angular.bind

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

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

self:object  对象; fn的上下文对象,在fn中可以用this调用

fn:function; 绑定的方法

args:传入fn的参数

使用代码: 

  1. var obj = { name: "Any" };
  2. var fn = function (Adj) {
  3. console.log(this.name + "is a boy!!! And he is " + Adj + " !!!");
  4.   };
  5. var f = angular.bind(obj, fn, "handsome");
  6. f();//Any is a boy!!! And he is handsome!!!
  7. var t = angular.bind(obj, fn);
  8. 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应用的依赖模块

使用代码:

  1. <div id="ngApp">
  2. <div ng-controller="testCtrl as ctrl">
  3. {{ctrl.value}}
  4. </div>
  5. </div>
  1. (function () {
  2. angular.module("Demo", [])
  3. .controller("testCtrl", testCtrl);
  4. function testCtrl() {
  5. var vm = this;
  6. vm.value = "Hello World";
  7. }
  8. angular.bootstrap(document.getElementById("ngApp"), ["Demo"]);
  9. }());

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

angular.copy

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

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

source:被拷贝的对象

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

使用代码:

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

对Angular API 逐个的自己翻译一次,然后写能运行成功的代码,并把学习记录下来...

Angular - - angular.bind、angular.bootstrap、angular.copy的更多相关文章

  1. html、css/bootStrap、js/Jquery、ajax与json数据交互总结

    设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的flo ...

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

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

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

  4. Angular Js 与bootstrap, angular 与 vue.js

    今天突然接到电话, 问我他们的区别  虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...

  5. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  6. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  7. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  8. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  9. Angular4.0引入第三方框架,eg: bootstrap、jquery

    最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...

  10. bootstrap、angularJS、nodeJs、reactJs视频教程

    bootstrap.angularJS.nodeJs.reactJs视频教程 发布时间:『 2017-06-25 19:50』  博客类别:资源下载  阅读(74) 评论(0) 智能社与达内哪个好?说 ...

随机推荐

  1. java集合框架工具类Collections,集合的操作

    1 import java.util.*; public class asList { public static void main(String args[]) { // int arr[] = ...

  2. Textbox服务器控件

    <body> <form id="form1" runat="server"> <div> 姓名:<asp:TextB ...

  3. How to install / setup /upgrade PHP 5.5.x on Ubuntu 12.04 LTS

    原文:http://www.dev-metal.com/how-to-setup-latest-version-of-php-5-5-on-ubuntu-12-04-lts/ 最近遇到了要在ubunt ...

  4. TCP/IP Protocol Fundamentals Explained with a Diagram

    最近准备系统学习网络相关的知识,主要学习tcp/ip, websocket 知识. 原文地址:http://www.thegeekstuff.com/2011/11/tcp-ip-fundamenta ...

  5. Gulp自动构建前端开发一体化

    gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自 ...

  6. [转] MMO即时战斗:地图角色同步管理和防作弊实现

    一.前言 无论是端游.页游.手游如果是采用了MMO即时战斗游戏模式,基本都会遇到同屏多角色实时移动.释放技能.战斗等场景,于是自然也需要实现如何管理同屏内各种角色的信息同步:例如角色的位置.以及角色身 ...

  7. webapp之路--apple私有属性apple-touch-icon

    以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...

  8. LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods

    我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...

  9. android4.0 的图库Gallery2代码分析(四) 之相册的数据处理以及显示

    最近迫于生存压力,不得不给人兼职打工.故在博文中加了个求点击的链接.麻烦有时间的博友们帮我点击一下.没时间的不用勉强啊.不过请放心,我是做技术的,肯定链接没病毒,就是我打工的淘宝店铺.嘻嘻.http: ...

  10. [poj解题]1017

    Packets Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 41014   Accepted: 13776 Descrip ...