About lazy loading AngularJS modules

I recently wrote a post about creating pluggable AngularJS views using lazy loading of Angular modules. After discussing this topic with colleagues, I realized I did provide a technical solution but not much background as to why it is useful, what should be lazy loaded and when does lazy loading make sense. Hence this post…

Does lazy loading always make sense?

First, as general rule, optimization should only be performed when you actually have a performance problem. Definitely not in a prophylactic way. This is a common error made by many software engineers and causing complexity to unnecessarily increase at the beginning of a project. If you identify a bottleneck while loading specific resources, you should start thinking about introducing lazy loading in order to speed up your app e.g. during initial loading.

But just lazy loading everything without first having a good reason to introduce it can very well result in worse performance. You need to understand that lazy loading could actually increase the overall cost of loading resources. By loading all resources upfront, you get a chance to combine your resources and reduce the number of HTTP requests to your server. By splitting the loading of resources, you then actually have less possibilities to reduce the overall resource consumption by combination. Especially when you are loading many small resources, the overhead of loading them individually increases. Since JavaScript code is relatively small compared to static assets like images, lazy loading could cause a higher request overhead.

Also loading resources on demand means that when the user of your application activates a view which has not yet been loaded, he first has to wait until the additional resources are lazy loaded and properly registered. When you load everything upfront, the user has a longer wait time on application load time but can immediately access all views in your application without delay.

So using lazy loading always means having a tradeoff between initial load time of the application and subsequent activation of parts of your application.

RequireJS vs. AngularJS Dependency Injection

RequireJS is currently the state of the art in modular script loader and asynchronous and lazy loading of JavaScript files. It is based upon the AMD (Asynchronous Module Definition) API. It handles loading your script files in the browser based on a description of dependencies between your modules.

This may sound similar to AngularJS dependency injection mechanism. But RequireJS and AngularJS DI work on two completely different levels. AngularJS DI handles runtime artifacts (AngularJS components). In order to work properly, AngularJS DI requires all of the JavaScript code to have been loaded and registered by the framework. It injects controllers, directives, factories, services, etc. which have been previously loaded.

Since there is no direct integration of RequireJS and AngularJS and AngularJS has a single initialization phase where the definition of modules is interpreted, when using both of them, RequireJS will need to first load the complete dependency tree before AngularJS DI can be used. This effectively means that your complete JavaScript code will need to be fetched on initial load.

So we cannot just lazy load all AngularJS modules JavaScript files with RequireJS after an AngularJS application has started because the AngularJS DI container wouldn’t handle the components created as a result of loading the JavaScript files. Instead, you need to manually handle all these components which have been loaded after the startup phase of your application.

What’s the point of lazy loading ?

Lazy loading components generally improves an application’s load time. If your web application takes many seconds to load all components ever required to interact with user, you will most probably experience a high bounce rate with users just giving up before they even get a chance to see how great your application is.

By lazy loading parts of your application, you can make sure that the views in your application which are used immediately by most users are available immediately. If a given user decides to use other (e.g. more advanced views), the application starts loading required components on demand.

Especially if you are building a web application which can be used on phone and tablets (which represents about 60% of the total web traffic now), you have to consider that most users will not have a 4G mobile connection and initial load times can become prohibitive in an environment where the download bandwidth is limited.

Loading time is a major contributing factor to page abandonment. The average user has no patience for a page to take too long to load. Slower page response time results in an increase in page abandonment. Nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds.

So improving the initial load time of your web application is critical. And this is the main use case for lazy loading.

When and what to lazy load ?

As explained above lazy loading makes sense when you want to reduce the initial load times and are ready to accept that loading additional views might not be instantaneous. Ideally, at some point in time during the run time of your application, you would be able to determine that the user will need a specific view and load it asynchronously in the background. Unfortunately, this kind of smart lazy loading is very difficult to implement for two reasons. First, it is not so easy to predict that a user will need a specific view. Second, asynchronicity introduces additional problems which increase the complexity of your application.

This is why lazy loading is mostly implemented in such a way that when a user activates a view (or a sub-part) of your application which hasn’t yet been loaded, it is loaded on the fly before displaying it.

A loading mechanism can be implemented on different levels. Having a fine granular lazy loading mechanism, reduces the maximum wait time for the user when something is loaded. But the complexity of your application grows (potentially exponentially) as well, the more fine granular it is. Since our general rule is not to optimize upfront but only find a solution to problems you are actually facing, this requires a strategy along these lines:

  1. First load everything upfront (this is how most desktop applications work). If you face problems because of high initial load time, continue optimize. Otherwise you are done.
  2. Lazy load individual modules of the application. This is the way I handle lazy loading in the application I used as a basis for my previous post. If the load times are acceptable, then stop optimizing. “Acceptable” could either mean that the load times for all parts of the application are good enough or that the load times are good for 95% of the use cases and the user only has a longer wait time for rare use cases.
  3. Keep reducing the granularity of lazy loaded resources…
  4. Until the performance is acceptable.

AngularJS components vs. Module loading

If you google for AngularJS lazy loading, you will find many resources. Most of them teach you how to lazy load controllers, directives, etc. The difference between these approaches and i.e. the one described in my previous post is basically that when you just lazy load controllers and such, you have a single module which is initialized at the beginning and for which you register additional components on the fly. This approach has two drawbacks:

  1. You cannot organize your application in multiple AngularJS modules.
  2. This doesn’t work well for third-party party AngularJS modules.

Both of these drawbacks have the same root cause. Since AngularJS does not only rely on JavaScript files to be loaded but also need to have the modules properly registered in order to inject them using DI, if this step is missing because the files were loaded later on, new AngularJS modules will not be available.

That’s why you need to additionally handle the invoke queue, config blocks and run blocks when lazy loading new AngularJS modules.

Also note that whenever the term “module” is used in this context, it can mean two different things:

  1. AMD module as used in RequireJS. These modules just encapsulate a piece of code which has load dependencies to other modules. These are designed for asynchronous loading.
  2. AngularJS modules. These modules are basically containers for controllers, services, filters, directives…

When I reference modules in this article, I mean the second kind of modules.

Conclusion

