angular API

2023-10-29

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


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular API 的相关文章

  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • 将指令外部的值传递给父指令时,“错误:输出未定义”

    我有一个 root app 组件 它在模板中是这样定义的 template
  • 获取“回调 URL 与 Auth0 不匹配”

    我有一个 Auth0 客户端 配置了以下回调 URL http 本地主机 4200 http localhost 4200 我可以正常登录 问题是当我导航到应用程序中的某个 URL 时 http localhost 4200 places
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • Angular 9:上传图像时如何将 HEIF 文件格式转换为已知的 Web 格式

    我正在维护一个用 Angular 9 编写的 Web 应用程序 PWA 用户可以在 Cropperjs 中上传图像并裁剪 旋转等 在 iOS 上 新的图像格式 HEIF 正在成为标准 这些用 户抱怨他们无法上传照片 似乎iOS有时会自动转换
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • 包 [email protected] 不满足其同级包的对等依赖性要求?

    我正在尝试在我的 Angular 2 应用程序中安装 ngrx store 模块 我正在使用 npm install 并收到以下错误 npm ERR peerinvalid The package email protected cdn c
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 在 Angular 9 应用程序的生产中同时使用 AOT 和 JIT

    因此 我一直在构建一个 Angular 9 应用程序 其中有一个客户仪表板来管理保存在服务器上的模板 这些模板可以通过激活系统在不同的设备上查看 因此设备与用户绑定 所以让我们说https templates com我们有 login da
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 角度代理配置不起作用

    我不明白我错在哪里 附 已经尝试通过这个答案修复但仍然不起作用 Angular CLI 代理到后端不起作用 https stackoverflow com questions 39809008 angular cli proxy to ba
  • Angular 5 - 在加载数据之前停止未定义对象的错误

    防止控制台中因仍未定义的对象而出现错误的最佳方法是什么 假设我有这个 name string constructor private data DataService this data name subscribe res gt this
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu
  • Angular2 与 ASP.NET 5 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在将 Angular2 与 ASP NET5 gulp 和 typescript 结合使用 当我解决
  • 创建 AoT 兼容的服务工厂

    我正在尝试为缓存服务创建一个服务工厂 主要要求是每次可以使用不同的字符串实例化单个服务 最终的结果会有多个cache每个服务都由唯一定义databaseName 每个缓存可以有一个或多个stores也由唯一定义storeName 其他服务将
  • Angular 5 Http拦截器刷新JWT令牌

    我已经实现了令牌保存 检索的逻辑 并且我也有刷新调用 问题是 当我在 HttpInterceptor 中拦截 403 时 同时进行的其他调用也会刷新令牌 我很乐意保留这些调用 直到我的令牌刷新为止 创建我所说的请求 信号量 Injectab
  • 原生元素聚焦功能不起作用

    我试图通过单击按钮自动聚焦在输入元素上 请参阅打字稿 ViewChild envFilter envFilter ElementRef onFilterSelect this envFilter nativeElement focus 在
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo

