实例解说AngularJS在自动化测试中的应用
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)。
作者:武贯祥
来源:宜信技术学院
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
如何选型一个合适的框架-分布式任务调度框架选型
1.背景 定时任务是大家再开发中一个不可避免的业务,比如在一些电商系统中可能会定时给用户发送生日券,一些对账系统中可能会定时去对账。大概再很久以前每个服务可能就一台机器,再这台机器上直接搞个Timerschedule基本上就能满足我们的业务需求,但是随着时代的变迁,单台机器已经远远不能满足我们的需要,这个时候我们可能需要10台,20台甚至更多机器来运行我们的业务,接受我们的流量,这就是我们所说的横向扩展。但是这里就有个问题,这么多台机器如果还用我们的Timerschedule去做会发生什么呢?再上面的电商系统中有可能会给某个用户发很多张生日券,对公司造成很多损失,所以我们需要一些其他方法,让定时任务在多台机器上只执行一次。 这里想问下大家在没有了解过或使用过分布式任务调度框架之前大家是如何做定时任务的呢?在Spring项目中大家肯定都知道Spring-Scheduler,只需要在Spring中的bean的对应方法上加上@Scheduler注解即可完成我们的定时任务,但是光是用这个注解还远远不能保证定时任务执行多次,我们需要一些其他手段的保证,一般来说方法可能不外乎下面几种(都是基于Sp...
- 下一篇
机器学习在高德起点抓路中的应用实践
导读:高德地图作为中国领先的出行领域解决方案提供商,导航是其核心用户场景。路线规划作为导航的前提,是根据起点、终点以及路径策略设置,为用户量身定制出行方案。 起点抓路,作为路线规划的初始必备环节,其准确率对于路线规划质量及用户体验至关重要。本文将介绍高德地图针对起点抓路准确率的提升,尤其是在引入机器学习算法模型方面所进行的一些探索与实践。 什么是起点抓路 首先,我们来简单介绍一下什么是起点抓路。起点抓路是指针对用户发起的路线规划请求,通过获取到的用户定位信息,将其起点位置绑定至实际所在的道路。 从高德地图App可以看到,用户进行路线规划时选择起点的方式有以下三种: 1.手动选点(用户在地图上手动标注所处位置)。 2.POI选点(Point of Interest,兴趣点,在地理信息系统中可以是商铺、小区、公交站等地理位置标注信息)。 3.自动定位(通过GPS、基站或WiFi等方式自动定位所在位置)。 三种方式中,用户手动选点及POI选点这两种方式的位置信息相对准确,起点抓路准确率相对较高。 而自动定位起点的方式,由于受GPS、基站、网络定位精度影响,定位坐标易发生漂移,定位设备抓取的位...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果