I hope that with this article I made it clearer, why lazy loading AngularJS modules is not a stupid idea but should be handled carefully. You need to make sure that you choose the right level on which to lazy load components. And if you need to split your application in multiple modules or use third-party modules, it is definitely not sufficient to use most of the mechanisms you will find by quickly googling for lazy loading in AngularJS. Using RequireJS is definitely a first step in the right direction but you need to make sure that the loaded scripts are also made available to the AngularJS dependency injection container.

 

AngularJS: Stopping event propagation on ng-click

Let’s assume you have a link containing an additional icon e.g.:

<a href="" ng-click="doSomething()">
	<span class="glyphicon glyphicon-th-list" ng-click="doSomethingElse()"></span>
</a>

(this whole article of course only make sense if your <a> tag contains more than this or is displayed in such a way that it’s larger than the icon)

When you click outside of the <span> doSomething() will be called. But when you click on the <span> both doSomethingElse() and doSomething() will be called. This is because of event propagation. The click is processed by doSomethingElse and then the event propagates to the parent of the <span> tag i.e. the <a> tag and triggers doSomething().

Actually the fact that it’s an <a> tag doesn’t make much of a difference. If you replace the <a> tag by a <div> tag, you’ll get the same results.

In plain old JavaScript, you’d return false in your click handler to prevent event propagation. Doing this in doSomethingElse() unfortunately doesn’t help. doSomething() will still be called.

The code defining the ngClick directive looks like this (in AngularJS 1.3.15):

forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(eventName) {
    var directiveName = directiveNormalize('ng-' + eventName);
    ngEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
      return {
        restrict: 'A',
        compile: function($element, attr) {
          // We expose the powerful $event object on the scope that provides access to the Window,
          // etc. that isn't protected by the fast paths in $parse.  We explicitly request better
          // checks at the cost of speed since event handler expressions are not executed as
          // frequently as regular change detection.
          var fn = $parse(attr[directiveName], /* interceptorFn */ null, /* expensiveChecks */ true);
          return function ngEventHandler(scope, element) {
            element.on(eventName, function(event) {
              var callback = function() {
                fn(scope, {$event:event});
              };
              if (forceAsyncEvents[eventName] && $rootScope.$$phase) {
                scope.$evalAsync(callback);
              } else {
                scope.$apply(callback);
              }
            });
          };
        }
      };
    }];
  }
);

So it’s not returning the return value of the function used in ng-click. So we have two ways of solving this.

The first solution is to pass the $event parameter to your function and call both stopPropagation() and preventDefault():

<a href="" ng-click="doSomething()">
	<span class="glyphicon glyphicon-th-list" ng-click="doSomethingElse($event)"></span>
</a>

And:

this.doSomethingElse = function($event) {
	// do something else
	$event.stopPropagation();
	$event.preventDefault();
};

If you do not want to add this code in all ngClick handlers, you can also use a directive which will install a click handler on the element and return false:

<a href="" ng-click="doSomething()">
	<span class="glyphicon glyphicon-th-list" ng-click="doSomethingElse()" stop-propagation></span>
</a>

And:

.directive('stopPropagation', function () {
	return {
		restrict: 'A',
		link: function (scope, element) {
			element.bind('click', function (e) {
				return false;
			});
		}
	};
});

Both ways work. I ended up using the first one because it doesn’t involve going around AngularJS to get this solved but it does pollute your JavaScript code. So use the second one if it’s a problem for you and you’d rather only add an attribute to your HTML code. The advantage of the second approach is that you can easily add this behavior to any element by just adding the attribute.

AngularJS: RequireJS, dynamic loading and pluggable views

I’ve been using AngularJS for some time now and find declarative templates, the testability and dependency injection great.What I especially like is that the fact that AngularJS prescribes and dictates quite a lot, you are forced to bring some structure to the code of your application. This tends to reduce the velocity of the degeneration you often observe in larger JavaScript projects, where chaos slowly takes over.

But one of the things which was bothering me was that I always ended up adding some libraries/modules and forgetting to add them to my index.html. And sometimes after the list of loaded scripts grew quite a lot, figuring out where to insert this new script tag is really a pain.

Introducing RequireJS

So I decided some time ago to start using RequireJS to bring order in what was slowly becoming a mess. RequireJS does exactly what’s missing when you only rely on the AngularJS dependency injection: a file loader which supports dependencies and a way to define dependencies non-angular scripts (plain old JavaScript files).

Defining your AngularJS modules as RequireJS AMD modules with dependencies just means wrapping them in  a call to the define function e.g.:

define([
    'angular',
    'moment'
], function (angular, moment) {
    return angular.module('admin', [])
    	.controller('AdminController', ...);
});

Instead of loading all the scripts, you can replace all script tags by one of them loading RequireJS and referencing your main JavaScript file where RequireJS will be configured:

<script src="vendor/requirejs/require.js" data-main="scripts/main"></script>

main.js will contain the RequireJS configuration e.g.:

require.config({
    paths: {
        jquery: "../vendor/jquery/dist/jquery.min",
        jqueryui: "../vendor/jquery-ui/jquery-ui.min",
        angular: "../vendor/angular/angular.min",
        ngRoute: "../vendor/angular-route/angular-route.min",
    },
    shim: {
        angular: {exports: 'angular', deps: ['jquery']},
        jqueryui: {deps: ['jquery']},
        jquery: {exports: '$'},
        ngRoute: ["angular"],
    }
});

You also need to manually bootstrap your application to make sure that RequireJS loads all required dependency first. This is done by removing the ng-app attribute from your index.html and instead calling angular.bootstrap in main.js e.g.:

require.config({
	...
});

require([
        'angular',
        'scripts/app'
    ], function (angular, app) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['cards']);
        });
    }
);

This will load AngularJS, then load your app and then bootstrap your application.

Introducing RequireJS is actually quite some work (if all your files and modules are already there) but not really complex. The main issue I have faced was that there is no explicit dependencies between AngularJS and JQuery, so they might be loaded in any random order. If AngularJS is loaded before jQuery, it will revert to using jqLite which is definitely not sufficient for jQuery UI. This will lead to strange errors occuring. So what you need to do is make sure that jQuery is loaded before AngularJS. This can either be done by setting priorities in your RequireJS configuration (only works with RequireJS 1.x) or by making jQuery a dependency of AngularJS (in the shim section of RequireJS 2.x – see example above).

