Saturday, August 4, 2012

Modularizing an Angular app with AMD

How to create an Angular app that plays nice with AMD using Jam.


Setup

Installing Jam

The app's dependencies will be managed using AMD and RequireJS. 3rd party modules like Angular will be installed using Jam. Which will need to to be installed first. Jam itself is a npm artifact so if you don't have Node.js or npm installed you will need to do that before starting.

Installing AngularJS

With Jam installed you can now install 3rd party libraries like Angular in your project.

Note right now the angular artifact jam installs is not configured as a AMD module. You will need to use the global Angular object reference since AMD will not be able to provide the requested module.

Coding

We will start with the TodoMVC project for angular and adapt it into AMD modules.

Wrapping Angular App in AMD modules

Wrapping an Angular app in AMD modules is pretty straight forward you just need to export the Angular code so that it can be loaded. The biggest change will be with app.js file since you will not longer be exposing your app as a global var and will have to manually bootstrap Angular telling it to load your app.

app.js

The main thing here is to note that we are returning an object that can be loaded by other AMD modules so they can get a reference to the Angular module and it's factories.

todoBlur

Services and other Angular managed objects are pretty straight forward. You will need to load the app AMD module so you can call the factory methods on the Angular managed module.

I wish Angular had chosen something other than the term "module". Component or object would have made it easier to differentiate between AMD modules which are essentially a way of defining and loading source or code dependencies and Angular modules which are managed objects which can be injected.

Create main.js

This will be the main entry point to the application. It should load all the AMD modules containing Angular objects so they will be available when Angular bootstraps your app.

Updating index.html

Now that the application is wrapped with AMD modules you can replace all of the <script> tags with a single one that loads RequireJS. Setting data-main="main" tells RequireJS to load main.js as the root module.

Organizing

With the small todo example there is almost a 1:1 ratio between AMD modules and Angular modules. On a larger project you may want to create aggregator AMD modules which combine multiple AMD modules and export them or put multiple Angular modules in a single AMD module.

Reference

The full code is available here on Github.

Jam
A package manager for JavaScript for the frontend.
RequireJS
A JavaScript file and module loader for the browser.
AMD
The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
AngularJS
MVW framework for web apps.
npm
A package manager for JavaScript.
NodeJS
Non-blocking event driven javascript for the server.
TodoMVC
Example todo apps for lots of different frameworks.

Tuesday, June 28, 2011

Cloud9 Java, Groovy, Scala, and Maven support

Hopefully it will make it in to the main Cloud9 git repository soon. But you can try it out here until then.

Thursday, September 2, 2010

Meego IVI

I got Meego IVI installed on my backup and it's interface looks pretty sweet. I just wonder why they didn't wait until there was a music player in the repo to release the image? For me thats like 95% of what I use it for.

Some Screenshots


Thursday, August 26, 2010

GMaven 1.3 is out

I haven't seen this announced outside the mailing list.

Release Notes - GMaven - Version 1.3 (August 6,2010)

Bug

  • [GMAVEN-13] - sourceEncoding doesn't work
  • [GMAVEN-21] - gmaven-plugin does not support <source> and <target> configuration options
  • [GMAVEN-26] - GMaven packaging does not install artifacts with the correct extensions into the local repository
  • [GMAVEN-46] - Properties overridden on the command line not recognized
  • [GMAVEN-65] - Impossible to set any compiler configuration (sourceEncoding etc.)
  • [GMAVEN-70] - Groovy Interfaces with defined constants cause a compilation failure in generated stubs
  • [GMAVEN-71] - Generated Java stubs miss import for class BigDecimal (-> javac compile error)
  • [GMAVEN-75] - Stub generation issues
  • [GMAVEN-78] - Stubs not including auto imports - gmaven 1.2, groovy 1.7.3

Improvement

  • [GMAVEN-64] - use ${project.build.sourceEncoding} as default value for "sourceEncoding" parameter
  • [GMAVEN-72] - Update GMaven runtimes to current Groovy releases
GMaven 1.3 POM

Tuesday, April 13, 2010

GroovyWS Maven Dependency Configuration

After spending a day trying to get GroovyWS working in a Maven project and having tons of classpath issues (mostly between xerces and javax.xml). When I took a peek at it's pom and found the problem every xml api and web service api on the planet was included.

The code snippet works for using GroovyWS with CXF, I havn't tried any other framework(s) with it since CXF couldn't generate a correct proxy for a complex type containing a sequence of "any".

Anyone else have this sort of trouble with GroovyWS?

edit

I case anyone else is interested I created a issue. GMOD-136.

Monday, February 15, 2010

Groovy 1.7.0 and GMaven 1.2 Multi Module Projects

Update GMaven 1.3 is out
The documentation on the GMaven wiki is a bit out of date and shows how to setup a GMaven 1.0 project. There have been a couple of (big) releases of both GMaven and Groovy since then and GMaven has become its own project on Codehaus as well as changed their groupId from org.codehaus.groovy.maven to org.codehaus.gmaven. There seem to be a few other items you may or may not need to configure that weren't needed previously as well.

Hopefully the documentation will be updated soon but here is a comparison of poms between GMaven 1.0 and 1.2 that I've been using.