总结

以上是小编为你收集整理的Angular学习全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/dusf/p/10650332.html

Angular 学习系列 - - angular.bind、angular.bootstrap、angular.copy

高春辉、王春生、朱峰：关于开源创业的 15 件小事

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 逐个的学习并且进行翻译，然后写能运行成功的代码，并把学习过程进行整理记录及分享... 

Angular 学习系列 - - angular.forEach、angular.extend

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

angular.forEach

调用迭代器函数取每一项目标的集合，它可以是一个对象或数组。迭代器函数与迭代器（value、key）一起调用，其中值是一个对象属性或数组元素的值，而数组元素是对象属性的关键或数组元素索引。为函数指定一个可选的上下文。

格式：angular.forEach(obj,iterator,[context]);

obj: 遍历的对象

iterator: 迭代器

[content]: 对象为迭代器函数的上下文（this）

使用代码：

var arr = [{ name: "A", age: "1" }, { name: "B", age: "2" }, { name: "C", age: "3" }];   var _arr = [];
   angular.forEach(arr, function (item, index) {this.push(item.name);
    }, _arr);//_arr = ["A","B","C"]

推荐使用：

var arr = [{ name: "A", age: "1" }, { name: "B", age: "2" }, { name: "C", age: "3" }];   var _arr = [];
   angular.forEach(arr, function (item, index) {
        _arr.push(item.name);
    });//_arr = ["A","B","C"]

item 指的是循环的集合中的对象，index 是当前 item 的索引值。

在项目开发过程中，用到遍历是很正常且平常的事，那么 angular 也给我们提供了这个 api -- angular.forEach。这个和 jquery 的的.each () 方法相似，但貌似他比 jquery 的.each 多了个参数。

angular.extend

复制 src 对象中的属性到 dst 对象中。你可以指定多个源对象。

格式：angular.extend(dst,src)

dst：目标对象

src：copy 源对象（>=1）

使用代码：

var dst = { name: "Any" };  var src_one = { age: "18" };  var src_two = { sex:"male"};
  angular.extend(dst,src_one,src_two);  //dst:{name: "Any", age: "18",sex:"male"} src_one={age:"18"} src_two = {sex:"male"}

这个方法主要是用对象给对象添加属性的，比如我们定义了个对象，然后需要在后面的代码对这个对象进行添加别的对象的属性作为自己的属性，然后这时候我们就需要用到 angular.extend。而且这个方法还可以添加对个对象做为参数，给第目标对象添加属性，即方便又简单  -。-

本兽在一些封装好的插件的源码里看到这个方法也用到挺多，不过总觉得只有自己动手写代码用过了，才能更好的体会到这些方法的好处，仅仅是看下了解下就觉得自己理解了的这种，是不能真正的学到的，这两种学习的具体体会在用到代码的时候就知道了... 建议大家都动手操作。

Angular 学习系列 - - angular.identity 和 angular.noop

高春辉、王春生、朱峰：关于开源创业的 15 件小事

angular.identity

函数返回本身的第一个参数。这个函数一般用于函数风格。

格式：angular.identity()   

使用代码：

(function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);function testCtrl() {         var getResult = function (fn, val) {          return (fn || angular.identity)(val);
      };      var result = getResult(function (n) { return n * 2; }, 3); //  result = 6  var null_result = getResult(null, 3);//  null_result = 3  var undefined_result = getResult(undefined, 3);// undefined _result = 3    };
  }())

angular.noop

一个不执行任何操作的空函数。这个函数一般用于函数风格。

格式：angular.noop();

贴代码：

(function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);function testCtrl() {      var _console = function (v) {          return v * 2;
      };      var getResult = function (fn, val) {          return (fn || angular.noop)(val);
      };      var firstResult = getResult(_console, 3);//6  var secondResult = getResult(null, 3);//undefined  var thirdResult = getResult(undefined, 3);// undefined    };
  }())

