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

2013-12-31 00:00:00 +0000 by Alex R. Young

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.