OK, after all small problem were solved and my application was running again, I looked back at what I had done and realized that even though I didn’t ever had to add a script tag to my main HTML file, it wasn’t yet as great as I thought it would be before I started moving to RequireJS. First, I still have to manage dependencies on 3 levels:

  1. Dependencies between files i.e. file load order
  2. Dependencies between AngularJS modules
  3. Dependencies to individual controllers or providers

The first kind of dependencies is now managed by RequireJS instead of having me manage it in index.html. The other two have not changed.

Moreover, my application still looked like a big monolithic application at runtime since even though the file load order was now computed by RequireJS based on dependencies, I was still loading all files and interpreting them at application start. No matter whether some modules, controllers, directives… might only be needed much later or for specific users not at all.

Introducing Lazy Loading

So I started looking into lazy loading. Luckily I quickly realized that the step introducing RequireJS in my application hadn’t been useless. It is indeed possible to lazy load controllers, directives and such in AngularJS without resorting to using RequireJS. But you then need to manage the JavaScript files containing them and their dependencies to external libraries manually. With RequireJS, all you need to do to have all required files loaded before registering the lazy loaded controllers, views and such is to wrap it all in a require call.

There are different levels of lazy loading which can be achieved in AngularJS (having different levels of difficulty and restrictions).

Dynamically Loading Controllers and Views

The first level of lazy loading is dynamically loading controllers and views to an already loaded AngularJS module. To associate views with controllers, you would typically put your routing code in a module’s config function:

$routeProvider
     .when('/customers',
        {
            controller: 'CustomersController',
            templateUrl: 'views/customers.html'
        })
    .when('/orders',
        {
            controller: 'OrdersController',
            templateUrl: 'views/orders.html'
        })
    .otherwise({ redirectTo: '/customers' });

This means that everything will be loaded at once at runtime using the $routeProvider object. The referenced controller must have already been registered or you will get an error while defining the routing. Lazy loading the views (i.e. the referenced template URL) is supported out of the box but the JavaScript code for your controllers needs to be loading upfront.

To allow lazy loading, you will need to use the resolve property (additionally to the templateUrl) and also make sure that your controllers are properly registered once the JavaScript file is loaded. So using RequireJS to load the scripts and their dependencies, your code would look like this:

$routeProvider.when('/customers', {
    controller: 'CustomersController',
    templateUrl: 'views/customers.html',
    resolve: {
        resolver: ['$q','$rootScope', function($q, $rootScope)
        {
            var deferred = $q.defer();
            require(['views/customers'], function()
            {
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });
            return deferred.promise;
        }]
    }
});

This makes sure that your controller doesn’t need to present immediately but that the resolver function will be called when this route is activated. The resolver function returns a promise we create using $q.defer. In order to load all required files and AMD modules, we wrap the logic in this function in a require block. Once the loading of the script and all dependencies is done, our callback is called which just resolves the deferred object.

Now, there is still a problem. All files will be loaded but you won’t be able to use the new controllers because they were created after startup. In order to have them properly registered, you will need to overwrite a few functions of your angular module to use compiler providers (such as $controllerProvider) instead (this needs to be done before using the $routeProvider). So you’re application js file would look like this:

define([
    'angular'
], function (angular) {
    var app = angular.module('app', []);

    app.config(['$routeProvider',
        '$controllerProvider',
        '$compileProvider',
        '$filterProvider',
        '$provide',
        function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;

            $routeProvider.when(...);

            $routeProvider.otherwise(...);
        }]);

    return app;
});

Now you will see that when you activate this view, not only the HTML template file will be loaded on the fly, but also the JavaScript file containing your controller. And your controller will be accessible from the view.

This approach works well and doesn’t require much additional code but it only works if the controller you’re lazy loading is controller on an existing module. And even if it is the case, you’ll notice it doesn’t work that well, when the controllers you are lazy loading bring their own dependencies (other modules with controllers and directives).

Registering AngularJS modules dynamically

So to have a more robust and versatile solution, we need to be able to register and activate AngularJS modules dynamically (and the modules on which they are dependent).

In order to do it, we first need to understand what happens when you load a new module at startup. A module contains the following data which are relevant when you want to dynamically activate it:

  • A list of dependencies: module.requires
  • An invoke queue: module.invokeQueue
  • A list of config blocks to be executed on module load: module.configBlocks
  • A list of run blocks to be executed after injector creation: module.runBlocks

When a module is registered, AngularJS checks whether all referenced modules are available.

Whenever you call a function on your module (e.g. config, run, controller, directive, service…), it just pushes the provided function to a queue. In case of config, the queue is module.configBlocks. For run, it goes to module.runBlocks. For the others, it’s module.invokeQueue.

On module load, AngularJS will concatenate the run blocks (but without executing them yet), run the invoke queue and then run the config blocks. Once the modules are loaded, all run blocks will be executed.

When loading modules dynamically, the phase when modules are usually loaded is over, so even though the JavaScript files are loaded by RequireJS, the modules will not be properly initialized. So we just need to perform manually what’s usually done automatically by AngularJS.

Module Dependencies

So the first step is to make sure that modules on which this module is dependent are activated first. So the function to load a module would start like this:

this.registerModule = function (moduleName) {
    var module = angular.module(moduleName);

    if (module.requires) {
        for (var i = 0; i < module.requires.length; i++) {
            this.registerModule(module.requires[i]);
        }
    }

    ...
};

The Invoke Queue

Each entry in the invoke queue is an array with three entries:

  1. A provider
  2. A method
  3. Arguments

So in order to process it, we need to have a list of providers:

var providers = {
    $controllerProvider: $controllerProvider,
    $compileProvider: $compileProvider,
    $filterProvider: $filterProvider,
    $provide: $provide
};

And invoke the appropriate method with the provided arguments:

angular.forEach(module._invokeQueue, function(invokeArgs) {
    var provider = providers[invokeArgs[0]];
    provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
});

The Config and Run Blocks

To execute the config and run blocks, you can just rely on $injector:

angular.forEach(module._configBlocks, function (fn) {
    $injector.invoke(fn);
});
angular.forEach(module._runBlocks, function (fn) {
    $injector.invoke(fn);
});

The registerModule function

So the complete registerModule function would look like this:

