Example of Angular and Elasticsearch

Question

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

Answer 1

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.

Answer 2

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.