我們最近為我們的論壇增加了一個自動完成功能（稱為Smarty），在要求專業(yè)人員簡介的主頁上。這是一個超有用的功能，因為它有助于我們將用戶導航到他們真正想去的地方。它很有意思，也是用AngularJS構建的！

我們希望Smarty能夠:

1.     通過用戶的給定輸入 (一個前綴)，通過一個HTTP請求后自動提供建議
2.     顯示一個建議的下拉列表
3.     當用戶輸入時更新
4.     足夠快，能夠跟得上用戶的輸入
5.     導航直觀且能夠關閉
6.     可重用

以往沒有AngularJS的經(jīng)驗，這個項目是我使用這個框架的入門項目。它真的成為了一次寶貴的學習經(jīng)驗，而且我發(fā)現(xiàn)這個框架許多方面相互借鑒地很好且能很好地符合我上面列出的要求。當然，還有一些問題尚在學習過程中！

AngularJS的樂趣所在

我最喜歡Angular的一點是它是如何分解成具有明確目的的概念的。Smarty廣泛使用了其中的兩個概念——Directives 和 Services。Directive和DOM綁定在了一起，用來管理和元素之間的交互；而Service通過依賴注入的方式為Controller和Directive提供了獨立的可以重用的邏輯。

Angular提供了很多內(nèi)建的Directive和Service，我們在這個項目中使用到了其中的多個。

    為了顯示建議(見要求2)，我們使用了ngIf 和 ngRepeat 指令來有條件的顯示和填充建議下來列表。

    為了實現(xiàn)當用戶輸入的時候更新建議內(nèi)容（見要求3），我們使用了ngModel 指令將$scope上前綴變量上輸入元素的請求和Scope上的$watch方法雙向綁定起來，用來監(jiān)聽前綴的變化。

    我們需要考慮的一件事是這個自動完成功能的更新速度可能跟不上用戶的輸入速度（見要求4）。因為每當前綴的值發(fā)生變化時，Smarty都要發(fā)送一個HTTP請求（通過內(nèi)建的$http Service）。我們決定用 $http 的可選配置參數(shù)($http.get(requestUrl, {cache: true}))來緩存結果。這是提升性能的一個很簡單的方法。

我們還寫了自定義的Directive和Service來滿足我們的特定需求：

    smartySuggestor Service:smartySuggestor 提供了一個getSmartySuggestions()函數(shù)，用來接受用戶生成的前綴作為它的參數(shù)，并通過http請求訪問我們后端的suggestor服務來得到自動完成的建議。（見要求1）。

    smartyInput Directive: 我們所面臨的一個挑戰(zhàn)是，定義出一個用戶和下拉列表之間的所有可能的交互，并且寫測試用例，以確保在開發(fā)期間和開發(fā)之后，這些功能都是完好的。我們使用一個Directive(smartyInput)來包含用戶和下拉列表之間所有可能發(fā)生的交互（見要求6），同時，我們使用內(nèi)建的ng-mouseover 和 ng-click 指令(Directive)來定義下拉列表和鼠標事件之間的交互。

正如我前邊所提到的，我們所面臨的一個挑戰(zhàn)是我們要確保我們沒有破壞掉所有用戶和下拉列表之間可能發(fā)生的交互方式。為了追蹤這些用戶交互，并確保我們沒有在開發(fā)的過程中破壞掉它，我們使用了

學習總結

$scope.selected = -1;

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

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

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

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

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

$scope.prefix = ""

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

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

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

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"}]

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

最新評論