The JavaScript blog.


ui validation coffeescript modal angularjs

AngularJS Roundup: ngDialog.js, ocLazyLoad, angular-validation

Posted on .

People keep sending me AngularJS scripts to write about, so I've collected a few together to start a probably infrequent AngularJS Roundup. This week we've got three scripts to talk about, and the first is ngDialog.js.


ngDialog.js (GitHub: likeastore / ngDialog, License: MIT) by Dmitri Voronianski is a modal dialog and popover provider. You can load it and display a dialog like this:

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

app.controller('MainCtrl', function($scope, ngDialog) {  
  $scope.clickToOpen = function () {
    ngDialog.open({ template: 'popupTmpl.html' });

The markup for the dialog can be a string, or loaded from a template:

<script type="text/ng-template" id="templateId">  
  <h1>Template heading</h1>
  <p>Content goes here</p>

You can even use the ng-dialog directive. The project comes with two default themes, and you can use one of those to get started creating your own. The default theme has CSS animations and media queries.


ocLazyLoad (GitHub: ocombe / ocLazyLoad) by Olivier Combe is a module for lazy loading dependencies in AngularJS. It's a service provider that allows you to load files with promises, like this:

  name: 'TestModule',
  files: ['testModule.js']
}).then(function() {

The blog post explains how the whole thing works, with detailed examples and explanations of how AngularJS loads modules.

Since the modules can only be loaded on startup and the application can only be launched using the ng-app directive, if we can find the app module, we can get the complete list of all loaded modules and dependencies.

Angular Validation

Angular Validation (GitHub: huei90 / angular-validation) by Huei Tan is a set of form validation directives. It supports various validation methods -- watch, blur, or submit, so you can show errors when it makes sense for your application.

It has some built in validation types, but you can add your own in JavaScript by loading the validation provider, and then adding new validation "expressions". Expressions are loaded based on the validator attribute. The readme has an example of how to do this, with the huei validator.

AngularJS with CoffeeScript

Finally, Elad Ossadon sent in an article about making AngularJS classes work better with CoffeeScript: Angular.js CoffeeScript Controller Base Class.

It's a fairly short post with a base class snippet and an example controller module.


libraries canvas browser coffeescript ES6

Data.IO, CoffyScript, Circular Progress

Posted on .


Data.IO (GitHub: scttnlsn / data.io, License: MIT, npm: data.io) by Scott Nelson is a library for bidirectional syncing over Socket.IO. It has server-side resources which encapsulate logic and persistence. Resources are stacks of composable middleware functions that sync client requests. The client-side component is comparatively lightweight -- it's lower-level than Backbone.js, so I suspect it could be used with any data binding library.

Data.IO allows you to keep core business logic on the server, while easily subscribing to data in the client. It's a bit like Backbone.js and Express, but purpose-built for working with data syncing.


CoffyScript (GitHub: loveencounterflow / coffy-script) by "loveencounterflow" is a port of CoffeeScript that adds support for yield from ES6:

If you have never programmed with iterators and generators, you may imagine as a 'resumable return' for starters. For the more technically oriented, ES6 defines generators as "First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations)." Well, maybe 'resumable return' is not so bad after all.

# Using a star after the arrow 'licenses' the use of `yield` in the function body;
# it basically says: this is not an ordinary function, this is a generator function:
count = ->*  
  yield 1
  yield 2
  yield 3

# Calling a generator function returns a generator:
counting_generator = count()

# Now that we have a generator, we can call one of its methods, `next`:
log counting_generator.next()   # prints: { value: 1, done: false }

# ...and we can go on doing so until the generator becomes exhausted:
log counting_generator.next()   # prints: { value: 2, done: false }  
log counting_generator.next()   # prints: { value: 3, done: false }  
log counting_generator.next()   # prints: { value: undefined, done: true }  
log counting_generator.next()   # throws an error saying "Generator has already finished"  

The documentation in the readme is thorough, and explores various aspects of working with yield. For example: How Not to Yield to Callback Hell: Serializing Control Flow.

Circular Progress

Circular Progress

Circular Progress (GitHub: neoziro / circular-progress, License: MIT, bower: circular-progress) by Greg Bergé is a progress widget with no dependencies. Given a Canvas element, it'll show a circular representation of a process's progress:

var progress = new CircularProgress({  
  radius: 70,
  strokeStyle: 'black',
  lineCap: 'round',
  lineWidth: 4



libraries html5 mobile games coffeescript

Contracts.coffee, Game Prototyping, Persistence.js

Posted on .


Contracts.coffee (GitHub: disnet / contracts.coffee) by Tim Disney is a new dialect of CoffeeScript that adds contracts.

Contracts let you clearly express how your code behaves, and free you from writing tons of boilerplate, defensive code.

// id is a function that should always be called with a number and return a number
id :: (Num) -> Num
id = (x) -> x

When I first looked at this I thought I was looking at Haskell, and the
author points out the similarity:

It looks a lot like types (in fact the syntax looks a lot like Haskell) but unlike types, contracts are enforced at runtime in pure JavaScript.

The Contracts.coffee site
includes lots of details on how to get started using the dialect. I
don't usually write CoffeeScript, but this twist on the language is
definitely extremely interesting.

TJ Holowaychuk on Game Prototyping

In Game prototyping with JavaScript &
TJ talks about game prototyping with CSS3, HTML5, and
move.js (GitHub: visionmedia / move.js, License: MIT). TJ discusses how he started writing a game for iOS, moved to Canvas, and
then discovered the performance gains of CSS3 and HTML.

He's posted a
game-prototype to GitHub, and I hope to see more (particularly as he mentions Grim
Fandango in his blog post).


Jacob Mumm emailed us about his experiences using
persistence.js, an asynchronous ORM mapper by Zef Hemel. In particular, persistence.js
comes with persistence.sync.js, a remote server
synchronisation plugin:

persystence.sync.js is a persistence.js plug-in that adds data synchronization with remote servers. It comes with a client-side component (persistence.sync.js) and a sample server-side component (persistence.sync.server.js) for use with node.js. It should be fairly easy to implement server-components using other languages, any contributions there are welcome.

I'd like to write more on mobile sync in the future, as I've done a lot
of work on native app syncing (mostly Objective-C), and I've also
recently been working with single page client-side apps that sync
against remote APIs. If you're interested in this area, give
persistence.sync.js a look.