Playing with Yeoman, AngularJS, and CoffeeScript

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.

Coffee to JavaScript: a strange behavior

$ 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

Invoking “coffee” command to generate js files. This is where this strange behavior starts. Javascript files for two coffee files under ‘app/scripts’ are generated in the same directory as their corresponding coffee files. But ‘main.coffee’ file under ‘test/spec/controllers’ is generated one above where coffee file is located.
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.

Conclusion

I’m looking forward to play with Yeoman 1.0 when it becomes available.

blog comments powered by Disqus

About

Hidenari Nozaki: Software Engineer
Follow @ghiden

Published

12 Feb 2013