angular API

最新推荐文章于 2021-02-15 13:30:47 发布

茶与木糖醇

最新推荐文章于 2021-02-15 13:30:47 发布

阅读量841

点赞数

分类专栏： Angular 文章标签： angular api

Angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

angular API

bind bootstrap copy uppercase lowercase fromJson toJson element noop identity

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.uppercase

将指定的字符串转换成大写

格式：angular.uppercase(string);

string:被转换成大写的字符串。

使用代码：

  var str = "ABCabc";
  var upperCase = angular.uppercase(str);//ABCABC

angular.lowercase

将指定的字符串转换成小写

格式：angular.lowercase(string);

string:被转换成小写的字符串。

使用代码：

　var str = "ABCabc";
  var lowerCase = angular.lowercase(str);//abcabc

这两个方法的翻译也不是很难，也很容易理解。我们在做比较或者做一些字符串处理的时候，需要把大小写都存在的字符串转换为全部大写或者全部小写，这两个方法就是在这时候使用的...

angular. fromJson

反序列化JSON字符串

格式：angular.fromJson(str)

str: json格式的字符串

使用代码：

var str = '[{ "name": "A", "age": "1" }, { "name": "B", "age": "2" }, { "name": "C", "age": "3" }]';
var con = angular.fromJson(str);

//con=[{ "name": "A", "age": "1" }, { "name": "B", "age": "2" }, { "name": "C", "age": "3" }]

angular. toJson

序列化JSON字符串

格式：angular.toJson(str)

str: 要转string（json格式的字符串）的json数据。

使用代码：

var str = [{ "name": "A", "age": "1" }, { "name": "B", "age": "2" }, { "name": "C", "age": "3" }];
var con = angular.toJson(str);  //con = "[{ \"name\": \"A\", \"age\": \"1\" }, { \"name\": \"B\", \"age\": \"2\" }, { \"name\": \"C\", \"age\": \"3\" }]"

以上是这两个方法的使用，angular.fromJson是将json格式的字符串转换为json格式数据，江湖人称“反序列化JSON字符串”；angular.toJson是将json格式的数据转换“json格式的字符串”（虽然有点绕口，但其本质是字符串），江湖人称“序列化JSON字符串”。

angular.element

将DOM元素或者HTML字符串一包装成一个jQuery元素。

格式：angular.element(element);

element：包装成jquery对象的html字符串或者dom元素

jqLite提供的方法：

addClass()
after()
append()
attr()
bind() – 不支持命名空间,选择器和事件数据
children() – 不支持选择器
clone()
contents()
css()
data()
empty()
eq()
find() – 限定通过标签名称查找
hasClass()
html()
next() – 不支持选择器
on() – 不支持命名空间或选择器
off() –不支持命名空间或选择器
one() – 不支持命名空间或选择器
parent() – 不支持选择器
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler() -通过一个虚拟事件对象来处理。
unbind() – 不支持命名空间
val()
wrap()

事件：

$destory:当Dom被移除时， Angular 拦截所以的jqLite或者jquery Dom对象，销毁api和事件。这个事件能在Dom被移除前用来清除任何Dom上的相关。

方法：

controller(name)：检索当前元素或其父元素的controller，默认情况下，检索与ngController相关的controller，如果name是以驼峰模式命名的指令名称，那么这个指令的controller就是这样（如’ngModel’）。

injector():检索当前元素或其父元素的依赖注入。

scope():检索当前元素或其父元素的scope。

isolateScope():如果有一个scope直接附着在当前元素，检索一个隔离的scope，这仅用于元素包含一个创建了新的隔离的scope的指令，这个元素调用scope()总是返回原来的非隔离scope。

inheritedData():和data()一样，但是会沿着Dom走直到值被找到或者走到顶级Dom元素。（由此可见，应该是向上传播的意思。）

使用代码：

  <div ng-app="Demo">
    <div ng-controller="testCtrl as ctrl">
        <div id="myDiv">Hello World!!!</div>
    </div>
  </div

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
      var element = angular.element("#myDiv");
      console.log(element)
      //element是个对象
      //第一个属性就是id为myDiv的div对象;
      //第二个属性名为content,值是document;
      //第三个属性名是length,值为1;第四个属性名是selector,值是"#myDiv"
    };
  }());

特别提醒哦，在controller里操作Dom是要剁手的...Ng如果需要对Dom进行操作则需要在指令里处理代码，像我们在Ng开发中封装一些jQuery插件使用时，也是通过指令来的。

angular.element把Dom元素或者HTML的字符串包装成jQuery对象，假如你在angular之前引用了jQuery，那么这就相当于jQuery的选择器了，你也可以把jQuery的一些dom操作对他使用；那么如果你就是这么任性，不引用jQuery呢？别着急，ng自带jqLite，上面也把jqLite对这个方法包装成的对象提供的一些方法都列出来了，有需要的可以去看看，不过毕竟是轻量版的，功能没那么齐全，如需更多操作，可在angular[.min].js文件之前引入jQuery文件。

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/或者其他不能执行的对象，那么控制台是直接报错的...