Playing with Yeoman, AngularJS, and CoffeeScript
February 12, 2013
Yeoman looked really good so I tried it, and here are some finding that you should be aware of, at least with the version 0.9.6.
My original intention was to write a small app using AngularJS in CoffeeScript.
$ mkdir example $ cd example $ yeoman init angular --coffee ... $ yeoman coffee Running "coffee:compile" (coffee) task File app/scripts/app.js created. File app/scripts/controllers/main.js created. File test/spec/main.js created. Done, without errors. $ mkdir test/spec/services $ touch test/spec/services/dummy.coffee $ yeoman coffee Running "coffee:compile" (coffee) task File app/scripts/app.js created. File app/scripts/controllers/main.js created. File test/spec/controllers/main.js created. File test/spec/services/dummy.js created. Done, without errors.
Nothing fancy here, just plain yeoman.
1. Invoking an “init” for angular app with coffee option which generates files in coffeescript. At this point, we have the following coffeescript files:
app/scripts/app.coffee app/scripts/controllers/main.coffee test/spec/controllers/main.coffee
If you two files in two different directories under ‘test/spec’, js files are generated like the ones under ‘app/scripts’.
Build doesn’t compile main.scss
$ yeoman build $ yeoman server:dist
If you open the page with your browser, you see a plain-looking page with no css. This is already a known issue and will be fixed in 1.0. https://github.com/yeoman/yeoman/issues/348 But for now, just remove main.css in ‘app/styles’ and it should be fine.
Generator-generated CoffeeScript is not minification-safe
/app/scripts/controllers/main.coffee breaks when it goes through minification.
/app/scripts/app.coffee is fine though.
Here is the one generated by the generator.
'use strict' angular.module('exampleApp') .controller 'MainCtrl', ($scope) -> $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Testacular' ]
As the minification changes names of function arguments, you have to change the method invocation to alternative minification-safe form.
'use strict' angular.module('exampleApp') .controller 'MainCtrl', ['$scope', ($scope) -> $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Testacular' ] ] ]
It’s a bit cumbersome form, but to make it run, you have to do it. Hopefully in yeoman 1.0, ngmin will take care of minication without having to write this alternative format.
I’m looking forward to play with Yeoman 1.0 when it becomes available.