这两个 api 的也是有点醉，总的来说呢，这两个方法都是用来写函数的时候用的，根据上面写的 demo 的代码及运行结果来看，感觉他们的作用是用来防止函数传入的是 null 或者 undefined 或者其他不能操作的对象。因为如果去掉这两个后，你在函数调用的时候传入 null/undefined/ 或者其他不能执行的对象，那么控制台是直接报错的...

Angular 学习系列 - - angular.injector、angular.module

高春辉、王春生、朱峰：关于开源创业的 15 件小事

angular.injector

创建一个 injector 对象，调用 injector 对象的方法可用于获取服务以及依赖注入。

格式：angular.injector(modules);

modules:  Array 注入的模块（一个或多个）。

使用代码：

(function () {
    angular.module("firstModule", [])
    .service("firstService", function () {      this._log = function () {
          console.log("Hello World!!!");
      }
  });
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);function testCtrl() {      var injector = angular.injector(["firstModule"]);
      injector.get("firstService")._log();//Hello World!!!    };
  }());

在上面的代码里，我们没有在 angular.module 里对 Demo 模块进行 firstModule 模块的依赖注入，那么是不是就意味我们不能在 Dome 模块里使用 firstModule 模块的函数了咯？其实并不然，Angular 有 $injector 服务来处理注入这件事情。我们这里的 angular.injector 也是依赖这个服务的，所以我们能在 Dome 模块里使用它引入 firstModule 模块，然后调用 firstModule 模块里的方法。

这个方法是创建一个对象，这个对象大家可以打印出来看看，对象上有一些方法，具体关于他的描述将会在学习及翻译到 $injector 的时候详细的讲解。我们这里用到的是 get 方法，使用这个方法获取到 firstModule 模块的 service 服务，然后再执行里面的_log 函数。

angular.module

创建一个全局的可用于检索和注入的 Angular 模块。所有 Angular 模块（Angular 核心模块或者第三方模块）想要在应用里实现，都需要使用这个注入机制。

格式：angular.module(name,[requires],[configFn]);

name :  string  创建的模块名称。

[requires]: 字符串的数组  代表该模块依赖的其他模块列表，如果不依赖其他模块，则为空数组。

[configFn]：对该模块的一些配置。

使用代码：

angular.module("Demo", ["ui.router"],function(){//config })

angular.module 是在 1.3 版本以后必须写上的，野兽在刚使用 Angular 的时候下载的是 1.2.8 的版本，那会启动的时候只需要在根节点的 Dom 元素上写个 ngApp 就好，在 js 里面可以直接 function 个 controller，然后在对应的 div 写上 ng-controller 就好。然而 1.3 版本以后，要求必须定义模块名，用 angular.module 创建这个模块。

这里需要注意的是，第三个参数很少用，他其实就是和.config () 一样，所以我们大多都使用.config () 给模块做配置，这样的写法比较清晰明确，而且可以放在其他 js 里面配置，比较方便。

还有就是第二个参数，今天网上有小伙伴问我，为什么根据某个插件的使用教程文章说的依赖注入该插件的模块名会报错说模块名错误，对于这种问题，如果你需要使用某个插件，但你又不知道或者不确定他的模块名，你可以打开该插件的 js 代码，找到 angular.module ("XXX",[]), 这个 XXX 就是你需要注入到你模块里的模块名，如果有多个 angular.module 的话，那么就看个人能力了，稍微理解下即可知道主模块是哪个...

注意点：

angular.module("xxx",[])  // 声明一个moduleangular.module("xxx")  // 查找指定module

今天关于Angular学习和angular权威教程的介绍到此结束，谢谢您的阅读，有关Angular 学习系列 - - angular.bind、angular.bootstrap、angular.copy、Angular 学习系列 - - angular.forEach、angular.extend、Angular 学习系列 - - angular.identity 和 angular.noop、Angular 学习系列 - - angular.injector、angular.module等更多相关知识的信息可以在本站进行查询。