Display loading indicator using AngularJS

AngularJS allows developers to extend HTML with new attributes called Directives. In simple terms, an AngularJS directive is essentially a function that executes when the Angular compiler finds it in the DOM (Document Object Model). Directives are extended HTML attributes with the prefix ng-. For instance, the ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

On the other hand, Services are substitutable objects that are wired together using dependency injection (DI). Developers can use services to organize and share code across your app. To use an Angular service, you add it as a dependency for the component (controller, service, filter or directive).

Through this post, we will learn how to display a simple loading indicator using AngularJS directives and services. The loading indicator thus implemented can be displayed while executing AJAX requests to remote web services.

Pre-requisites: Eclipse IDE for Java EE developers, Apache Tomcat 7.0

Step 1: Launch the Eclipse IDE and create a new Dynamic Web Project called AngularSpinnerDemo with target server runtime as Apache Tomcat 7.


Now, let’s create our own directive that will display the spinner when the DOM is loaded.

Step 2: Create directive for Spinner

Create a new JavaScript file called spinner_directive.js that will include our custom directive. As the DOM (Document Object Model) is compiled by AngularJS, the directive controllers and link functions execute at different parts of the compile life-cycle.


app.directive('spinner', function () {
    return {
        restrict: 'E',
        template: [
          '  <img ng-show="showSpinner" ng-src="{{url}}" style="padding-right: 7px; width: {{ spinnerSize }}; vertical-align: middle" />',
          '  <span ng-show="loadingText && showSpinner">{{ loadingText }}</span>',
          '  <span ng-show="doneText && !showSpinner">{{ doneText }}</span>',
        replace: true,
        scope: {
            id: '@',
            group: '@?',
            showSpinner: '@?',
            loadingText: '@?',
            doneText: '@?',
            onRegisterComplete: '&?',
            url: '@'
        controller: function ($scope, $attrs, spinnerService) {
            // Register the spinner with the spinner service.
            // Invoke the onRegisterComplete expression, if any.
            // Expose the spinner service for easy access.
            $scope.onRegisterComplete({ $spinnerService: spinnerService });
        link: function (scope, elem, attrs) {
            // Check for pre-defined size aliases and set pixel width accordingly.
            if (attrs.hasOwnProperty('size')) {
                attrs.size = attrs.size.toLowerCase();
            switch (attrs.size) {
                case 'tiny':
                    scope.spinnerSize = '15px';
                case 'small':
                    scope.spinnerSize = '25px';
                case 'medium':
                    scope.spinnerSize = '35px';
                case 'large':
                    scope.spinnerSize = '75px';
                    scope.spinnerSize = '50px';

Step 3: Create service for Spinner

Create a new JavaScript file called spinner_service.js that will include the definition of our spinner service as follows!


app.factory('spinnerService', function () {
    var cache = {};
    return {

        // A private function intended for spinner directives to register themselves with the service.
        _register: function (spinnerScope) {
            // If no id is passed in, throw an exception.
            if (!spinnerScope.id) {
                throw new Error("A spinner must have an ID to register with the spinner service.");

            // Add our spinner directive's scope to the cache.
            cache[spinnerScope.id] = spinnerScope;

        // A private function exposed just in case the user really needs to manually unregister a spinner.
        _unregister: function (spinnerId) {
            delete cache[spinnerId];

        // A private function that will remove an entire spinner group if needed.
        _unregisterGroup: function (group) {
            for (var spinnerId in cache) {
                if (cache.hasOwnProperty(spinnerId)) {
                    if (cache[spinnerId].group === group) {
                        delete cache[spinnerId];

        // A private function that will clear out all spinners from the cache.
        _unregisterAll: function () {
            for (var spinnerId in cache) {
                if (cache.hasOwnProperty(pinnerId)) {
                    delete cache[spinnerId];

        // Show the specified spinner.
        // If loadingText is specified, replace the loadingText specified on the directive as we show the spinner.
        show: function (spinnerId, loadingText) {

            if (cache.hasOwnProperty(spinnerId)) {
                var spinnerScope = cache[spinnerId];
                spinnerScope.showSpinner = true;
                if (loadingText !== undefined) {
                    spinnerScope.loadingText = loadingText;


        // Hide the specified spinner.
        // If doneText is specified, replace the doneText specified on the directive as we hide the spinner.
        hide: function (spinnerId, doneText) {

            if (cache.hasOwnProperty(spinnerId)) {
                var spinnerScope = cache[spinnerId];
                spinnerScope.showSpinner = false;

                if (doneText !== undefined) {
                    spinnerScope.doneText = doneText;



Step 4: Create controller


app.controller("spinnercntrl", function ($scope,spinnerService) {

	//initially hide the spinner

	/*method called on click of show spinner button*/
	$scope.showSpinner = function(){
		//hide the spinner after 3 seconds
		}, 3000);



Finally, run the application on the Tomcat server. If no errors occur, then you should see the loading indicator on click of the Show spinner button.



Source code for this tutorial can be found over here.

Reference: AngularJS Developer Guide

Tutorial #74: Calling function from Javascript using QtWebkit bridge

Hello everyone!

Developers often need to develop hybrid client applications that distinguish themselves from a thin client by performing heavy calculations on the client side in C++, like a native application. It presents nothing more than a QWebView for its user interface, displaying web content written in HTML/JavaScript.

In order to implement such applications Qt provides the QtWebkit-bridge that in a way extend WebKit’s JavaScript environment to access native objects represented as QObjects. Through this tutorial, we will learn how to call a native Qt function from Javascript using the webkit bridge.

Pre-requisites: Qt Creator, MinGW compiler (Windows – 64 bit)

Step 1: Launch Qt Creator and create a new Qt console application project called TestHttpScriptExample. Choose the default Desktop kit.

Step 2: Create HTML file

First, we need to create an HTML file that will contain the Javascript code required to call our native Qt function.


<script type="text/javascript">


function displayMessage(){
    alert("Hello display");
    return "Done!";


function test(){
    return "Called me!";

<p>Test Example to call Qt function from Javascript </p>

<input type="button" value="Click me!" onclick="displayMessage()">


Next we need to add the HTML file to our Qt project. Right click your Project –> Add Existing files and navigate to the directory where you have created the HTML file.

Step 3: Add Qt code

Let’s add the code to the main.cpp as follows. To make a method invokable, simply add the Q_INVOKABLE macro before its definition.


#include <QCoreApplication>
#include <QDebug>
#include <QApplication>
#include <QtWebKitWidgets/QWebFrame>
#include <QtWebKitWidgets/QWebPage>
#include <QtWebKitWidgets/QWebView>
#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>
#include <QUrl>
#include <QUrlQuery>
#include <QWebSettings>
#include <QVariant>

QWebView *view;
class MyJavaScriptOperations : public QObject {

        qDebug() << "In constructor";

public slots:
    void submit()
        QVariant f1result = view->page()->mainFrame()->evaluateJavaScript("test()");
        qDebug() << f1result.toString();

    Q_INVOKABLE void display(){

        qDebug() << "In display method";



int main(int argc, char *argv[])
    QApplication a(argc, argv);

    view = new QWebView();
    view->resize(400, 500);
    view->page()->mainFrame()->addToJavaScriptWindowObject("myoperations", new MyJavaScriptOperations);
    return a.exec();


#include "main.moc"

.pro file

QT       += core

QT       -= gui
QT       += webkit webkitwidgets
TARGET = TestHttpScriptExample
CONFIG   += console
CONFIG   -= app_bundle


SOURCES += main.cpp


Save all changes. Build and run the application. If no errors occur then you should see the following output!



Reference: Qt documentation

Implement Lightbox using jQuery plugin!

Hi guys!

Lightbox is a well-known JavaScript technique used to display images or any web content using modal dialogs. Not too long ago, the lightbox plugin was written in jQuery that allowed developers to modify the code and come up with new plugins that carry out the same task.

Colorbox is one such jQuery plugin that we can use to implement a lightbox. Through this post, I will try to implement a sample HTML page that displays a lightbox using the Colorbox plugin.


<!DOCTYPE html>
<html lang="en">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>LightBox Demo</title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.3/example1/colorbox.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.3/jquery.colorbox.js"></script>
    <div class="container">
      <a href="#ShowLightBox" class="colorbox-element">Show LightBox</a>
    <br />
    <div style="display:none">
      <div id="ShowLightBox" style="margin:0 auto;padding:10px; background:#fff;">
        <!--sample form -->
        <div class="panel panel-info">
          <div class="panel-heading">
            <div class="row">
              <div class="col-md-10">
                <h3 class="panel-title">My Form</h3>
        <div class="form-group">
        <input type="text" placeholder="Name of the customer" class="form-control" /></div>
        <div class="form-group">
        <input type="text" placeholder="Phone of the customer" class="form-control" /></div>
        <a href="#" class="btn btn-default">Submit</a>
      $(document).ready(function($) {
            $(".colorbox-element").colorbox({inline:true, width:"70%", height:"95%"});

Save and open the above web page in any browser and you should see the following output!