this.registerModule = function (moduleName) {
    var module = angular.module(moduleName);

    if (module.requires) {
        for (var i = 0; i < module.requires.length; i++) {
            this.registerModule(module.requires[i]);
        }
    }

    angular.forEach(module._invokeQueue, function(invokeArgs) {
        var provider = providers[invokeArgs[0]];
        provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
    });
    angular.forEach(module._configBlocks, function (fn) {
        $injector.invoke(fn);
    });
    angular.forEach(module._runBlocks, function (fn) {
        $injector.invoke(fn);
    });
};

Registering pluggable views

Now that we can we can register modules dynamically, we’re only one step away from defining views which can be plugged into our application. Imagine you have an application, with multiple views showing different (possibly unrelated) data. If you want others to be able to extend your application, you need to provide a way to define a pluggable view and load all such views setting the appropriate routes and providing some model which can be used to display the corresponding navigation links.

In order to store all data required for configuring the routing and creating the navigation links, we’ll be using an object (viewConfig). The routing (assuming you’re using ngRoute) is then configured this way:

    $routeProvider.when(viewConfig.viewUrl, {
        templateUrl: viewConfig.templateUrl,
        controller: viewConfig.controller,
        resolve: {
            resolver: ['$q', '$timeout', function ($q, $timeout) {

                var deferred = $q.defer();
                if (angular.element("#"+viewConfig.cssId).length == 0) {
                    var link = document.createElement('link');
                    link.id = viewConfig.cssId;
                    link.rel = "stylesheet";
                    link.type = "text/css";
                    link.href = viewConfig.cssUrl;
                    angular.element('head').append(link);
                }
                if (viewConfig.requirejsConfig) {
                    require.config(viewConfig.requirejsConfig);
                }
                require([viewConfig.requirejsName], function () {
                    pluggableViews.registerModule(viewConfig.moduleName);
                    $timeout(function() {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }]
        }
    });
};

It provides the following configuration possibilities:

viewConfig.viewUrl: it’s the relative routing URL e.g. “/admin”
viewConfig.templateUrl: it’s the relative URL for the HTML template of the view e.g. “views/admin/admin.html”
viewConfig.controller: it’s the name of the controller for the view e.g. “AdminController”
viewConfig.navigationText: it’s the text displayed on the navigation link e.g. “Administration”
viewConfig.requirejsName: it’s the name of the RequireJS AMD module e.g. “admin”
viewConfig.requirejsConfig: it’s the object to be added to the RequireJS configuration e.g. { paths: { ‘admin': ‘views/admin/admin’ } }
viewConfig.moduleName: it’s the name of the module being loaded e.g. “app.admin”
viewConfig.cssId: it’s the ID of the link tag created to load the CSS stylesheet e.g. “admin-css”
viewConfig.cssUrl: it’s the relative URL of the CSS stylesheet file e.g. “views/admin/admin.css”

In order not to have to define all these parameters every time we call the function to register the view, we’ll first define some defaults to be set when some of these parameters are not explicitly set:

if (!viewConfig.viewUrl) {
    viewConfig.viewUrl = '/' + viewConfig.ID;
}
if (!viewConfig.templateUrl) {
    viewConfig.templateUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.html';
}
if (!viewConfig.controller) {
    viewConfig.controller = this.toTitleCase(viewConfig.ID) + 'Controller';
}
if (!viewConfig.navigationText) {
    viewConfig.navigationText = this.toTitleCase(viewConfig.ID);
}
if (!viewConfig.requirejsName) {
    viewConfig.requirejsName = viewConfig.ID;
}
if (!viewConfig.moduleName) {
    viewConfig.moduleName = viewConfig.ID;
}
if (!viewConfig.cssId) {
    viewConfig.cssId = viewConfig.ID + "-css";
}
if (!viewConfig.cssUrl) {
    viewConfig.cssUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.css';
}

Using this, it’s sufficient to call our provider function like this in order to have a link added for our administration view:

$pluggableViewsProvider.registerView({ ID: 'admin', moduleName: "admin", requirejsConfig: { paths: { 'admin': 'views/admin/admin' } } });

Since the way the navigation links are displayed pretty much depends on how you do it in your markup, our provider will not do it itself but just store the corresponding information and provide it through the provider:

this.views = [];
...
this.views.push(viewConfig);

So the complete module for our provider looks like this:

(function () {
    'use strict';

    define([
        'angular'
    ], function (angular) {
        return angular.module('pluggableViews', [])
            .provider('$pluggableViews', [
                '$controllerProvider',
                '$compileProvider',
                '$filterProvider',
                '$provide',
                '$injector',
                '$routeProvider',
                function ($controllerProvider, $compileProvider, $filterProvider, $provide, $injector, $routeProvider) {
                    var providers = {
                        $compileProvider: $compileProvider,
                        $controllerProvider: $controllerProvider,
                        $filterProvider: $filterProvider,
                        $provide: $provide
                    };
                    this.views = [];

                    var pluggableViews = this;

                    this.registerModule = function (moduleName) {
                        var module = angular.module(moduleName);

                        if (module.requires) {
                            for (var i = 0; i < module.requires.length; i++) {
                                this.registerModule(module.requires[i]);
                            }
                        }

                        angular.forEach(module._invokeQueue, function(invokeArgs) {
                            var provider = providers[invokeArgs[0]];
                            provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
                        });
                        angular.forEach(module._configBlocks, function (fn) {
                            $injector.invoke(fn);
                        });
                        angular.forEach(module._runBlocks, function (fn) {
                            $injector.invoke(fn);
                        });
                    };

                    this.toTitleCase = function (str)
                    {
                        return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
                    };

                    this.registerView = function (viewConfig) {
                        if (!viewConfig.viewUrl) {
                            viewConfig.viewUrl = '/' + viewConfig.ID;
                        }
                        if (!viewConfig.templateUrl) {
                            viewConfig.templateUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.html';
                        }
                        if (!viewConfig.controller) {
                            viewConfig.controller = this.toTitleCase(viewConfig.ID) + 'Controller';
                        }
                        if (!viewConfig.navigationText) {
                            viewConfig.navigationText = this.toTitleCase(viewConfig.ID);
                        }
                        if (!viewConfig.requirejsName) {
                            viewConfig.requirejsName = viewConfig.ID;
                        }
                        if (!viewConfig.moduleName) {
                            viewConfig.moduleName = viewConfig.ID;
                        }
                        if (!viewConfig.cssId) {
                            viewConfig.cssId = viewConfig.ID + "-css";
                        }
                        if (!viewConfig.cssUrl) {
                            viewConfig.cssUrl = 'views/' + viewConfig.ID + '/' + viewConfig.ID + '.css';
                        }

                        this.views.push(viewConfig);

                        $routeProvider.when(viewConfig.viewUrl, {
                            templateUrl: viewConfig.templateUrl,
                            controller: viewConfig.controller,
                            resolve: {
                                resolver: ['$q', '$timeout', function ($q, $timeout) {

                                    var deferred = $q.defer();
                                    if (angular.element("#"+viewConfig.cssId).length == 0) {
                                        var link = document.createElement('link');
                                        link.id = viewConfig.cssId;
                                        link.rel = "stylesheet";
                                        link.type = "text/css";
                                        link.href = viewConfig.cssUrl;
                                        angular.element('head').append(link);
                                    }
                                    if (viewConfig.requirejsConfig) {
                                        require.config(viewConfig.requirejsConfig);
                                    }
                                    require([viewConfig.requirejsName], function () {
                                        pluggableViews.registerModule(viewConfig.moduleName);
                                        $timeout(function() {
                                            deferred.resolve();
                                        });
                                    });
                                    return deferred.promise;
                                }]
                            }
                        });
                    };
                    this.$get = function () {
                        return {
                            views: pluggableViews.views,
                            registerModule: pluggableViews.registerModule,
                            registerView: pluggableViews.registerView,
                            toTitleCase: pluggableViews.toTitleCase
                        };
                    }
                }]);
    });
}());

This is an example of how to use this provider in order to register pluggable views:

(function () {
    'use strict';

    define([
        'angular',
        'ngRoute',
        'pluggableViews',
        'views/nav/nav'
    ], function (angular) {
        var app = angular.module('cards', [
            'ngRoute',
            'pluggableViews',
            'cards.nav'
        ]);
        app.directive('navbar', function () {
            return {
                restrict: 'E',
                templateUrl: '../views/nav/nav.html'
            };
        });
        app.config(['$routeProvider',
            '$pluggableViewsProvider',
            function ($routeProvider, $pluggableViewsProvider) {
                $pluggableViewsProvider.registerView({
                    ID: 'walls',
                    moduleName: "cards.walls",
                    requirejsConfig: {paths: {'walls': 'views/walls/walls'}}
                });
                $pluggableViewsProvider.registerView({
                    ID: 'admin',
                    moduleName: "cards.admin",
                    requirejsConfig: {paths: {'admin': 'views/admin/admin'}}
                });
                $pluggableViewsProvider.registerView({
                    ID: 'reports',
                    moduleName: "cards.reports",
                    requirejsConfig: {paths: {'reports': 'views/reports/reports'}}
                });

                $routeProvider.otherwise({redirectTo: '/walls'});
            }]);

        return app;
    });
}());

In each view (which needs the navigation bar), I use the navbar directive which template contains the following:

<ul class="nav navbar-nav" ng-controller="NavigationController">
    <li ng-repeat="view in views track by $index" ng-class="navClass(view.ID)"><a href='#{{view.viewUrl}}'>{{view.navigationText}}</a></li>
</ul>

And the NavigationController gives us access to the views configured:

'use strict';
define([
    'angular',
    'pluggableViews'
], function(angular) {
    angular.module('cards.nav', [
        'pluggableViews'
    ])
        .controller('NavigationController', ['$scope', '$location', '$pluggableViews', function ($scope, $location, $pluggableViews) {
            $scope.navClass = function (page) {
                var currentRoute = $location.path().substring(1) || 'home';
                return page === currentRoute ? 'active' : '';
            };

            $scope.views = $pluggableViews.views;
        }]);
});

In this example, the pluggable views registered are hardcoded in my application but having a separate file containing the view configuration is fairly easy and would be a way to make your views truly work as plugins.

So that’s it for this post. We’ve build an provider which allows us to register views on the fly considering their dependencies and allowing the navigation bar or panel to be extended. Of course, you’ll still need to add some error handling, some logic to make sure that modules you depend on do not get activated multiple times… But this is all for a next post.

CSS: centering an elemenent vertically and horizontally

I had already written an article about this quite some time ago. The problem with this approach is that it only works with elements having a fix size. So I’ve written an article specific to the horizontal centering of variable width DIVs last year. The problem with this approach is that although it works I have no clue why and feel it might break some time in the future. Also this approach only works for centering horizontally. Luckily, since then, I’ve able to use another approach which seems cleaner and also doesn’t require my components to have a fix size and works both vertically and horizontally, without using any strange hacks.

First let’s start with a non-centered element:

<html>
	<body>
		<div style="background-color:green;width:35%;height:35%">
	</body>
</html>

It’s green and it has a height and width of 35% (so no fixed size). As expected, it’s displayed in the upper left corner:

not centered

Obviously, the first thing you’d try and is giving it a top and left margin of 50% to center it:

<html>
	<head>
		<style>
		.centered {
			margin-left: 50%;
			margin-top: 50%;
		}
		</style>
	</head>
	<body>
		<div class="centered" style="background-color:green;width:35%;height:35%">
	</body>
</html>

Unfortunately, this will move the element past the center. You’ll also notice that it’s off by a lot vertically but less horizontally:

margins 50 percent

This is because margin-top doesn’t use the height of the container to compute percentages to pixels but just like margin-left, it uses the width. So if your container is square, you won’t see a difference but otherwise, it’s a problem. So using margin-top is no option. Instead, we’ll set the position to relative and set top to 50%. Ok, we’d implement it without hacks but this one not really a bad one…

<html>
	<head>
		<style>
		.centered {
			margin-left: 50%;
			top: 50%;
			position: relative;
		}
		</style>
	</head>
	<body>
		<div class="centered" style="background-color:green;width:35%;height:35%">
	</body>
</html>

This now looks better but it’s still not properly centered:

better 50 percent

As you can probably guess now, the problem is that the upper left corner of the element is centered both vertically and horizontally. Not the center of the element. In order to correct this, we need some CSS properties which unlike the margin-xxx or top do not take into account the dimensions of the container but the dimensions of the element. Actually there aren’t so many properties like this. Luckily CSS transformations do work with the dimensions of the element. So a translation of -50% both vertically and horizontally will center the element:

<html>
	<head>
		<style>
		.centered {
			margin-left: 50%;
			top: 50%;
			position: relative;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		</style>
	</head>
	<body>
		<div class="centered" style="background-color:green;width:35%;height:35%">
	</body>
</html>

Now it looks exactly the way it’s supposed to:

centered

AngularJS: Running a directive after data has been fetched

In one of my AngularJS projects, I am using the angular-split-pane directive which is basically wrapping the split-pane JQuery plugin. This directive finds out how to split the panes and position the slider by reading the height and width attributes of the HTML tag.

I needed to add a functionality to my application so that the position of the slider is written to some session file on the server and reused next time the application is started to reposition the sliders at the same position, basically setting the height of the lower pane in percentage.

The previous position is fetched using $http. The problem is that it runs asynchronously and by the time the results are there, the directive has already been processed and changing the height tag has no effect anymore.

You can define the order in which directives are run by setting the priority property. But I needed a way to have the directive processed after the results from the server were available, not after or before another directive is processed.

After searching for a solution for quite some time, I finally find a way of implementing it late at night. This is actually pretty simple but for some reason it took me forever to think about such a solution.

When I fetch the data from the server I set some variable in my scope e.g.:

$http.get("../api/Config/").success(function(data) {
	sessionModel.ui = data;
});

Since I only want to execute the directive once the data is fetched, this means I want to have it executed once sessionModel.ui has a value. So all I need to do is add an ng-if attribute to my tag. Since the variable is initially not set, AngularJS will remove the element from the DOM and once the value is set, it will recreate it having the directive executed. So my tag would now look like this:

<split-pane ng-if="sessionModel.ui">

Of course the small disadvantage of this solution is that my UI is first shortly rendered without the split pane and when the data has been fetched, the split-pane is also rendered. In order not to have a partial rendering of the UI, you could of course move the ng-if attribute higher in your HTML code so that the whole UI is only rendered once the data from the server is available.

If your directive is not replacing the DOM element but just manipulating them, another solution would be to have the logic run asynchronously using $timeout and repeat until the data from the server is available. Or having it applied once the data is available by using $watch.

C#: WPF / Console Hybrid Application

I am working on a WPF application which needs to also provide a command line interface running as a console application. This means that depending on how it is started, it should either work as a console application or start with a GUI.

In my case I already had a WPF application by the time this requirement came in. So I had to adapt my existing application to make it an hybrid application.

First I created a new class Program with a Main method:

using System;

namespace HybridApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
        }
    }
}

You might get an error saying that there are two Main methods, so you will have to select this new class as Startup object in the project properties.

Then you need to set the output type to “Console Application” in the project properties:

Output Type Console Application

This is required so that your application doesn’t automatically start with a GUI.

Now we’ll need either keep running as a Console application or start the WPF application depending on how the application was started.

First in order to be able to start the WPF application, you’ll need to add the STAThread attribute to your main method:

using System;

namespace HybridApp
{
    public class Program
    {
        [STAThread]
        public static void Main(string[] args)
        {
        }
    }
}

We’ll now assume that in order to start the UI, we’ll call the application with the -g argument. In order to start the GUI, all you need is to call the Main method of your WPF application:

using System;

namespace HybridApp
{
    public class Program
    {
        [STAThread]
        public static void Main(string[] args)
        {
			if (args.Length > 0 && args[0] == "-g") {
				// GUI mode
				App.Main();
			}
			else {
				// console mode
			}
        }
    }
}

Now, you’ll notice that when starting in GUI mode, you will still have a Console window displayed. This doesn’t look good. I did not find a way to completely get rid of it but at least managed to hide it before starting the UI so that you only see the console window for a very short time. In order to do this, you need to use GetConsoleWindow from kernel32.dll in order to get the handle of the console window and ShowWindow from user32.dll in order to hide it:

using System;
using System.Runtime.InteropServices;

namespace HybridApp
{
    public class Program
    {
        [DllImport("kernel32.dll")]
        private static extern IntPtr GetConsoleWindow();

        [DllImport("user32.dll")]
        private static extern bool ShowWindow(IntPtr hWnd, int nCmdShow);

        [STAThread]
        public static void Main(string[] args)
        {
			if (args.Length > 0 && args[0] == "-g") {
				// GUI mode
				ShowWindow(GetConsoleWindow(), 0 /*SW_HIDE*/);
				App.Main();
			}
			else {
				// console mode
			}
        }
    }
}

Now all you need is to implement the logic for the console mode and you’re done !

 

Update: The problem with this solution is the console shortly flickering on the screen before it is hidden (when you start the GUI mode). I also tried another solution, making my application a Windows application and using AttachConsole to connect to the parent console. This kind of works. Your GUI will start without console being shortly displayed. And the output of your command line code will be displayed on the console. The problem is that as a Windows application, your application will fork on startup and even though it still writes to the console, it will not control it. So control will be immediately returned to the calling application/user. This is of course not what you’d expect from a command line application. The only way to retain control of the console is to make your application a Console application.

Update: Another solution is to implement the way Microsoft build devenv (Visual Studio) or the way the Windows Script Host does it. There are two executables devenv.com and devenv.exe (or wscript.exe and cscript.exe). One is used from the command line and the other to start the GUI. If you need to start one and then switch to another mode, you can start the second one and exit. For devenv, it also relies on the fact that com files get picked before exe files when you call it from the command line without the file extension. But in my case I just didn’t want to produce two executables so I decided to live with the short console flickering.

AngularJS: binding HTML code with ng-bind-html and $sce.trustAsHtml

I am working on a project in which based on some user interactions I am calling a service on the server and receive some pieces of HTML code which I need to display in the UI.

Of course I could just inject them in the DOM but to keep it clean I wanted to just store the HTML in the scope and bind it to an HTML tag. Basically doing something like this:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js" data-semver="1.4.0-beta.6" data-require="angular.js@*"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-bind-html="myHtmlVar"></div>
</body>

</html>

The JavaScript code being:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.myHtmlVar= "<a href='http://benohead.com'>benohead.com</a>";
});

This will unfortunately not work and you will get the following error message in the JavaScript console:

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

This basically means that the value we provided to ng-bind-html is not inherently safe and is also not marked as safe. So we need to mark it as trustworthy. This can be done by using $sce.trustAsHtml. An easy fix to the problem is to use the following:

app.controller('myCtrl', function($scope, $sce) {
    $scope.myHtmlVar= $sce.trustAsHtml("<a href='http://benohead.com'>benohead.com</a>");
});

If you do not want to add the calls to trustAsHtml everywhere in your code, you can also introduce a function in your scope and reference it in your page:

app.controller('myCtrl', function($scope, $sce) {
    $scope.myHtmlVar= "<a href='http://benohead.com'>benohead.com</a>";
    
    $scope.trustAsHtml = function(html) {
      return $sce.trustAsHtml(html);
    }
});

This function can then be called in the ng-bind-html attribute:

<div ng-bind-html="trustAsHtml(myHtmlVar)"></div>

Another way to do it is to define a filter which works in exactly the same way as the trustAsHtml function above:

app.filter('trustAsHtml', function($sce) {
  return function(html) {
    return $sce.trustAsHtml(html);
  };
});

app.controller('myCtrl', function($scope, $sce) {
  $scope.myHtmlVar = "<a href='http://benohead.com'>benohead.com</a>";
});

And use it like this:

<div ng-bind-html="myHtmlVar | trustAsHtml"></div>

Also note that if you want to set the HTML to the scope variable and then perform some DOM manipulation on this HTML code, you’ll run into a problem, because as long as your code is running, the data binding won’t be reflected until you return. Here is such an example:

app.controller('myCtrl', function($scope, $sce, $http) {
	$scope.myHtmlVar = "<a href='http://benohead.com'>benohead.com</a>";

	$scope.getHtmlCode = function (serviceParameter) {
		var responsePromise = $http.post("my-service-url", JSON.stringify(serviceParameter));
		responsePromise.success(function (data) {
			$scope.myHtmlVar = data;
			$scope.manipulateDom();
		});
	};
	
	$scope.manipulateDom = function () {
		//do some DOM manipulation on the retrieved HTML code...
	});
});

