Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX.

In this post we will discuss using Yeoman, which is a client-side stack that contains three tools and frameworks to help developers quickly build beautiful and scalable web applications. These tools include support for linting, testing, minification and more. Read Yeoman: Optimizing Your Workflow in AngularJS for more about Yeoman.


  1. Yo is used to generate things, from other generators to files and more.
  2. Bower is used for dependency management, downloading and installing .js components.
  3. Grunt is used for task management such as building, previewing and testing.

How To

We are going to use all of these tools described above to create an AngularJS application. The code is available on Github.

1. Installing Yeoman

Installation is pretty straight forward, since the official build script does all of the hard work for you.

To install yo, grunt, and bower, execute the following command:

If you run into installation issues please visit the Getting Started Wiki site.

2. Installing Generators

Before development we need to install a generator. Since we are going to use the AngularJS framework, let’s install the Yeoman AngularJS generator:

For documentation and how to create custom generators please visit the wiki.

3. Creating the Project

Let’s create the directory where our project will be stored. So, execute the following command:

Now we are ready to use the available generators to build our application:

  • angular:app
  • angular:controller
  • angular:directive
  • angular:filter
  • angular:route
  • angular:service
  • angular:view

Note: Generators are to be run from the root directory of your application.

a. Creating Application Structure angular:app

Creating the initial directory contents and structure for our application is very easy, just execute the following command:

This results in the following:

b. Creating Routes, Views, and Controllers angular:route

Adding a new route, view and controller to your application is easy with this single command:

This results in the following:

  • Creates a home.js controller skeleton in the app/scripts/controllers folder.
  • Creates a home.js test spec skeleton in the test/specs/controllers folder.
  • Adds the home.html template to the app/views folder.
  • Hooks up the home route in the main app module (app/scripts/app.js file).
  • Adds the home.js script include tag to your main app view index.html file.

c. Creating Controllers angular:controller

With controllers, you provide the logic using JavaScript to power your views:

This results in the following:

  • Creates a main.js controller skeleton in the app/scripts/controllers folder.
  • Creates a main.js test spec skeleton in the test/specs/controllers folder.

This is the controller logic for our application:

Here is a test for our main controller:

d. Creating Directives angular:directive

With directives, you can extend HTML to add declarative syntax to your views:

This results in:

  • Creates a contact.js directive skeleton in the app/scripts/directives folder.
  • Creates a contact.js test spec skeleton in the test/specs/directives folder.

And, here is a custom directive for our application:

And here is a test for our directive:

e. Creating Filters angular:filter

Filters are used for formatting data displayed to the user:

This results in the following:

  • Creates a tel.js directive skeleton in the app/scripts/filters folder.
  • Creates a tel.js test spec skeleton in the test/specs/filters folder.

And here is a custom filter for our application:

Here we have a test for our filter:

f. Creating Views angular:view

To create custom views for your application use the following command:

This creates a contactDirective.html view skeleton in the app/views folder.

The custom view for our contact directive is:

g. Creating Services angular:service

This results in the following:

  • Creates a contactsService.js directive skeleton in the app/scripts/services folder.
  • Creates a contactsService.js test spec skeleton in the test/specs/services folder.

Here is a custom service for our application:

And here is a test for our service:

5. Running the Project

To start the local web server run the following command:

Your browser should open up to a welcome page ready for development!

6. Testing the Project

Grunt takes care of running all of your tests using Karma, so execute the following command:

7. Building the Project

Building the production-ready version of your application usually involves many steps, but Grunt takes care of some of that for you:

  • Concatenates all your JS into one file.
  • Versions all your files.
  • Optimizes all images and HTML templates.
  • Concatenates all your CSS into one file.
  • Generates Application Cache manifest file.

Building your application is easy – just run the following command:

8. Deploying the Project

For deployment I choose to use AppFrog. Make sure you create an account and register your application first and then install the CLI tools.

  1. Install CLI Tools:
  2. Login to AppFrog:
  3. Deploy to AppFrog:

Read the following books for details about Yeoman and AngularJS.

Safari Books Online has the content you need

Developing an AngularJS Edge is intended for intermediate JavaScript programmers. No attempt has been made to explain the JavaScript syntax used (except in the cases where AngularJS may introduce a peculiarity), nor do we explain concepts such as closures, function chaining, callbacks, or other common patterns. What we do explain are basic AngularJS concepts, components, and their applications. We provide examples along the way, answer questions, and correct common misconceptions. Together, we’ll build a working single-page weblog application using AngularJS, which will help you become proficient with using AngularJS to go out and create your own applications.
Develop smaller, lighter web apps that are simple to create and easy to test, extend, and maintain as they grow. AngularJS is a hands-on guide that introduces you to AngularJS, the open source JavaScript framework that uses Model–view–controller (MVC) architecture, data binding, client-side templates, and dependency injection to create a much-needed structure for building web applications.
Instant AngularJS Starter is designed to get you ramped up on AngularJS as quickly and efficiently as possible. By the end of this book, you’ll possess all of the knowledge you need to make full-featured, real-life applications with AngularJS. The code samples are reusable, and specifically intended to give you a head start on your next project. This book will transform your curiosity about AngularJS into a set of production-ready AngularJS skills, through a broad overview of the framework and deep dives into its key features.
Developing a Backbone.js Edge incorporates best practices and the techniques from the combined authors’ experience of developing many Backbone applications. Some of the resources on the web advocate inefficient or inelegant solutions and there are few that cover the whole library. In this book we aim to provide a complete guide to Backbone and equip you to start using the library straight away.

About the author

jonnie Jonnie Spratley is currently working for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products. He also teaches a variety of programming courses at AcademyX, and can be reached at @jonniespratley.

Tags: AngularJS, Bower, Grunt, Yeoman, Yo,

Comments are closed.