[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端

使用AngularJS为基于Elasticsearch的应用创建前端

如果使用Elasticsearch使用应用的数据源，我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端。

以创建一个简单的员工信息花名册为例。

准备工作

准备工作分为以下两个方面：

添加前端依赖

1. 安装Bower
2. 在bower.json中添加对于AngularJS和Elasticsearch的依赖：

"dependencies": {
    "angular": "~1.2.15",
    "elasticsearch": "~2.4.0"
}

准备运行时环境

对于简单的应用和Demo，可以直接使用Node环境中提供的http-server，非常简单快捷。

1. 安装Node
2. 安装http-server，通过命令：npm install -g http-server

配置AngularJS以及ES Client

配置AngularJS

var rosterApp = angular.module('rosterApp', ['elasticsearch']);

配置Elasticsearch Client

对于一个只读的应用，我们只需要将搜索的功能暴露出来。可以通过自定义一个factory来实现：

rosterApp.factory('rosterService',
    ['$q', 'esFactory', '$location', function($q, elasticsearch, $location){
        var client = elasticsearch({
            host: $location.host() + ":9200"
        });

        var search = function(term, offset){
            var deferred = $q.defer();
            var query = {
                "match": {
                    "_all": term
                }
            };

            client.search({
                "index": 'roster',
                "type": 'employee',
                "body": {
                    "size": 10,
                    "from": (offset || 0) * 10,
                    "query": query
                }
            }).then(function(result) {
                var ii = 0, hits_in, hits_out = [];
                hits_in = (result.hits || {}).hits || [];
                for(;ii < hits_in.length; ii++){
                    hits_out.push(hits_in[ii]._source);
                }
                deferred.resolve(hits_out);
            }, deferred.reject);

            return deferred.promise;
        };

        return {
            "search": search
        };
    }]
);

在以上定义的factory中，我们只暴露了search方法。该方法调用了client的search方法完成基于关键字的搜索。

控制器(Controller)

下面需要做的就是实现一个控制器来完成页面与上述search方法的交互：

rosterApp.controller('rosterCtrl',
    ['rosterService', '$scope', '$location', function(rosterService, $scope, $location){
        $scope.employees = [];
        $scope.page = 0;
        $scope.allResults = false;
        $scope.searchTerm = '';

        $scope.search = function(){
            $scope.page = 0;
            $scope.employees = [];
            $scope.allResults = false;
            $location.search({'q': $scope.searchTerm});
            $scope.loadMore();
        };

        $scope.loadMore = function(){
            rosterService.search($scope.searchTerm, $scope.page++).then(function(results){
                if(results.length !== 10){
                    $scope.allResults = true;
                }

                var ii = 0;
                for(;ii < results.length; ii++){
                    $scope.employees.push(results[ii]);
                }
            });
        };

        $scope.loadMore();
    }]
);

search方法用来执行搜索，loadMore方法用于加载更多记录。

页面

页面主要用于展示Employee对象的具体属性。

<div ng-app='rosterApp' ng-controller='rosterCtrl'>
    <header>
        <h1>Employee Search</h1>
    </header>
    <section class='searchField'>
        <form ng-submit='search()'>
            <input ng-model='searchTerm' type='text'>
            <input type='submit' value='Search for employees'>
        </form>
    </section>
    <section class='results'>
       <div class='no-employees' ng-hide='employees.length'>No results</div>
       <article class='employee' ng-cloak ng-repeat='employee in employees'>
           <h2>
              <a ng-href='{{employee.link}}'>{{employee.name}}</a>
           </h2>
           <ul>
              <li ng-repeat='historyItem in employee.historyItems'>{{ historyItem }}</li>
           </ul>
           <p>
              {{employee.introduction}}
              <a ng-href='{{employee.link}}'>More information...</a>
           </p>
       </article>
       <div class='load-more' ng-cloak ng-hide='allResults'>
            <a ng-click='loadMore()'>More...</a>
       </div>
    </section>
</div>

运行

进入工程目录，运行http-server。访问http://localhost:8080。

当需要使用不同的查询类型时，通过修改search方法中query的创建部分即可。