Archive for 'Javascript'

Lazy Loading in Angular

AngularJS does not yet have a way to load objects asynchronously, but you can use RequireJS to do it yourself. First, you need to wrap all controllers, factories, etc with AMD modules. They should look something like this:
define([
    // your dependencies
], function () {
    return ["myController", ["$scope", function($scope) {
       $scope.data = { label: "my data" };
    }]];
});
When initializing your application, do something like this:
var compileProvider,
        controllerProvider,
        filterProvider,
        provide;

    // create your application module and store references to the compileProvider, controllerProvider, filterProvider, and provider
    var module = angular.module('myApp', [], function ($compileProvider, $controllerProvider, $filterProvider, $provide) {
        compileProvider = $compileProvider;
        controllerProvider = $controllerProvider;
        filterProvider = $filterProvider;
        provide = $provide;
    });

     var lazyAngular = {
            registerFactoryProvider: function(factory) {
                provide.factory.apply(null, factory);
            },
            registerFilterProvider: function(filter) {
                filterProvider.register.apply(null, filter);
            },
            registerDirective  : function (directive) {
                compileProvider.directive.apply(null, directive);
            },
            registerController : function (controller) {
                controllerProvider.register.apply(null, controller);
            }
        };

    // Now, register a factory you can use to register lazily loaded controllers, directives, filters and factories
    module.factory("lazyAngular", function () {
        return lazyAngular ;
    });
    // Note that you can also reference the lazyAngular object directly, without dependency injection if you wish.
You can now load things asynchronously, for example:
// Make sure that you have lazyAngular in the current context (load it with dependency injection).
// Note that I have also seen developers put the registration methods in a global namespace, to easily reference the registration capability from everywhere without worrying about dependency injection.
// How you reference the lazyAngular object is up to you.
require(["myController"], function(myCtrl) {
    lazyAngular.registerController (myCtrl); // register the lazily loaded controller

   // you can now use this lazy loaded controller
});

Generate a Form from any JSON for quick and easy editing

I just wrote a JSON form generator that generates a form given any JSON string. With this utility you can:
  • Edit values in any object
  • Add new attributes to objects and arrays
  • Add/remove arrays and objects
  • Specify a custom template to use whenever a new object is created to increase productivity
The application can then give you the results of the form back in JSON.

Example:

Given this:
  
{
   name:"Rouben",
   company:"Cambridge Semantics",
   profile:"http://www.cambridgesemantics.com/people/about/rmeschian",
   "works with":[
      {
         name:"Sean Martin",
         profile:"http://www.cambridgesemantics.com/people/about/sean"
      },
      {
         name:"Simon Martin",
         profile:"http://www.cambridgesemantics.com/people/about/simon"
      },
      {
         name:"Ben Szekely",
         profile:"http://www.cambridgesemantics.com/people/about/ben"
      }
   ]
}
The generated form looks like this: I’ll make it prettier if I find the time. Until then I hope you find it useful.
This is a utility I wrote that comes in handy every now and then, so I thought I would share it with you. It allows you to replaces all the end of line characters in the given text with whatever you define. I often use this to format text for the web by replacing EOLs with break elements. For example, suppose we have this string:
"foo
bar
zoo"
We can use this utility to replace the EOLs with “, ” to get:
"foo, bar, zoo"
Replace EOL characters with:

Anzo on the Web Screenshots

Anzo on the Web is a semantically enabled application that allows users to view and edit their data. It runs in all major browsers, but I strongly recommend that you AVOID using Internet Explorer. Here are some screenshots of the application: