AngularJS using the HTTP Whiteboard Service



An AngularJS application consists of static resources (JS, CSS, images) deployed into an HTTP server. By leveraging the support of the HTTP Whiteboard service for static resources and resource mapping, we can package AngularJS applications into standard OSGi bundles and deploy them into an OSGi container.

The basic tutorial from the AngularJS home page has been copied to index.html which is placed in the top-level directory of the bundle (in a Maven project, that would be src/main/resources/index.html):

<!doctype html>
<html ng-app>
<script src=""></script>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <h1>Hello {{yourName}}!</h1>

The Blueprint definition for exporting the resource to the root directory of the web server is shown below:

<blueprint default-activation="eager"
    <bean id="resourceMapping"
        <property name="alias" value="/" />
        <property name="path" value="" />

    <bean id="welcomeFile"
        <property name="redirect" value="true" />
        <property name="welcomeFiles">

    <service id="resources" ref="resourceMapping"
        interface="org.ops4j.pax.web.extender.whiteboard.ResourceMapping" />

    <service id="welcomeFileService" ref="welcomeFile"
        interface="org.ops4j.pax.web.extender.whiteboard.WelcomeFileMapping" />

The bundle depends on the http-whiteboard feature. To deploy in Apache Karaf, run the following commands:

karaf@root()> feature:install http-whiteboard
karaf@root()> install -s
Bundle ID: 99

The application should now be accessible at http://host:8181/

Leave a Reply

Your email address will not be published. Required fields are marked *