随机推荐

  • 【c++模板笔记一】模板的介绍及其重载

    2015年2月11日 周三晴 有一段时间没有更新博客了 这几天在整理前段时间所学的c 知识点就没有更新了 最近开始研究c 的模板的STL 于是开始继续写下自己的一点所得吧 模板和STL都是c 中比较实用的东西 能把我们省下很多事情 简化编码
  • mybaits 代码自动生成

    https github com zhengjunbase codehelper generator GenDaoCode使用方法 主菜单Tools gt Codehelper gt GenDaoCode按键便可生成代码 方法一 点击Gen
  • 蓝桥杯模拟赛B组(大一报了直呼上当)

    这周蓝桥杯举行了模拟赛 需交费 交完后大家发现上当了 没想到这难度居然是小学生水平 这明显是在 咳嗽声 好 回归正题 今天博主给你们带来部分B组题题解 让你们重拾信心 继续进军省赛 目录 第一题 解析 实现 第二题 解析 第三题 解析 代码
  • Daily paper reading

    20180207 Nature Review Studying and modifying brain function with non invasive brain stimulation Brain derived neurotrop
  • ActiveMQ订阅模式持久化实现

    我的诉求是 建一个订阅通道 然后多个客户端监听 当某个客户端掉线后 再上线的时候可以收到它没有接收到的消息 本文主要参考了 使用Spring配置ActiveMQ的发布订阅模式 http nettm iteye com blog 182826
  • 【pytorch冻结网络参数:最全版】

    动机和意义 首先要搞清楚使用为什么要冻结某些层 以及那些层能够被冻结 冻结网络参数的一些动机 避免过拟合 当训练数据较少时 神经网络容易过拟合 即在训练集上表现很好 但在测试集上表现差 冻结一些参数可以减少网络的自由度 避免过拟合 加速训练
  • Java多线程 常见面试题

    1 什么是线程 线程是操作系统能够进行运算调度的最小单位 它被包含在进程之中 是进程中的实际运作单位 程序员可以通过它进行多处理器编程 你可以使用多线程对运算密集型任务提速 比如 如果一个线程完成一个任务要100毫秒 那么用十个线程完成该任
  • Unix系统 - 进程管理

    写在前面 注意 本章除了讲解进程管理 还包含网络编程Socket API的知识 这里写目录标题 一 进程 1 1基础知识 1 1 1进程ID 1 1 2查看进程 1 1 2 父子进程概念 1 1 3得到进程ID的函数 1 2 进程运行 1
  • SpringBoot教学资料6-SpringBoot登录注册功能实现(带简单前端)

    项目样式 SQL CREATE TABLE t user id int 11 NOT NULL AUTO INCREMENT username varchar 32 NOT NULL password varchar 32 NOT NULL
  • JavaScript 教程 (详细 全面)

    文章目录 JavaScript 是什么 JavaScript 简介 1 JavaScript 的历史 2 JavaScript 与 ECMAScript 的关系 3 如何运行 JavaScript 4 JavaScript 具有以下特点 N
  • 题目:根据当月利润,求应发放奖金总数

    题目描述 企业发放的奖金根据利润提成 利润低于或等于10万元时 奖金可提10 利润高于10万元 低于20万元时 低于10万元的部分按10 提成 高于10万元的部分 可提成7 5 20万到40万之间时 高于20万元的部分 可提成5 40万到6
  • 【Docker】Docker容器管理

    1 容器外部操作 1 通过实训平台进入到操作系统界面 在 后输入sudo docker run ubuntu 14 04 bin echo Hello world 命令 然后按Enter键 启动一个ubuntu容器 会输出 Hello Wo
  • 软件测试人员的职业发展路径和技术路线规划

    软件测试人员应该如何规划自己的职业发展路径 如何规划自己的技术路线 下面是我整理的两张图 大家可以参考这两张图 结合自已目前所处的技术水平阶段 自己的性格和特长 去提前定位个人的职业发展方向 规划下一步学习的内容 目录 一 技术路线图 准新
  • redis必杀命令:字符串(String)

    题记 Redis 字符串数据类型的相关命令用于管理 redis 字符串值 基本语法如下 redis 127 0 0 1 6379 gt COMMAND KEY NAME 字符串命令 序号 命令及描述 1 SET key value 设置指定
  • 贵金属白银行情走势图缘何强势?

    自从去年12月中以来 国际现货白银价格已经从底部抬升超过10 许多抓对行情节奏的投资者已经赚到了相当不俗的收益 但作为有专业素养的投资者 必须明白行情运行背后的逻辑 才能在日后的交易中再次占得先机 根据瑞士信贷2017全球财富报告 去年全球
  • VS code For win7 最后支持的一个版本是 1.70.3

    VS code For win7 最后支持的一个版本是 1 70 3 原本地址是 https update code visualstudio com 1 70 2 win32 x64 stable 实际地址 https az764295
  • 解决在Android studio的Button控件下background背景设置不起作用的问题

    Button控件默认的背景是深紫色的 想要修改背景色所以添加了background字段 但是又不起作用 其实是themes xml文件里的 style 标签 的 parent 属性设置不对
  • CentOS7设置IPv4&IPv6

    进入网卡目录 1 cd etc sysconfig network scripts 修改ONBOOT yes 2 vi ifcfg ens33 TYPE Ethernet PROXY METHOD none BROWSER ONLY no
  • 移动端异构运算技术 - GPU OpenCL 编程(基础篇)

    一 前言 随着移动端芯片性能的不断提升 在移动端上实时进行计算机图形学 深度学习模型推理等计算密集型任务不再是一个奢望 在移动端设备上 GPU 凭借其优秀的浮点运算性能 以及良好的 API 兼容性 成为移动端异构计算中非常重要的计算单元 现
  • angular API

    angular API bind bootstrap copy uppercase lowercase fromJson toJson element noop identity angular bind 返回一个调用self的函数fn s