Scaffold your projects with Yeoman…

Yeoman is the kind of tools you need to have in your developer toolbox.
In few words, it will help you to gain productivity and will help you to quickly bootstrap your javascript projects.

Under the hood, Yeoman use several other frameworks to make the job done.
YO: Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
BOWER: Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. (i already wrote an article about bower)
GRUNT: Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.

Installing YO

To run Yeoman, Node needs to be installed on your local machine.
Installing yo is a breeze:

npm install -g yo

Using generators

With YO, you can generate several types of applications. The only thing to do is to install the appropriate generator.

All available generators are listed here.

Sample application with AngularJS

To illustrate the usage of Yeoman, let’s create an application based on the famous AngularJS framework.

1. Creating the application directory

mkdir yo
cd yo

2. Installing the angular-generator
The “Angular Generator” is the best candidate to create our angular application.

This generator comes with several usefull commands that will help you during your application development.
The generator documentation can be found here.

To install this generator, type the following command:

npm install angular-generator

3. Creating the application with YO
The following command will create an AngularJS application named ‘yo-angular-sample’.

yo angular yo-angular-sample

The previous command creates a fully functional package.json file for Node. This file declares all the dependencies needed by the application to make it running…

Let’s install these dependencies:

npm install

Once these dependencies are correctly installed, you can run the application with the following command:

grunt serve
This command runs and opens the application in the browser.

Angular scaffolded application with Yeoman
Good job Yeo! Yeoman has created a fully functional application that we can now modify to fit your needs…

4. Modifying the application
We want to modify this simple application to add a message when the user clicks on the about link.
To achieve this, we will create:
– A service that will be called by the controller
– A controller to handle user interaction

5. Creating the service

yo angular:factory helloWorldService --minsafe
Create a service using a factory named helloService

The service is now created in ‘scripts/services’ directory and is named helloWorldService.js.

Modify this service and add a ‘hello’ method that will be later called by the controller:

    return {
      hello: function () {
        return 'Hello World!';
      }
    };

6. Creating the controller

yo angular:controller helloWorldController --minsafe
Create a controller named helloWorlController

The controller is now created in ‘scripts/controllers’ directory and is named helloWorldController.js.

Modify this controller and declare the ‘about’ method that will handle the user click:

'use strict';

angular.module('yoAngularSampleApp')
  .controller('HelloworldcontrollerCtrl', function ($scope, helloWorldService) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.about = function(){
    	alert(helloWorldService.hello());
    };
  });

Please note the ‘helloWorldService’ injection in the controller declaration.

8. Binding the view
Now that everything is working perfectly behind the scene, we need to bind the application view with the controller.
The ng-click directive will be used to achieve this.

binding view and controller

9. Test our final application
The latest thing to do is to run the modified application. Run the appropriate Grunt command again:

grunt serve

Once the application is running, click on the about link and observe what is happening.

Angular scaffolded application with Yeoman (updated)

Great! Everything works as expected… When the user clicks on the about link, the helloWorldController is invoked and delegate the call to the helloWorldService that simply responds ‘hello world!’.

This short introduction to Yeoman is now over. The sources of this post are available on Git.
Have Fun!