In order to execute some additional code, you’ll have to wrap it using $timeout:

app.controller('myCtrl', function($scope, $sce, $http, $timeout) {
	$scope.myHtmlVar = "<a href='http://benohead.com'>benohead.com</a>";

	$scope.getHtmlCode = function (serviceParameter) {
		var responsePromise = $http.post("my-service-url", JSON.stringify(serviceParameter));
		responsePromise.success(function (data) {
			$scope.myHtmlVar = data;
			$timeout(function() {
				$scope.manipulateDom();
			});			
		});
	};
	
	$scope.manipulateDom = function () {
		//do some DOM manipulation on the retrieved HTML code...
	});
});

 

Getting a file extension with JavaScript

For a current project, I needed to get the extension of a file being given it’s full path. In C#, you’d do something like this:

var extension = Path.GetExtension(path);

Unfortunately, we have no such possibility in JavaScript. Fortunately, writing a function returning the extension in JavaScript is not that difficult.

First you need to get the file name from the full path (basically getting rid of all parent directories in the path). In order to do this you have to also consider that you could either have a slash or a backslash as separator in the path.

The file name is basically, the last part of the path when you split it with the file path separator. This means you just need to use a split and a pop:

var filename = path.split('/').pop(); // when using slash as a file path separator

var filename = path.split('\\').pop(); // when using backslash as a file path separator

