[AngularJS/Elasticsearch] Use AngularJS to create a front-end for Elasticsearch-based applications.

[AngularJS/Elasticsearch] Use AngularJS to create a front-end for Elasticsearch-based applications.
Use AngularJS to create a front-end for Elasticsearch-based applications

If you use Elasticsearch to use the application data source, you can easily use AngularJS to create a front-end with the relevant modules provided by Elasticsearch.

Take creating a simple employee information roster as an example.

Preparations

Preparations are divided into the following two aspects:

Add front-end dependency

1. Install Bower
2. Add the dependency on AngularJS and Elasticsearch in bower. json:

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

Prepare the runtime environment

For simple applications and Demos, you can directly use the http-server provided in the Node environment, which is very simple and quick.

1. Install Node
2. Install http-server by running the command: npm install-g http-server

Configure AngularJS and ES Client to configure AngularJS

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

Configure Elasticsearch Client

For a read-only application, we only need to expose the search function. You can customize a 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        };    }]);

In the factory defined above, we only expose the search method. This method calls the client's search method to complete keyword-based search.

Controller)

What needs to be done below is to implement a controller to complete the interaction between the page and the above search method:

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();    }]);

The search method is used to perform the search. The loadMore method is used to load more records.

Page

The page is used to display the attributes of the Employee object.

<div ng-app='rosterApp' ng-controller='rosterCtrl'>    Run
Go to the project directory and run http-server. Access http: // localhost: 8080.
To use different query types, modify the query creation section in the search method.