简介可以自动完成UI的AngularJS工具angular-smarty


Posted in Javascript onJune 23, 2015

简介可以自动完成UI的AngularJS工具angular-smarty

我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上。这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。它很有意思,也是用AngularJS构建的!

我们希望Smarty能够:

  1.     通过用户的给定输入 (一个前缀),通过一个HTTP请求后自动提供建议
  2.     显示一个建议的下拉列表
  3.     当用户输入时更新
  4.     足够快,能够跟得上用户的输入
  5.     导航直观且能够关闭
  6.     可重用

以往没有AngularJS的经验,这个项目是我使用这个框架的入门项目。它真的成为了一次宝贵的学习经验,而且我发现这个框架许多方面相互借鉴地很好且能很好地符合我上面列出的要求。当然,还有一些问题尚在学习过程中!

AngularJS的乐趣所在

我最喜欢Angular的一点是它是如何分解成具有明确目的的概念的。Smarty广泛使用了其中的两个概念——Directives 和 Services。Directive和DOM绑定在了一起,用来管理和元素之间的交互;而Service通过依赖注入的方式为Controller和Directive提供了独立的可以重用的逻辑。

Angular提供了很多内建的Directive和Service,我们在这个项目中使用到了其中的多个。

    为了显示建议(见要求2),我们使用了ngIf 和 ngRepeat 指令来有条件的显示和填充建议下来列表。

    为了实现当用户输入的时候更新建议内容(见要求3),我们使用了ngModel 指令将$scope上前缀变量上输入元素的请求和Scope上的$watch方法双向绑定起来,用来监听前缀的变化。

    我们需要考虑的一件事是这个自动完成功能的更新速度可能跟不上用户的输入速度(见要求4)。因为每当前缀的值发生变化时,Smarty都要发送一个HTTP请求(通过内建的$http Service)。我们决定用 $http 的可选配置参数($http.get(requestUrl, {cache: true}))来缓存结果。这是提升性能的一个很简单的方法。

我们还写了自定义的Directive和Service来满足我们的特定需求:

    smartySuggestor Service:smartySuggestor 提供了一个getSmartySuggestions()函数,用来接受用户生成的前缀作为它的参数,并通过http请求访问我们后端的suggestor服务来得到自动完成的建议。(见要求1)。

    smartyInput Directive: 我们所面临的一个挑战是,定义出一个用户和下拉列表之间的所有可能的交互,并且写测试用例,以确保在开发期间和开发之后,这些功能都是完好的。我们使用一个Directive(smartyInput)来包含用户和下拉列表之间所有可能发生的交互(见要求6),同时,我们使用内建的ng-mouseover 和 ng-click 指令(Directive)来定义下拉列表和鼠标事件之间的交互。

正如我前边所提到的,我们所面临的一个挑战是我们要确保我们没有破坏掉所有用户和下拉列表之间可能发生的交互方式。为了追踪这些用户交互,并确保我们没有在开发的过程中破坏掉它,我们使用了Jasmine测试框架。Jasmine结合这angular-mocks一块儿使用,可以方便我们为smarty写包含描述的测试用例,像我们可以为下拉列表写“点击外部应该会消失”("should disappear on outside click"),可以为请求表单的输入写“按回车时应该填充上合适的值” (“should, on enter, fill with the appropriate value”)。

学习总结

尽管简洁实用的AngularJS框架现在对我来讲,是可以轻松读懂的,但是确实要花些时间来学习。隔离作用域绑定指令符和promise是我学习过程中特别棘手的两项专题。当我研究隔离作用域时,我发现自己十分希望能看到更多的关于人们如何在他们的项目中使用不同绑定的例子,所以下面我为每种绑定类型给出一个例子。
=:本地和父作用域之间的双向数据绑定

控制器:
 

$scope.selected = -1;

HTML:
 

<input type="text" smarty-input index="selected">

SmartyInput指令符:
 

scope: {index: "=", ...}

SmartyInput双向绑定指令符将位于控制器作用域的selected绑定到指令作用域的index索引上面,这样可以使得在index索引(建议列表中当前选定的索引)中的变化结果与指令(例如用户按向上/向下箭头)的相互作用会传播到控制器。

&: 本地与父作用域之间的单向数据绑定

控制器:
 

$scope.setSelected = function(newValue) {...};

HTML:
 

<input type="text" smarty-input select="setSelected(x)">

SmartyInput指令符:
 

scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});

SmartyInput指令符将控制器作用域中的setSelected()函数绑定到指令作用域中的select()函数上,这样可以使指令符在不改变setSelected()函数的情况下使用它。
@:将计算表达式绑定到本地作用域

控制器:
 

$scope.prefix = ""

HTML:
 

<div smarty-suggestions prefix="{{prefix}}">

SmartySuggestions指令符:
 

scope: {prefix: "@", ...}

通过SmartySuggestions指令符,可在建议菜单中显示prefix的值,所以此处使用计算表达式{{prefix}}。这种绑定方式在多项复杂表达式中更常用,比如:next-index=“{{selected + 1}}”。

Promises

promise是用于执行异步任务的技术。一个promise具有一个名为then()的方法,该方法在promise执行时会作为被执行的的回调函数的一个参数。当异步任务完成,promise会将一段消息传给那个回调函数。当用户输入的prefix前缀中检测到更改,则promise就会出现在Smarty的代码中,然后我们会用$http执行一个GET请求,用来更新显示给用户建议的列表。

这个过程看起来是这样的:

当$scope.$watch在$scope.prefix(请注意,此处绑定到用户UI输入界面)的值中注册了一个更改,此时会调用getSmartySuggesction()。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {
  $scope.suggestions = data;});

在getSmartySuggesctions()中,$http.get会返回一个参与服务器响应的promise。
 

function getSmartySuggestions(prefix) {
  requestParams["query"] = escape(prefix.toLowerCase());
  var promise = $http.get(requestUrl(),
    {
      params: requestParams,
      cache: true
    }
  ).then(function(response) {
    return response.data.slice(0, 5).map(function(item) {
      return item.Name;
    });
  });
  return promise;}

服务器响应看起来是这样的:

[{"ID":13,"Name":"Portrait Photography"},{"ID":24,"Name":"Commercial Photography"},{"ID":21,"Name":"Pet Photography"},{"ID":16,"Name":"Event Photography"},{"ID":26,"Name":"Headshot Photography"}]

接下来,我们会调用存在于promise中的then()方法,在解析服务器响应回调中进行传递。then()方法返回一个新的promise,它处理了解析过的响应,并存储到通过getSmartySuggestions()返回的promise中。

解析过的响应看起来是这样的:[“Portrait Photography”, “Commercial Photography”, “Pet Photography”, “Event Photography”, “Headshot Photography”]。

最终,回到$scope.$watch,我们调用promise中的then()方法,为变量suggestions分配这些解析过的响应。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);
promise.then(function(data) {
  $scope.suggestions = data;
});

 

Javascript 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
node.js入门教程
Jun 01 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
js闭包所用的场合以及优缺点分析
Jun 22 #Javascript
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
浅谈Python 对象内存占用
2016/07/15 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
企业出纳岗位职责
2014/03/12 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
运动会主持人开幕词
2016/03/04 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
Go使用协程交替打印字符
2021/04/29 Golang