In order to handle both, you just need to do it twice:

var filename = path.split('\\').pop().split('/').pop();

It doesn’t really matter in which order you do it. If you use slashes, the first split/pop combination will not do anything. If you use backslashes, the second one will not do anything.

Getting the file name without path information is important because we’ll be searching for the extension based on dots in the path. If one of the parent directories does contain a dot, it will return a wrong results, so it’s safer to first get the file name without path information and then get the file extension.

Now we have the file name (without full path information), we need to extract the extension.

Let’s first look at which results we expect in different cases:

  • if the input name is an empty string, the returned extension should be an empty string as well
  • if the input name is does not contain any dots, the returned extension should be an empty string
  • if the input name contains only one dot and it’s the first character of the file name (e.g. .htpasswd), the returned extension should be an empty string
  • if the input name starts with a dot but contains another dot (e.g. .htpasswd.sav), the returned extension should be the part after the last dot
  • in general if the name contains any dots which are not at the beginning of the file, the returned extension should be the part after the last dot

You can get the index of the last dot in the file name using:

filename.lastIndexOf(".")

This will return -1 if no dot is present in the name. In this case, there is no extension and we can return an empty string:

var lastIndex = filename.lastIndexOf(".");
if (lastIndex < 0) return "";

Actually, even if it returns 0, it means that the file name starts with a dot and contains no further dots. In this case we also want to return an empty string:

