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

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

1、什么是AngularJS ?

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

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

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

2、AngularJS的核心思想

一、在AngularJS中经过数据视图双向绑定实现视图与业务逻辑解耦，这将提升代码的可测试性；

二、遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合；

三、将测试与应用程序编写放在同等重要的位置，在编写模块的同时编写测试。由于各组件的松耦合，使得这种测试得以实现；

四、 应用程序页面端与服务器端解耦。两方只需定义好通讯API，便可并行开发。

3、简单的栗子

问题：假设咱们须要编写一个手机列表，支持对手机信息进行模糊搜索，且按指定字段排序，要怎么实现呢？

如上图所示，几乎没有DOM操做，更专一于业务逻辑！

下面编写HTML

编写控制器Controller

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

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

4、指令

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能够是一个属性，也能够是一个标签。

5、模块和服务

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

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

• 配置块：在实例工厂（provider）注册和配置阶段运行。只有工厂、常量才能够注入到配置块中（常量的配置要放在前面）；

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

AngularJS应用中的服务是一些用依赖注入捆绑在一块儿的、可替换的对象。这些对象能够提供一些封装好的逻辑操做，以供调用。 AngularJS内置了不少有用的服务，例如前面提到的$timeout、$http等，咱们能够经过使用内置服务完成大部分业务逻辑。但不少时候咱们还须要自定义服务：

服务的使用

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

6、依赖注入

咱们能够将须要的服务比做一件工具，好比一把锤子，那咱们要怎么得到锤子呢？

第一种方法：本身打造一把锤子。若是锤子的工艺改变了，咱们就须要从新制造。至关于咱们在程序中new了一个服务，服务的实现改变时，只能修改代码，这将产生风险。

第二种方法：咱们找到一间工厂，告诉工厂锤子的型号，而后工厂为咱们制造。这时候就不须要关系锤子是怎么作的，咱们只管使用。可是这种方式仍是很麻烦，咱们须要知道工厂在哪。相似于在代码中经过工厂方法获取咱们想要的服务。这种方会对工厂产生依赖。

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

6.1 AngularJS中的依赖注入

第一种方式：经过方法参数名声明依赖。这种方式不推荐使用，由于js文件压缩后方法参数名会改变。

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

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

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

一、$scope的生命周期，这是一个至关重要的内容。

二、AngularJS对于表单的支持。AngularJS内置了表单的服务，能够大大提升开发效率。

三、指令的详细定义方式。不少时候，简单的指令写法不能知足需求，须要更深度的定制指令。

四、如何进行测试。在AngularJS中，测试很是简单，可使用其它的测试库进行测试（如Jasmine）。

做者：武贯祥

来源：宜信技术学院