我们最近在论坛上增加了一个自动完成功能(叫做Smarty)，在主页上要求专业人士自我介绍。这是一个非常有用的功能，因为它帮助我们将用户导航到他们真正想去的地方。很有意思，也是用AngularJS打造的！

我们希望Smarty可以：

通过用户给定的输入(一个前缀)，在HTTP请求之后自动提供建议，并显示建议的下拉列表。当用户输入时，它会足够快地更新以跟上用户的输入。导航很直观，可以关闭再使用。这个项目是我使用这个框架的入门项目。真的成为了宝贵的学习经验，我发现这个框架可以在很多方面互相学习，满足上面列出的要求。当然，学习过程中还是存在一些问题！

AngularJS的乐趣

我最喜欢Angular的是它是如何分解成有明确目的的概念的。Smarty广泛使用两个概念，——指令和服务。指令和DOM绑定在一起，管理和元素之间的交互；服务通过依赖注入为控制器和指令提供独立和可重用的逻辑。

Angular提供了许多内置的指令和服务，其中许多在本项目中使用。

为了显示建议(见需求2)，我们使用ngIf和ngRepeat指令来有条件地显示和填写建议列表。

为了在用户输入时更新建议内容(见需求3)，我们使用ngModel指令将输入元素的请求绑定在$Scope上的前缀变量和$watch方法上，双向绑定，从而监控前缀的变化。

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

我们还编写了定制的指令和服务来满足我们的特定需求：

Smartysuggestor Service : Smartysuggestor提供了一个getSmartySuggestions()函数，用于接受用户生成的前缀作为其参数，并通过http request访问我们的后端建议器服务，获取自动完成的建议。(见要求1)。

SmartyInput Directive:我们面临的挑战之一是定义用户和下拉列表之间所有可能的交互，并编写测试用例，以确保这些功能在开发期间和之后保持不变。我们使用方向(智能输入)来包含用户和下拉列表之间所有可能的交互(参见需求6)。同时，我们使用内置的ng-mouseover和ng-click指令(方向)来定义下拉列表和鼠标事件之间的交互。

正如我前面提到的，我们面临的挑战之一是确保我们不会破坏用户和下拉列表之间所有可能的交互。为了跟踪这些用户交互，并确保我们在开发过程中没有破坏它们，我们使用了Jasmine测试框架。Jasmine与这个angular-mock一起使用，这使得我们可以方便地编写包含smarty描述的测试用例。例如，我们可以为下拉列表写“应在外部点击时消失”，并为请求表单的输入写“应，在输入时，填入适当的值”。

学习总结

虽然简单实用的AngularJS框架现在对我来说很容易阅读，但需要一些时间来学习。隔离范围绑定指令和承诺是我学习过程中两个特别难的话题。当我研究隔离范围时，我发现我真的很想看到更多关于人们如何在他们的项目中使用不同绑定的例子，所以我将在下面为每个绑定类型举一个例子。=:本地和父范围之间的双向数据绑定

控制器：

$ scope . selected=-1；HTML:

输入类型=' text ' smarty-输入索引=' selected' smarty输入指令：

Scope: {index:'='，} smartyinput双向绑定指令将控制器范围内的选定内容绑定到指令范围内的索引索引，这样索引索引(建议列表中当前选定的索引)中的更改结果与指令(例如，用户按下向上/向下箭头)之间的交互就可以传播到控制器。

:本地和父范围之间的单向数据绑定

控制器：

$ scope . setselected=function(NewVaLue){ 0.};HTML:

输入类型=' text ' smarty-input select=' set selected(x)' smarty输入指令：

scope: {select: ' '，}.scope . select({ ' x ' : ParSeint(scope . index)1 })；SmartyInput指令将控制器作用域中的setSelected()函数绑定到指令作用域中的select()函数，这样指令就可以使用setSelected()函数，而无需对其进行更改。@:将计算表达式绑定到本地范围

控制器：

$scope.prefix=''HTML:

div smarty-建议前缀=“{ { prefix } }”smarty建议指令：

Scope: {prefix: '@ '，}前缀的值可以通过SmartySuggestions指令显示在建议菜单中，因此这里使用计算表达式{{prefix}}。这种绑定方法更常用于许多复杂的表达式，例如next-index=“{ { selected 1 } }”。

承诺

Promise是一种执行异步任务的技术。承诺有一个名为then()的方法，该方法将用作在执行承诺时要执行的回调函数的参数。当异步任务完成时，promise将向回调函数发送一条消息。当在用户输入的前缀中检测到更改时，承诺将出现在Smarty的代码中，然后我们将使用$http执行GET请求来更新向用户显示的建议列表。

该过程如下所示：

当$scope。$watch记录了$scope.prefix的值的变化(请注意，它绑定到这里的用户界面输入接口)。

var promise=smartyssuggestor . getsmartyssuggestions($ scope . prefix)；promise . then(function(data){ $ scope . improvements=data；});在getSmartySuggesctions()中，$http.get返回参与服务器响应的承诺。

函数getSmartySuggestions(前缀){ request params[' query ']=escape(prefix . tolowercase())；var promise=$ http . get(request URl()，{ params: requestParams，cache: true })。然后(函数(response){ return response . data . slice(0，5))。map(函数(项目){返回项目。名称；});});回报承诺；}服务器响应如下所示：

[{'ID':13，' Name': '人像摄影' }，{'ID':24，' Name': '商业摄影' }，{'ID':21，' Name': '宠物摄影' }，{'id' :16，' name' : '事件摄影' }，{'id' :26，' Name ' 3: '快照摄影' }]then()方法返回一个新的承诺，它处理解析后的响应，并将其存储在getSmartySuggestions()返回的承诺中。

解析后的回应看起来是这样的：[“人像摄影”、“商业摄影”、“宠物摄影”、“活动摄影”、“爆头摄影”]。

最后，回到$scope。$watch，我们调用promise中的then()方法，将这些解析的响应分配给变量建议。

var promise=smartyssuggestor . getsmartyssuggestions($ scope . prefix)；promise . then(function(data){ $ scope . improvements=data；});