Getting Started with elasticsearch and AngularJS

app.js

/*jshint globalstrict:true */
/*global angular:true */
'use strict';

angular.module('demo', [
    'demo.controllers',
    'demo.directives',
    'elasticjs.service'
]);

controller.js

/*jshint globalstrict:true */
/*global angular:true */
'use strict';

/* controller.js */

angular.module('demo.controllers', [])
    .controller('SearchCtrl', function($scope, ejsResource) {

        var ejs = ejsResource('http://localhost:9200');

        var QueryObj = ejs.QueryStringQuery().defaultField('Title');

        var activeFilters = {};

        var client = ejs.Request()
            .indices('stackoverflow')
            .types('question')
            .facet(
                ejs.TermsFacet('tags')
                    .field('Tags')
                    .size(10));

        $scope.isActive = function (field, term) {
            return activeFilters.hasOwnProperty(field + term);
        };

        var applyFilters = function(query) {
            
            var filter = null;
            var filters = Object.keys(activeFilters).map(function(k) { return activeFilters[k]; });

            if (filters.length > 1) {
                filter = ejs.AndFilter(filters);
            } else if (filters.length === 1) {
                filter = filters[0];
            }

            return filter ? ejs.FilteredQuery(query, filter) : query;
        };

        $scope.search = function() {
            $scope.results = client
                .query(applyFilters(QueryObj.query($scope.queryTerm || '*')))
                .doSearch();
        };

        $scope.filter = function(field, term) {
            if ($scope.isActive(field, term)) {
                delete activeFilters[field + term];
            } else {
                activeFilters[field + term] = ejs.TermFilter(field, term);
            }
            $scope.search();
        }

    });

directives.js

/*jshint globalstrict:true */
/*global angular:true */

angular.module('demo.directives', [])
    .directive('bar', function() {

        return {
            restrict: 'E',

            scope: {
                onClick: '=',
                bind:    '=',
                field:   '@'
            },

            link: function(scope, element, attrs) {

                var width = 300;
                var height = 250;

                var x = d3.scale.linear().range([0, width]);
                var y = d3.scale.ordinal().rangeBands([0, height], .1);

                var svg = d3.select(element[0])
                    .append('svg')
                        .attr('preserveAspectRatio', 'xMaxYMin meet')
                        .attr('viewBox', '0 0 ' + (width + 75) + ' ' + height)
                        .append('g');

                scope.$watch('bind', function(data) {

                    if (data) {

                        x.domain([0, d3.max(data, function(d) { return d.count; })]);
                        y.domain(data.map(function(d) { return d.term; }));

                        var bars = svg.selectAll('rect')
                            .data(data, function(d, i) { return Math.random(); });

                        // d3 enter fn binds each new value to a rect
                        bars.enter()
                            .append('rect')
                                .attr('class', 'bar rect')
                                .attr('y', function(d) { return y(d.term); })
                                .attr('height', y.rangeBand())
                                .attr('width', function(d) { return x(d.count); });

                        // wire up event listeners - (registers filter callback)
                        bars.on('mousedown', function(d) {
                            scope.$apply(function() {
                                (scope.onClick || angular.noop)(scope.field, d.term);
                            });
                        });

                        // d3 exit/remove flushes old values (removes old rects)
                        bars.exit().remove();

                        var labels = svg.selectAll('text')
                            .data(data, function(d) { return Math.random(); });

                        labels.enter()
                            .append('text')
                                .attr('y', function(d) { return y(d.term) + y.rangeBand() / 2; })
                                .attr('x', function(d) { return x(d.count) + 3; })
                                .attr('dy', '.35em')
                                .attr('text-anchor', function(d) { return 'start'; })
                                .text(function(d) { return d.term + ' (' + d.count + ')'; });

                        // d3 exit/remove flushes old values (removes old rects)
                        labels.exit().remove();
                    } 
                })
            }
        };
    });

index.html

<!DOCTYPE html>
<html ng-app="demo">
    <head>
        <link rel="stylesheet" href="common/css/bootstrap.min.css">

        <!-- project dependency libs -->
        <script src="common/lib/angular.min.js"></script>
        <script src="common/lib/d3.min.js"></script>
        <script src="common/lib/elastic.min.js"></script>
        <script src="common/lib/elastic-angular-client.min.js"></script>
          
        <!-- project specific files -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>

        <style>.bar.rect { fill: #058dc7; stroke: none; }</style>
    </head>

    <body ng-controller="SearchCtrl">
        <div class="container-fluid">
            <div class="row-fluid">
                <span class="span3">
                    <input class="input-block-level" ng-model="queryTerm" type="text">
                </span>&nbsp;
                <button ng-click="search()" class="btn" type="button">Search</button>
            </div>

            <div class="row-fluid">
                <div class="span2">
                    <div ng-repeat="entry in results.facets.tags.terms">
                        <a ng-click="filter('Tags', entry.term)">
                            <i class="icon-remove-sign" ng-show="isActive('Tags', entry.term)"></i> {{ entry.term }}
                        </a> {{ entry.count }}
                    </div>
                </div>
                <div class="span3">
                    <bar bind="results.facets.tags.terms" on-click="filter" field="Tags" />
                </div>
                <div class="span4">
                    <li ng-repeat="doc in results.hits.hits">
                        {{ doc._source.Title }}
                    </li>
                </div>
            </div>
        </div>
    </body>
</html>

index.html :
<script src="js/controllers.js"></script> should be <script src="js/controller.js"></script>

how can I run this code ???

See these blog posts:

• Getting Started with elasticsearch and AngularJS: Part1 - Searching
• Getting Started with elasticsearch and AngularJS: Part2 - Faceting
• Getting Started with elasticsearch and AngularJS: Part3 - Visualization

not work:
TypeError: undefined is not a function
at new (http://127.0.0.1:8000/static/js/controllers.js:17:14)

controllers.js line 16 to 22
var client = ejs.Request()
.indices('stackoverflow')
.types('question')
.facet(
ejs.TermsFacet('tags')
.field('Tags')
.size(10));

It is not working for me either.

TypeError: ejs.Request(...).indices is not a function

I am using Angular 1.5.2.

Here is the result of console.log(ejs.Request());