Yeoman is a new tool for simplifying your client-side development workflow. It supports a variety of different tools and frameworks, but I'm going to focus specifically on how it helps write AngularJS applications.

Out of the box, Yeoman includes some excellent features for building AngularJS apps. The best of these features is its generators. Generators allow you to quickly create new controllers, directives, services, unit tests, and even entire applications. It gives you the speed of boilerplates/seeds but with added flexibility. Let's look at an example. Yeoman infers the name of your project based on the name of its parent directory, so let's make a new directory and try it out:

Based on the HTML5 Boilerplate, this index file also includes an ngView and the script files needed by our application. Notice that the script file is named yeoman-test.js. This is because, as mentioned before, Yeoman infers the name of your project based on the name of its parent directory.

This creates our application-level module, then provides some basic routing. Notice that there is one view defined: views/main.html. For the sake of completion, let's take a look at this view, and its corresponding controller:

Again, not very interesting; the controller just publishes the list of awesomeThings onto the scope and the view makes an unsorted list from them.

But let's say we want to make a seperate view/controller and corresponding route for adding a new item to the list of awesomeThings. Normally, you'd have to make these two files, include their script tags into your index.html, and then rewrite your route configuration. With Yeoman, you can accomplish all of that with a single command:

λ → yeoman init angular:route add

This will tell Yeoman to generate all the files we need for a route called "add." Enter this command and take a look at the output:

Invoking angular:route also invoked angular:controller and angular:view. You can actually run either of these seperatly as well, in which case they will not modify yeoman-test.js to add a route. Also note that angular:controller added two files: the controller implementation in app/scripts/controllers/add.js as well as a unit spec in test/spec/controllers/add.js. We'll talk about testing more in a bit, but for now, let's see what the script block of index.html looks like now:

It's worth noting that Yeoman isn't rewriting these files; it carefully edits them in a non-destructive way. This means that you can create your own routes, add your own files, and still use Yeoman without fear that it's going to screw up your custom configurations somehow (but you're using source control anyway, so that wouldn't matter, right? ;P).

Testing

Testing with AngularJS is already easy, but Yeoman makes it even easier still. When you use Yeoman to generate a file for you, it will also generate a stubbed out Jasmine unit test for Testacular as well. Notice when we made a new route above, it created a unit spec as well. Let's open test/spec/controllers/main.js and see what it looks like:

Yeoman has created all of the boilerplate setup and teardown that a controller test would need. From here, you can easily add more tests by adding additional it and describe statements. For more on testing with Testacular, I recommend watching my colleague Vojta Jina's excellent screencast.

If you haven't yet installed Testacular, you can get it through NPM accordingly:

λ → npm install -g testacular

You can run the test as you usually would with Testacular, like this:

λ → testacular start

This will run Testacular in "watch mode" and have it automatically run the tests whenever you update the files. Alternatively, you can do a single run through Yeoman like this:

λ → yeoman test

which is just an alias for:

λ → testacular start --single-run

All of the typical pains of setting up the test runner and configuring it are taken care of by Yeoman. Testacular makes cross browser testing a breeze (just add additional browsers to your config file), and AngularJS gives you a clear seperation of concerns so you can write concise, focused tests. With these great tools, there's really no excuse not to unit test your code.

Building

To build the production-ready version of your app, simply run:

λ → yeoman build

Yeoman will automatically concatinate the scripts between <!-- build:js scripts/scripts.js --> and <!-- endbuild -->, version the file names, and update the references to the versioned files in your html. Automatic minification is not yet implemented, but it's coming soon!

Yeoman can also be configured to optimize images and do whatever else your application needs to be blazing fast. The build system is based on Grunt, which has many additional plugins and is highly extensible.