angular还有人用吗,reactangular

2020-10-12 阅读 魏涵涵整理

内容简介:angular框架本文主要介绍了angularjs工具angular smart,它可以自动完成用户界面,包括使用隔离作用域绑定指令和承诺。为了供您参考,我们最近在论坛中添加了一angular能做什么...

这篇文章主要介绍了简介可以自动完成UI的AngularJS工具angular-smarty,包括其中隔离作用域绑定指令符和promise的使用,需要的朋友可以参考下

我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上。

这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。

它很有意思,也是用AngularJS构建的!我们希望Smarty能够:通过用户的给定输入(一个前缀),通过一个HTTP请求后自动提供建议显示一个建议的下拉列表当用户输入时更新足够快,能够跟得上用户的输入导航直观且能够关闭可重用以往没有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请求(通过内建的$httpService)。

我们决定用$http的可选配置参数($http.get(requestUrl,{cache:true}))来缓存结果。

这是提升性能的一个很简单的方法。

我们还写了自定义的Directive和Service来满足我们的特定需求:smartySuggestorService:smartySuggestor提供了一个getSmartySuggestions()函数,用来接受用户生成的前缀作为它的参数,并通过http请求访问我们后端的suggestor服务来得到自动完成的建议。

(见要求1)。

smartyInputDirective:我们所面临的一个挑战是,定义出一个用户和下拉列表之间的所有可能的交互,并且写测试用例,以确保在开发期间和开发之后,这些功能都是完好的。

我们使用一个Directive(smartyInput)来包含用户和下拉列表之间所有可能发生的交互(见要求6),同时,我们使用内建的ng-mouseover和ng-click指令(Directive)来定义下拉列表和鼠标事件之间的交互。

正如我前边所提到的,我们所面临的一个挑战是我们要确保我们没有破坏掉所有用户和下拉列表之间可能发生的交互方式。

为了追踪这些用户交互,并确保我们没有在开发的过程中破坏掉它,我们使用了Jasmine测试框架。

Jasmine结合这angular-mocks一块儿使用,可以方便我们为smarty写包含描述的测试用例,像我们可以为下拉列表写点击外部应该会消失(shoulddisappearonoutsideclick),可以为请求表单的输入写按回车时应该填充上合适的值(should,onenter,fillwiththeappropriatevalue)。

学习总结尽管简洁实用的AngularJS框架现在对我来讲,是可以轻松读懂的,但是确实要花些时间来学习。

隔离作用域绑定指令符和promise是我学习过程中特别棘手的两项专题。

当我研究隔离作用域时,我发现自己十分希望能看到更多的关于人们如何在他们的项目中使用不同绑定的例子,所以下面我为每种绑定类型给出一个例子。

=:本地和父作用域之间的双向数据绑定控制器:?1$scope.selected=-1;HTML:?1

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

:本地与父作用域之间的单向数据绑定控制器:?1$scope.setSelected=function(newValue){...};HTML:?1

SmartyInput指令符:?1scope:{select:,...}...scope.select({x:parseInt(scope.index)1});SmartyInput指令符将控制器作用域中的setSelected()函数绑定到指令作用域中的select()函数上,这样可以使指令符在不改变setSelected()函数的情况下使用它。

@:将计算表达式绑定到本地作用域控制器:?1$scope.prefix=HTML:?1SmartySuggestions指令符:?1scope:{prefix:@,...}通过SmartySuggestions指令符,可在建议菜单中显示prefix的值,所以此处使用计算表达式{{prefix}}。

这种绑定方式在多项复杂表达式中更常用,比如:next-index={{selected1}}。

Promisespromise是用于执行异步任务的技术。

一个promise具有一个名为then()的方法,该方法在promise执行时会作为被执行的的回调函数的一个参数。

当异步任务完成,promise会将一段消息传给那个回调函数。

当用户输入的prefix前缀中检测到更改,则promise就会出现在Smarty的代码中,然后我们会用$http执行一个GET请求,用来更新显示给用户建议的列表。

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

?12varpromise=smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data){$scope.suggestions=data;});在getSmartySuggesctions()中,$http.get会返回一个参与服务器响应的promise。

?12345678910111213functiongetSmartySuggestions(prefix){requestParams[query]=escape(prefix.toLowerCase());varpromise=$http.get(requestUrl(),{params:requestParams,cache:true}).then(function(response){returnresponse.data.slice(0,5).map(function(item){returnitem.Name;});});returnpromise;}服务器响应看起来是这样的:?1[{ID:13,Name:PortraitPhotography},{ID:24,Name:CommercialPhotography},{ID:21,Name:PetPhotography},{ID:16,Name:EventPhotography},{ID:26,Name:HeadshotPhotography}]接下来,我们会调用存在于promise中的then()方法,在解析服务器响应回调中进行传递。

then()方法返回一个新的promise,它处理了解析过的响应,并存储到通过getSmartySuggestions()返回的promise中。

解析过的响应看起来是这样的:[PortraitPhotography,CommercialPhotography,PetPhotography,EventPhotography,HeadshotPhotography]。

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

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

作者给您推荐的内容
  1. 当我们使用计算机时,我们经常需要压缩文件,但有时我们找不到它。今天,我们将告诉您,如果右键单击win10系统后弹出窗口中没有“添加到压Win10系统对文件右键之后弹出的窗口中没有“添加到...

  2. 在使用电脑的过程中,开机后显示器一直显示检测信号线,小编今天就来告诉大家碰到这种情况应该怎么处理。01、有可能台式主机和显示器的连接视频线接触不良,或者视频线老化。可以重新尝试...

  3. 怎么看显示器分辨率一键安装系统软件后,显示屏很小,显示效果不新鲜。请在这个时候保持冷静。这不是系统问题或显示问题。一般来说,正确安装显卡驱动程序后,请调整分辨率。...

  4. 电脑一部、word 201301、1.在电脑桌面上找到Word2013,并点击鼠标右键,然后鼠标左键点击“打开”。02、2.打开了Word2013,...

  5. ppt图片如何渐变ppt是如何生成梯度词的?ppt渐变填充在哪里...

  6. 第一步:我们打开百度,页面右上角有一个搜索设置。在“搜索”中选百度的搜索记录的清除方法择“不确认搜索”2,然后单击“不显示历史记录”。第三步:请注意,我们应该看到上面的提示:...

  7. OPPO手机近几年来很受大家的欢迎,今天为大家讲解一下oppor11s怎么截屏。01、打开手机,找到手机设置,点击并进入。02、进入设置界面,找到“手势体感”,进入下一界面。03、在该页面点击“快...

  8. ps绘制直线圣诞节快到了。学习ui设计的朋友不妨根据节日学习一下圣诞树的小教程。我希望你能在学习本教程的过程中了解一些小知识。这里有一些教程的图片。ps的三维绘制工具...

  9. 制作员工考勤表,我们需要输入员工的基本信息,如:编号、姓名、职位等,以及本月每天的考勤情况。本文将以excel2019为例做具体介绍。01、首先,我们需要制作表头。我们打开excel2019,然后我们...

  10. office365密钥激活码Office365是2011年6月28日正式发布的一套Office应用程序。使用这个软件的大多数人都是办公室工作人员。使用过它的用户知道这个软件非常有用和强大,office密钥2016激活码...