This article is the second part of a tutorial which describes how to build a search-as-you-type feature based on Elasticsearch, Python/Flask and AngularJS.
The first part has discussed how to set-up Elasticsearch and a microservice in Python/Flask, i.e. the back-end part of the system. It also provided an overall view on the architecture. In this second part, we’ll discuss details about the front-end, based on AngularJS.
The full code is available at https://github.com/bonzanini/CheerMeApp-demo.
Single-Page App
The front-end is a single-page application which uses AngularJS, as well as Bootstrap for styling.
Firstly, we create an index.html page, declaring the HTML document as an AngularJS app with the ng-app attribute:
<html ng-app="myApp">
In the head declarations, we’ll need to include AngularJS itself as well as some of its components (we’re using angular-route and angular-resource), the Bootstrap stylesheet and the custom app code, e.g.
<head>
<!-- Load AngularJS -->
<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-resource.min.js"></script>
<!-- Load Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Load custom app code -->
<script type="text/javascript" src="app.js"></script>
</head>
The whole user interface resides in a <div> container as ng-view:
<body>
<!-- The UI -->
<div class="container">
<div ng-view></div>
</div>
</body>
Both ng-app and ng-view are directives defined by AngularJS, i.e. Angular extends HTML using attributes with a “ng-” prefix.
The core of the front-end
The main front-end component is the AngularJS app defined in app.js. The starting point is the module definition:
var myApp = angular.module("myApp", ["ngRoute", "ngResource", "myApp.services"]);
The myApp application has some dependencies, namely ngRoute for routing (e.g. for templates), ngResource to access external RESTful resources, and the custom myApp.services which defines the access such resources.
If you remember from the previous article, we have a microservice based on Python/Flask listening on localhost:5000, which provides access to a REST API. The myApp.services variable is what binds such API to our AngularJS app defining the way we access the resource, e.g.
// services definition
var services = angular.module("myApp.services", ["ngResource"]);
// create specific resources, defining the related URLs and how to access them
services
.factory('Beer', function($resource) {
return $resource('http://localhost:5000/api/v1/beers/:id', {id: '@id'}, {
get: { method: 'GET' },
delete: { method: 'DELETE' }
});
})
.factory('Beers', function($resource) {
return $resource('http://localhost:5000/api/v1/beers', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST', }
});
})
.factory('Search', function($resource) {
return $resource('http://localhost:5000/api/v1/search', {q: '@q'}, {
query: { method: 'GET', isArray: true}
});
});
Once the resources are defined, we can define the rules for routing/templating, e.g.
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/newBeer', {
templateUrl: 'pages/beer_new.html',
controller: 'newBeerController'
})
.when('/beers', {
templateUrl: 'pages/beers.html',
controller: 'beerListController'
})
.when('/beers/:id', {
templateUrl: 'pages/beer_details.html',
controller: 'beerDetailsController'
})
});
The $routeProvider simply allows to associate a matching URL with a template (a HTML page) and a controller (a function that, among other aspects, binds data with the template).
For example the controller of the entry page can be defined as:
myApp.controller(
'mainController',
function ($scope, Search) {
$scope.search = function() {
q = $scope.searchString;
if (q.length > 1) {
$scope.results = Search.query({q: q});
}
};
}
);
In the controller, there are three references to the scope, namely searchString, results and search. The first one is the content of the input field used for search, i.e.
<input type="text" class="form-control" ng-model="searchString" placeholder='Search: e.g. "light beer" or "London"' ng-change="search()"/>
while the second one is the list of results, in form of table rows, i.e.
<tr ng-repeat="result in results">
<td><a href="#/beers/{{result.id}}">{{ result.name }}</a></td>
<td>{{ result.producer }}</td>
</tr>
The third reference is a function, search(), defined in the controller itself, and invoked by the UI whenever the text in the input field is changed. The function checks if the text has at least two characters, and then sends it as a query to the Search resource declared at the beginning in the services var (i.e. as part of the REST API). If the search provides results (a list of beers along with their producers), these are shown are table rows.
The two HTML definitions above are part of the pages/main.html template described above and linked to the mainController().
Other controllers are defined in a similar fashion, and they all define the behavior of a specific view, just with a few lines of Javascript.
Summary
Using AngularJS and Bootstrap, we have quickly created a simple and clean UI for our search-as-you-type system. As the access to the data happens through the microservice defined in the previous article, we have defined the access to the REST API as ngResource.
Each view in the UI is defined as a template, i.e. a HTML page. The behaviour of the UI and the data binding is defined in the controllers.
All in all, with a relatively small amount of Javascript code, AngularJS allows to build an interactive UI which can access REST resources.
Links:
Marco Bonzanini 