文档章节

实例解说AngularJS在自动化测试中的应用

宜信技术学院
 宜信技术学院
发布于 07/16 11:38
字数 1848
阅读 282
收藏 0

7月25日晚8点,线上直播,【AI中台——智能聊天机器人平台】,点击了解详情。

一、什么是AngularJS ?

1、AngularJS是一组用来开发web页面的框架、模板以及数据绑定和丰富UI的组件;

2、AngularJS提供了一系列健壮的功能,以及将代码隔离成模块的方法;

3、AngularJS于2009年发布第一个版本,由Google进行维护,压缩版94k。

二、AngularJS的核心思想

1、在AngularJS中通过数据视图双向绑定实现视图与业务逻辑解耦,这将提高代码的可测试性;

2、遵循MVC模式开发,鼓励视图、数据、逻辑组件间松耦合;

3、将测试与应用程序编写放在同等重要的位置,在编写模块的同时编写测试。因为各组件的松耦合,使得这种测试得以实现;

4、 应用程序页面端与服务器端解耦。两方只需定义好通信API,即可并行开发。

三、简单的栗子

问题:假设我们需要编写一个手机列表,支持对手机信息进行模糊搜索,且按指定字段排序,要怎么实现呢?

如上图所示,几乎没有DOM操作,更专注于业务逻辑!

下面编写HTML

编写控制器Controller

PhoneListCtrl 控制器。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)这两个服务都是angularjs内置服务,服务是可以自定义的。

$scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中,这时前台UI会自动响应更新。

四、指令

4.1 什么是指令?

指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行。这使得指令可以为DOM指定行为或者改变DOM的结构。例如ng-controller、ng-src、ng-model等。

4.2 AngularJS的编译

4.3 简单的AngularJS指令写法

自定义指令的一般格式:

angular.application(‘myApp’, []).directive(‘myDirective’,function(){
//一个指令定义对象
return{ };  //通过设置项来定义指令,在这里进行覆写
});

下面我们来看一个简单的自定义指令的例子:

  • module:这个方法将新建一个模块。AngularJS以模块管理代码。
  • directive:在模块中新建指令,指定的方法在编译步骤会被执行,执行后返回一个自定义的链接函数,这个链接函数在完成双向绑定后执行。
  • Restrict:它告诉AngularJS这个指令在DOM中可以何种形式被声明。E(元素), A(属性,默认值), C(类名)。
  • scope :可以被设置为true或一个对象。默认值是false。当scope设置为true时,会从父作用域继承并创建一个新的作用域对象。有三种绑定策略@ = &。
  • Template:一段HTML文本,或一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串。

4.4 使用指令

  • ng-app="MyModule":在angularjs启动时指定初始化的模块(module)。当前指定的是自定义的模块。
  • drink water="{{pureWater}}":调用自定义的drink指令,将$scope中的pureWater属性赋值给指令中的water属性。
  • drink可以是一个属性,也可以是一个标签。

五、模块和服务

在AngularJS中,模块负责组织、启动、实例化应用。

模块的两个部分,一个是配置块,另一个是运行块。

  • 配置块:在实例工厂(provider)注册和配置阶段运行。只有工厂、常量才可以注入到配置块中(常量的配置要放在前面);

  • 运行块:注入器(injector)被创建后执行,被用来启动应用。实例和常量、变量等都能被注入。

AngularJS应用中的服务是一些用依赖注入捆绑在一起的、可替换的对象。这些对象可以提供一些封装好的逻辑操作,以供调用。 AngularJS内置了很多有用的服务,例如前面提到的$timeout、$http等,我们可以通过使用内置服务完成大部分业务逻辑。但很多时候我们还需要自定义服务:

服务的使用

上图的代码中定义了一个服务notify,它依赖另外一个服务$window。$window中封装了window对象的方法,定义了一个控制器myController,并为这个控制器注入了notify服务,同时在控制器的scope中定义了一个方法callNotify来调用服务。$inject是依赖注入的一种方式,请参看下文依赖注入章节。

六、依赖注入

我们可以将需要的服务比作一件工具,比如一把锤子,那我们要怎么获得锤子呢?

第一种方法:自己打造一把锤子。如果锤子的工艺改变了,我们就需要重新制造。相当于我们在程序中new了一个服务,服务的实现改变时,只能修改代码,这将产生风险。

第二种方法:我们找到一间工厂,告诉工厂锤子的型号,然后工厂为我们制造。这时候就不需要关系锤子是怎么做的,我们只管使用。但是这种方式还是很麻烦,我们需要知道工厂在哪。类似于在代码中通过工厂方法获取我们想要的服务。这种方会对工厂产生依赖。

第三种方法:我们在门前贴张单子,声明我们需要一把什么型号的锤子,第二天就有人默默地送来了一把锤子。这在现实生活中简直是痴心妄想,但这种方式确实很轻松,不需要考虑任何东西,我们只关注使用锤子。这就是程序里的依赖注入。只要声明了需要什么,在使用的时候就可以得到什么。

6.1 AngularJS中的依赖注入

第一种方式:通过方法参数名声明依赖。这种方式不推荐使用,因为js文件压缩后方法参数名会改变。

第二种方式:声明一个数组,依赖列表放数组的前部,注入目标放数组最后一个元素。推荐使用这个方法。

第三种方式:通过$inject属性来声明依赖列表。

七、文章里没有介绍但需去了解的

1、$scope的生命周期,这是一个相当重要的内容。

2、AngularJS对于表单的支持。AngularJS内置了表单的服务,可以大大提高开发效率。

3、指令的详细定义方式。很多时候,简单的指令写法不能满足需求,需要更深度的定制指令。

4、如何进行测试。在AngularJS中,测试非常简单,可以使用其它的测试库进行测试(如Jasmine)。

作者:武贯祥

来源:宜信技术学院

© 著作权归作者所有

宜信技术学院

宜信技术学院

粉丝 158
博文 119
码字总数 398013
作品 4
东城
私信 提问
Angular CLI 常用命令

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。本文总结了在实际项目中经常会用到的 Angular CLI 命令。 获取帮助() 等同于,跟所有的其他命令行一样...

waylau
2018/11/09
106
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.4K
19
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
159
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7K
22
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26

没有更多内容

加载失败,请刷新页面

加载更多

spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
56分钟前
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部