var lastIndex = filename.lastIndexOf(".");
if (lastIndex < 1) return "";

In other cases (i.e. when we have at least one dot which is not at the beginning of the name), we want to exclude everything until the dot (including it) and return the rest:

var lastIndex = filename.lastIndexOf(".");
if (lastIndex < 1) return "";
return filename.substr(lastIndex + 1);

So the complete function to get the file extension from an arbitrary file path is:

function getFilePathExtension(path) {
	var filename = path.split('\\').pop().split('/').pop();
	var lastIndex = filename.lastIndexOf(".");
	if (lastIndex < 1) return "";
	return filename.substr(lastIndex + 1);
}

Now let’s test it a little bit and check that we do get the expected results:

console.log(getFilePathExtension(""));
console.log(getFilePathExtension("name"));
console.log(getFilePathExtension("name.ext"));
console.log(getFilePathExtension(".name"));
console.log(getFilePathExtension(".name.ext"));
console.log(getFilePathExtension("name.with.a.few.dots.ext"));
console.log(getFilePathExtension("/path/with/.a/few/dots"));
console.log(getFilePathExtension("/path/with/.a/few/.dots"));
console.log(getFilePathExtension("/path/with/.a/few/.dots/name.with.a.few.dots.ext"));

As expected the 4 tests where the name ends with “.ext” will return ext. The others will return an empty string.

You can make the function above even a little bit compacter (but less readable) by using Infinity as index in case the index returned is 0 or less. This is done by using:

  1. the Math.max function so that we get 0 whether lastIndexOf returns -1 or 0
  2. the fact that 0 is evaluated as false
  3. the fact that substr will return an empty string if the provided index is higher than the index of the last character
  4. the fact that Infinity + 1 is still higher than the index of the last character

So the compacter code looks like this:

