AngularJS for DBPV

To make an awesome DBpedia Viewer, we need some JavaScript MV* framework. AngularJS is used for this purpose as it actually has controllers.

Using AngularJS, we can make DBpedia Viewer as an SPA. Below follows a short description of a toy AngularJS implementation.

(For more information about AngularJS, please visit http://docs.angularjs.org/tutorial)

First, we setup our HTML. Angular allows to define templates of how model objects will be displayed. The view-model binding is defined in a kind of a declarative way.

The views are under control of controllers. But you don’t generate any HTML in your controllers. Instead, the controller should generate the objects that will be displayed in the corresponding templates. In our case, the controller performs a SPARQL query to DBpedia to get the triples of some entity (using Angular’s $http service). To ensure we don’t get errors due to the 1900 char limit of Virtuoso URLs, the SPARQL query should be sent in a HTTP POST request ($http.post()).

However, it is better to query DBpedia from a Angular service. All of the SPARQL querying logic is thus moved to a Angular service which is used by the controller. The advantage is that we could generalize the service to let it be used by different controllers in the future.

So, at this point we have:

  • one template for a list of triples in our HTML
  • a controller associated with that one list of triples
  • a service getting all triples (incoming and outgoing) about whatever entity the controller will send to it

This is an introduction to the use of AngularJS for DBPV. In the following posts, I will talk about support for no-JavaScript pages with AngularJS and about a separation of querying for incoming links vs outgoing links.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s