angular-smarty
AngularJS
英文原文：
Introducing Smarty: an Autocomplete UI in AngularJS
我们比来为我们的论坛增加了一个自动完成功能（称为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央求（颠末内建的$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是用于实行异步Task的技术。一个promise具有一个名为then()的方法，该方法在promise实行时会作为被实行的的回调函数的一个参数。当异步Task完成，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会前去一个参与Server照应的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;}
Server照应看起来是多么的：
[{"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()方法，在分析Server照应回调中履行传递。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;
});
继续行进
再后来，我们决定在主页上再增加一个额外表单，当你将页面动弹过第一个央求表单时以一个粘性滑进视图的方法。将Smarty添加到这个央求表单很随便，我们只需求在这个表单的HTML中包括一个additional的Smarty操纵器。
当键入“foto”时的结果正如你在上面的截图中所看到的，Smarty看起来很很聪明吧！这主页归功于幕后Task的Hercule，Smarty与之通信并生成建议列表。此外一位工程师，Alex，正在写一篇关于Hercule眼前逻辑的文章，他实验过用Go来写它。
关于 angular-smarty
本文中的一切译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译Task依照
CC 协议，假设我们的Task有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