function getFilePathExtension(path) {
	var filename = path.split('\\').pop().split('/').pop();
	return filename.substr(( Math.max(0, filename.lastIndexOf(".")) || Infinity) + 1);
}

 

AngularJS: Using Plupload in a dialog

Plupload is a very configurable JavaScript library you can use to allow your users to upload images. I’ve already used it in a few projects. I now wanted to use it in my current AngularJS project. Integrating Plupload in an AngularJS project is not especially difficult. There are already a few articles showing how this can be done. But it gets more difficult, when you try to integrate it into a dialog.

When initialized, Plupload puts an overlay above the browse button. This unfortunately only works if this element is displayed. If it is not displayed, the Plupload initialization will fail.

When working with dialogs, this means you need to execute the initialization of Plupload once the dialog is already displayed.

Let’s assume you have the use the following method to open a dialog using ngDialog:

$scope.uploadFile = function(){
	ngDialog.open({
		template: '/template/fileUploadDialog.html',
		controller: 'FileUploadController'
	});
};

and your controller looks like this:

app.controller('FileUploadController', function($scope){
	$scope.uploader = new plupload.Uploader({
		browse_button: 'browse',
		url: 'upload.php'
	});

	$scope.uploader.init();
});

Or if you are using angular-dialog-service:

$scope.uploadFile = function () {
	dialogs.create('/template/fileUploadDialog.html', 'FileUploadController', {}, {
		'backdrop': false,
		'size': 'sm',
		'copy': false,
		'windowClass': 'dialog-type-primary'
	});
};

and the same controller.

You will see that although you do not get any kind of error, nothing will happen when you click on the browse button. This is because no overlay was added by Plupload. If you put a breakpoint in the controller code, you will see that the dialog is not yet displayed when the code runs.

This is because Plupload has issues rendering inside elements which are hidden at initialization time You need to “refresh” Plupload after the dialog has been displayed:

$scope.uploader.refresh();

Now we know the root cause of the problem, all we need to do is either call the refresh method after displaying the dialog or just initialize Plupload after displaying the dialog. The problem is that I never found out how to provide a callback to get triggered after the dialog has been displayed.

After googling for it with no result, I decided to do it with a hack (won’t win a design price with this one but it works). Assuming the dialog will never take more than 300 milliseconds to display and the user will need at least 300 milliseconds to find the browse button, you can just solve it by executing some code asynchronously using setTimeout or $timeout (since we work with AngularJS):

app.controller('FileUploadController', function($scope, $timeout){
	$scope.uploader = new plupload.Uploader({
		browse_button: 'browse',
		url: 'upload.php'
	});

	$timeout(function () {
		$scope.uploader.init();
	}, 300);
});

Now your browse button should be working.

Plupload: previewing images and getting Data URI

I am working on a project where users can be created and assigned an image. The natural choice to upload images is to use Plupload. Plupload is a well-known JavaScript library to upload images using a variaty of uploader runtimes. It provides an HTML4 and an HTML5 runtime but also a Flash and a Silverlight runtime. You can configure a list of runtimes. Plupload will check for you which one is available on the particular client.

The usual way to use Plupload is to let the user select files with a native dialog or using drag&drop. You then upload the file to some server side business logic and display the progress. In my case, I wanted something different. First I want to show the selected image to the user and second I want to store the image not on the server but in a model on the client (which contains other data and will eventually be stored somewhere).

In this article, I will describe how to display a preview of the image in a canvas and how to convert the image to a Data URI.

First you need to deploy Plupload on your web server and reference it’s JavaScript file e.g.:

<script src="vendor/plupload/plupload.full.min.js"></script>

Then you need to have some HTML code to define a button which will be clicked by the user to open the file browser and a tag to display the image preview:

<a href="" type="button" id="selectfiles">Select</a>
<div id="preview"></div>

Now you’ll have to write some JavaScript code to initialize Plupload:

var uploader = new plupload.Uploader({
	runtimes: 'html5,flash,silverlight',
	browse_button: 'selectfiles',
	multi_selection: false,
	url: "about:blank",
	flash_swf_url: 'vendor/plupload/Moxie.swf',
	silverlight_xap_url: 'vendor/plupload/Moxie.xap',
	filters: [{title: "Image files", extensions: "jpg,gif,png"}]
});

uploader.init();

We’ve defined that Plupload should use the selectfiles element to let the user open the file browser. If you use the Flash and/or Silverlight runtimes, you have to point Plupload to the URL of those SWF and XAP files. And we define that a user can only choose one file and that it needs to be a GIF, JPEG or PNG file. This all pretty standard.

The only special trick is that we use “about:blank” as URL for the upload. Actually, you can specify whatever you want. It just needs to be a non-empty string. Otherwise Plupload will not initialize successfully. But since we won’t use Plupload to actually upload the file, we do not care about the value of this option, as long as it is defined.

Then we’ll want to be notified when the user as selected a file. So we need to register for an event:

uploader.bind("FilesAdded", filesAdded);

function filesAdded (uploader, files) {}

Now we’ll implement the filesAdded function. It will get the selected file and will need to embed that image in canvas in our preview element. Luckily, Plupload provides us with an Image class which provides us with all we need to do this:

function filesAdded (uploader, files) {
	$.each(files, function () {
		var img = new mOxie.Image();
		img.onload = function () {
			$('#preview').empty();
			this.embed($('#preview').get(0), {
				width: 100,
				height: 100
			});
		};
		img.onembedded = function () {
			this.destroy();
		};
		img.onerror = function () {
			this.destroy();
		};
		img.load(this.getSource());
	});
};

Now once the user select a file, it will be displayed as a preview. Now once the user decides to save, we can use this preview to save the image (note that this works in my case because I only want to store a 100×100 image and do not need the original image):

var dataURI = $("#preview canvas")[0].toDataURL();

Now you can store the data URI however you want.

Additionally, if you have a previously stored data URI and want to display it in the preview area, you can use the following code:

$('#preview').empty();
var $canvas = $("<canvas></canvas>");
$('#preview').append($canvas);
var context = $canvas.get(0).getContext('2d');
$canvas.attr('width', '100');
$canvas.attr('height', '100');
$('#preview').append($canvas);
var image = new Image();
image.onload = function () {
	context.drawImage(image, 0, 0, 100, 100);
};
image.src = $scope.data.user.image;

It just creates a canvas, loads the data URI in an Image object and has it drawn in the canvas’ 2D context.