I'm looking for a working example of AngularJS and Elasticsearch working together using the new official client library: elasticsearch.angular.js that's found at

So far, the examples I've found use alternate clients or don't work anymore because something has changed between versions. This makes it hard for someone new to AngularJS and Elasticsearch to get started.

To be specific, a "Hello World" of accessing Elasticsearch through AngularJS using the official client is what I'm looking for.

Others seem to be having the same problem since there is an open issue requesting the same thing in the repo of the official client.

I'm looking for a working example of AngularJS and Elasticsearch working together using the new official client library: elasticsearch.angular.js that's found at http://www.elasticsearch.org/blog/client-for-node-js-and-the-browser

So far, the examples I've found use alternate clients or don't work anymore because something has changed between versions. This makes it hard for someone new to AngularJS and Elasticsearch to get started.

To be specific, a "Hello World" of accessing Elasticsearch through AngularJS using the official client is what I'm looking for.

Others seem to be having the same problem since there is an open issue requesting the same thing in the repo of the official client. https://github.com/elasticsearch/elasticsearch-js/issues/19

• javascript
• angularjs
• elasticsearch

5 Answers 5

Here is a way to do a "Hello World" combining AngularJS and Elasticsearch

1) Make sure you have installed elasticsearch correctly on your local machine
following the instructions

2) Test your local install of elasticsearch
by typing on the command line
curl -XGET localhost:9200

3) Insert some test data into elasticsearch
Just run each of the commands in this gist (by clicking the little green triangle next to each one) or you can insert data manually by typing the following at the command line:

curl -XPUT "http://localhost:9200/test_index/product/1" -d '{
  "title": "Product1",
  "description": "Product1 Description",
  "price": 100
}'

curl -XPUT "http://localhost:9200/test_index/product/2" -d '{
  "title": "Product2",
  "description": "Product2 Description",
  "price": 200
}'

4) Test retrieving data from elasticsearch
curl -XGET localhost:9200/test_index/product/1

5) Dowload the angular.elasticsearch.js (or the minified version) client and place it somewhere where it is available to you Angular app (same directory should be good)

6) Dowload and run the following code
http://plnkr.co/edit/vfapGG

You may also be able to run this Plunk directly from the Plunkr site http://plnkr.co/vfapGG, but that depends on your security settings since it needs to access your brand new Elasticsearch server at localhost:9200

Congratulations!!
You now have a working Elasticsearch backend and AngularJS frontend.

Warning
Before going into production, be sure to secure your Elasticsearch server properly as ANYONE with access to it can easily MODIFY or DELETE your stored data and gain CONTROL (essentially shell access) of the computer running the Elasticsearch server if it is not secured properly.

In case you're looking to prototype a more advanced solution with AngularJS and Elasticsearch, I've created the library ElasticUI (AngularJS Directives for Elasticsearch)

It builds upon the official client and elastic.js, so if you want to see how to get started with that, the source code for the part which does the actual requests might be a good starting point.

John D, while there are several other answers I wanted to add that there is now an example project providing the "hello world" example you were looking for.

https://github.com/spenceralger/elasticsearch-angular-example

I recommend you explore the code used for the Kibana application hosted on the ElasticSearch website. Kibana uses Angular.js and the ES library to load and render its dashboards.

The Kibana source can be found here:

https://github.com/elasticsearch/kibana

It's not a "Hello World" example, but you could definitely learn a lot about using the library from the people who helped write it.

This is a very good working code to start with. I did not find any other tutorial like this which cover Elasticsearch as well as Angular.

I have faced problem in inserting test data for this example. I have some learning of Elasticsearch on Linux machine and surprised that it did not work with double quote as well. I did not code last few years therefore it took me a while to find out the problem and after a long search I found this somewhere. I got this working as follows on windows command line:

curl -XPUT "http://localhost:9200/test_index/product/1" -d "{\"title\": \"Product1\",\"description\": \"Product1 Description\",\"price\": 100}"