Simple Solr querying with AngularJS and Solstice

Simple Solr querying with AngularJS and Solstice

An overview of Solstice: A simple Apache Solr wrapper module for AngularJS apps.


Solstice is an AngularJS module, developed by Frontkom, that enables simple querying of Solr indexes. Solstice provides a search service and a companion directive that can be used in any Angularjs project.

Solstice is inspired by Restangular - an Angularjs service to handle Rest API resources.

Apache Solr

Apache Solr is an open source search server based on the Apache Lucene engine. Over the last few years, SOLR by Apache has become the de facto standard for CMS indexing and querying. To find out more about Solr check


Angularjs is a client-side a Javascript framework. It's wonderful tool to create full featured web applications and frameworks.


Solstice can be installed using Bower or manually.

Using bower

bower install solstice



Clone or download the git repository and add the dist/solstice.js or dist/solstice.min.js dependency to your html.

<script type="text/javascript" src="/js/solstice.js"></script>



To use Solstice, just add it as a dependency to your app and set the default Solr index url in the config function.

var app = angular.module('my-app', ['solstice']); app.config(function(SolsticeProvider) { SolsticeProvider.setEndpoint('url-to-your-index'); });


Using Solstice

As service:

To use Solstice in a controller, add it as a dependency to the controller function.

app.controller('MyController', function($scope, Solstice) {{ q: 'bundle:article AND status:true', fl: 'title, teaser, published' sort: 'published desc', rows: 10 }) .then(function (data){ $scope.results =; console.log(; }); });


Usage as directive:

Solstice can also be used directly as a directive if the use of the service is not required. This can be particularly useful if the Solr querying is just a small part of a larger project.

To use it, just add the directive solr-search to any element in the html. This directive provides the following options:

  • index-url: The Solr index to be used. Only required if it wasn't set in the config.
  • q: The query string. See the Apache solr documentation for details.
  • rows: The number of results to retrieve.
  • start: The number of results to skip.
  • sort: The sort params.
  • fl: The field list to be retrieved.

<any-tag solr-search q="title:angular" start="0" rows="20"> <header> <p>Found {{solr.found}} results.</p> </header> <ul> <li ng-repeat="item in solr.results">{{item.title}}</li> </ul> </any-tag>


The module provides the $scope with a solr object. It has the following properties:

  • results: the list of results
  • found: the total number of results found.

Future Features

  • Full caching with Angularjs cacheFactory
  • Support more SOLR features
  • Querystring parsing
  • Query language support
Élio Cró

Élio Cró

Les flere artikler fra Élio Cró.

Developer at Frontkom. Primarily Node, microservices and frontend these days!