Kickstart Your AngularJS Development with Yeoman, Grunt and Bower

Brad Barrow
Tweet

Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process.

What we’ll cover

This AngularJS tutorial will cover:

  • Generating a bare bones AngularJS app with Yeoman
  • Using Grunt to speed up development and help perform repetitive tasks
  • Using Bower to add third party plugins/frameworks
  • Making minor changes to your AngularJS app

Prerequisites

To get the most out of this tutorial we recommend you have the following skills and resources available:

  • A terminal and basic knowledge of the command line
  • NodeJS and NPM installed
  • Fundamental JS, CSS and HTML knowledge

Files

You can find a repo of this tutorial project here.

Let’s get started yo!

Alright, let’s get this thing underway. The first thing you need to do is install Yeoman, Grunt and Bower. We’re going to use the Node Package Manager to do this all at once. In a terminal, run the following:

npm install -g yo grunt-cli bower

As simply as that, we now have a powerful set of tools at our disposal. I’ll explain each one as we use it.

Yeoman

Yeoman is used to generate the scaffolding of your app for you. It’ll create the basic folders, files and configurations to get you up and running quickly. Not only that but there are some great custom generators available to create apps of a particular kind – we’re going to use the nifty AngularJS generator.

One of the best features of Yeoman is the ability to use custom generators. We’re going to intall the AngularJS generator to help us get up and running with Angular as quick as possible.

Run the following to install the AngularJS generator:

npm install -g generator-angular

Now it’s time to generate a shiny new AngularJS application. In a fresh project directory, run:

yo angular 

The generator will ask you a couple of questions. You can answer yes to include Twitter’s bootstrap. Also answer yes to include ngResource. The rest we won’t need for now so answer no.

Sit back (for a few seconds) and watch the generator do its magic. Yeoman will create your files and folders, then it will run bower install (more on this in a moment) and npm install to fetch any dependencies and lastly it’ll perform any mandatory configuration.

What’s in the box?

Let’s take a look at what Yeoman’s given us:

  • .bowerrc
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .jshintrc
  • Gruntfile.js
  • app/
  • component.json
  • karma-e2e.conf.js
  • karma.conf.js
  • node_modules/
  • package.json
  • test/

Let’s go over some of the more important things to notice here:

app/ directory
The app directory contains your static app. It has your html, css and javascript in it and it’s where you’ll spend most of your time developing.
package.json
The package.json file helps npm to identify our project as well as to manage all of it’s dependencies. It can also contain all sorts of other metadata relevant to your project.
node_modules
This one is self explanatory. This is where all the node modules that your project depends on are stored.
Gruntfile.js
The Gruntfile is a javascript file that is responsible for configuring your project as well as any tasks or plugins that your project requires. For instance, your gruntfile might specify that your project uses Uglify and that you want it to run uglify on a particular directory at build time. More about Grunt in a moment.
component.json
The component.json file is used to inform the Bower package manager of your projects dependencies as well as other metadata. In recent versions of Bower this file is called bower.json – more on that in a moment.
.bowerrc
The .bowerrc file is used to pass general config options to bower.
Karma files
Karma is a testing framework. We’ll use it to run a few tests for our Angular app.

Phew! That’s quite a lot to take in – once you get more familiar with the output of a yeoman generator however, you’ll learn to love the fact that it handles all of this for you!

Let’s add a few more things to our project before we start get on to some actual development.

Bower – A package manager for the web

Before we use Bower, there’s a small bit of config we have to do ourselves. Bower recently changed their naming convention of component.json files to bower.json files so we need to bring our code base in line with that.

The first thing we need to do is make a small change to our Bower config in .bowerrc so open it up and add the following line:

  {
      "directory": "app/components",
      "json": "bower.json" // Add this line
  }

What this does, is it tells Bower to use a package’s bower.json file for instructions on how to install that package.

Since we’re using bower for our own project’s dependencies, we’ll need to rename the component.json file in our project root to bower.json as well. A small ask when using such cutting edge technologies :)

Bower
Bower is a package manager. It will help us to quickly find and install our favourite CSS frameworks, javascript libraries and plugins with just a few simple commands.

Ok, let’s give Bower a whirl. Yeoman kindly used bower to install Bootstrap for us earlier, but that was just the Bootstrap CSS. We want all the nifty Javascript widgets as well.

Since we’re building an AngularJS app, we’ll need Bootstrap javascript that works with Angular.

Luckily, the team over at Angular UI have ported all the Bootstrap Javascript into Angular!. Let’s use Bower to install their library.

bower install angular-bootstrap --save

The –save flag tells bower to add this to our bower.json file as a dependency

Fantastic! That was easy wasn’t it? Now, navigate into your app/ directory and let’s see what we’ve got to work with.

Our static app

Take a look at the contents of the app/ directory.

  • favicon.ico
  • index.html
  • robots.txt
  • components/
  • scripts/
  • styles/
  • views/

index.html
This should be familiar to most of you, this is the core html page of your app.
components/ directory
The components directory is like the node_modules directory but for Bower. It’s where all the packages you install with Bower will be kept. AngularUI Bootstrap, for instance, will be in there.
scripts/ directory
Again, familiar territory to most. This is where your apps javascript is stored. Note that libraries such as AngularJS will exist in the components directory, so scripts/ is for your files that you write!
styles/ directory
All your css/sass to make your app look moar pretty.
Views
This nifty folder is where your Angular Templates will reside.

Next up we’ll take a closer look at the AngularJS files

AngularJS

The Yeoman Angular generator has given us the bare essentials: A module, a controller and a view. Let’s take a look at each of those:

The Module: /app/scripts/app.js

  'use strict';
  // Here we set up an angular module. We'll attach controllers and 
  // other components to this module.
  angular.module('testApp', [])
    // Angular supports chaining, so here we chain the config function onto
    // the module we're configuring.
    .config(function ($routeProvider) {
 
      // We use AngularJS dependency injection to fetch the route provider.
      // The route provider is used to setup our app's routes. 

      // The config below simply says when you visit '/' it'll render
      // the views/main.html template controlled by the MainCtrl controller.

      // The otherwise method specifies what the app should do if it doesn't recognise 
      // the route entered by a user. In this case, redirect to home.
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    });

The Controller: /app/scripts/controllers/main.js

'use strict';

  // Here we attach this controller to our testApp module
  angular.module('testApp')
 
    // The controller function let's us give our controller a name: MainCtrl
    // We'll then pass an anonymous function to serve as the controller itself.
    .controller('MainCtrl', function ($scope) {
 
      // Using AngularJS dependency injection, we've injected the $scope variable
      // Anything we attach to scope will be available to us in the view.
 
      // In this case, we're attaching a collection of Awesome Things to display
      // in app/views/main.html
      $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
      ];
    });

The View: app/views/main.html

  <div class="hero-unit">
    <h1>'Allo, 'Allo!</h1>
    <p>You now have</p>
    <ul>
 
        <!-- Here we use the AngularJS directive: ng-repeat to loop through our awesomeThings 
        and print them out as list items using the {{}} bindings -->
        <li ng-repeat="thing in awesomeThings">{{thing}}</li>
    </ul>
    <p>installed.</p>
    <h3>Enjoy coding! - Yeoman</h3>
  </div>
[/js]
 
<strong>The Index File: app/index.html</strong>
1  <!doctype html>
  <html>
    <head>...</head>
    <!-- The ng-app directive tells angular which module we'll use
    for our app. In this case the one defined in scripts/app.js -->
    <body ng-app="testApp">
      ...
      <!-- The ng-view directive specifies that our templates
      (such as views/main.html) will be loaded into this div. -->
      <div class="container" ng-view></div>
 
      <!-- Here we load AngularJS and the AngularJS resource component -->
      <script src="components/angular/angular.js"></script>
      <script src="components/angular-resource/angular-resource.js"></script>
 
      <!-- Here we include our own angular scripts -->
      <!-- build:js scripts/scripts.js -->
      <script src="scripts/app.js"></script>
      <script src="scripts/controllers/main.js"></script>
      <!-- endbuild -->
 
      ...
    </body>
  </html>

Let’s see it in action!

We’re ready to take our first look at our application. Navigate back to the root directory of your app and run:

grunt server

Grunt
Grunt is a powerful, feature rich task runner for Javascript. In brief, it lets you automate repetitive tasks like compiling coffeescript, minifying css, code validation etc. We’ll be using it to do all of that as well as prepare our code for development and deployment.

Grunt is going to whip through our project folder and prepare everything for us such as compiling our included Bootstrap SASS down to css.

After a few seconds a browser window should pop up with your app running and looking all fancy.

Just to be sure, view the source of the page and take a look at the main.css file that’s included. It should be full of Bootstrap code – thanks to the magic of Bower and Grunt.

Let’s change it up

It’s about time to try our hand at making some changes. Since this is Angular, we’ll start with some AngularJS Testing.

Yeoman was kind enough to generate an example test for our controller, so let’s start there.

We’re going to add another thing to our list of awesome things so open test/spec/controllers/main.js and let’s change our test to expect 4 awesome things instead of 3:

test/spec/controllers/main.js

    'use strict';

    describe('Controller: MainCtrl', function () {
 
      // load the controller's module
      beforeEach(module('testApp'));
 
      var MainCtrl,
        scope;
 
      // Initialize the controller and a mock scope
      beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        MainCtrl = $controller('MainCtrl', {
          $scope: scope

        });
      }));

      it('should attach a list of awesomeThings to the scope', function () {
        // Change this line
        expect(scope.awesomeThings.length).toBe(3);
 
        // To this
        expect(scope.awesomeThings.length).toBe(4);
      });
    });

Now we can use another great feature of Grunt:

grunt test

This will run our Karma tests. They should fail because the test expects 4 awesomeThings and we still only have 3. Let’s go fix that to make our tests pass.

Open app/scripts/controllers/main.js and add another awesome thing to the list:

/app/scripts/controllers/main.js

    .controller('MainCtrl', function ($scope) {
      $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma',
        'SitePoint'
      ];
    });

Save the file and run the tests again:

grunt test

This time they should pass. Now you can fire up the app in your browser (grunt server) and notice that there’s an additional bullet point. Neat huh?

Using our Bower included package

Let’s use the AngularUI Bootstrap library that we included earlier to turn our list of awesomeThings into a dropdown of awesomeThings.

Important Since Bower is just a package manager, it’s not responsible for adding our files to our index.html file. We need to do that ourselves.

So open up app/index.html and add the following line:

<script src="components/angular-bootstrap/ui-bootstrap.js"></script>

Then, as per the Getting Started documentation on AngularUI Bootstrap’s site, we need to add their module as a dependency to our own Angular module

Open app/scripts/app.js and add the ui.bootstrap module as a dependency:

/app/scripts/app.js

  'use strict';
 
  angular.module('testApp', ['ui.bootstrap'])
  ...

Alright it’s ready to use. Now we need to make a few changes to our view:

The View: app/views/main.html

  <ul>
    <li class="dropdown">
      <a class="dropdown-toggle">
        Click me to see some awesome things!
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="thing in awesomeThings">
          <a>{{thing}}</a>
        </li>
      </ul>
    </li>
  </ul>

We’ve used some bootstrap css classes, and moved our ng-repeat to create menu items instead of just a plain old list.

AngularUI Bootstrap directives work on classes, so simply by adding the dropdown-toggle class to our tag we’ll have a fully functioning dropdown!

We will need to add the Bootstrap UI module to our tests otherwise they’ll fail so make the following changes:

test/spec/controllers/main.js

    'use strict';
 
    describe('Controller: MainCtrl', function () {
 
      // load the controller's module
      beforeEach(module('testApp'));
      // load the BootstrapUI module
      beforeEach(module('ui.bootstrap')); // Add this line
     ...
    });

/karma.conf.js

  // Karma configuration
 
  // base path, that will be used to resolve files and exclude
  basePath = '';
 
  // list of files / patterns to load in the browser
  files = [
    JASMINE,
    JASMINE_ADAPTER,
    'app/components/angular/angular.js',
    'app/components/angular-mocks/angular-mocks.js',
    'app/components/angular-bootstrap/ui-bootstrap.js', // Add this line
    'app/scripts/*.js',
    ...

Run grunt test to make sure everything passes

Now you can open up your app in the browser (grunt server) once more and take a look at your handy work.

Conclusion

Well there you have it! A simple Angular App, a third party JS library, some tests, minification and a whole heap of other goodies with minimal effort!

We’ve only scratched the surface of what’s possible with Yeoman and its fellows – but I hope this will inspire you to whip up a quick AngularJS app the next time you have a great idea!

Look out for more AnuglarJS tutorials and articles on AngularJS best practices coming soon!

Comments on this article are closed. Have a question about AngularJS? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Addy Osmani

    Note that you can now just ‘npm install generator-angular -g’ and it will install Yo/Grunt/Bower for you along with the generator :)

  • Anonymous

    Thanks for the great article, i have a little problem , i followed all steps but i didn’t get the directory ( app/components) , i tried several time but always the same problem, can you help on this ?

  • Anonymous

    @hlagrid It’s now called bower_components. Refer to that in the

  • Anonymous

    Thanks @addyosmani I am always impressed with how development of these tools continues to move at such a rapid pace.

    Likewise, @Lucas, thanks for picking up on that change – one of the downsides (if you can call it that) of working with such cutting edge frameworks/tools is that they don’t stop moving for 1 moment, good thing the SitePoint community is on top of it :)

    I look forward to hearing more people’s experiences/opinions of these great tools :)

  • ashish

    also getting Warning: Running “compass:server” (compass) task
    Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use –force to continue.

    • someone

      Compiling Compass requires Sass executable, which is a Ruby app.
      Install RVM, then run `gem install compass`.

  • VCN

    Nice article.
    How can I config the test to report the % coverage and config the % threshold for branches / lines / functions … ?
    Thanks.

  • Anonymous

    Note that you have to have git installed for bower to work. I would usually have that, but I had just reinstalled OS so ran into the shortfall. A good reminder for me to install git.

  • amolp1709

    how to add e2e for this project ?

  • windk

    Thanks a lot.
    A very nice article.

  • jhr

    @ashish Compiling the boostrap css from sass is optional, and something I wasted a lot clock cycles on and never used :)

    Some of my favorite commands:
    yo angular:route login

    Lots of libraries: ngmodules.org Especially Restangular & ngStorage
    Lots of videos on youtube, highly recommend: promises promises

  • Habu

    When trying to run grunt test it gives this error or warning or whatever “Warning: Task “karma” not found. Use –force to continue.” Whats the problem?

  • Davide Moro

    Hi, great article, thanks!

    I have a problem declaring the ui.bootstrap dependency and I wasn’t able to find a solution on google.
    When I add the ui.bootstrap module as a dependency in /app/scripts/app.js I get this error:
    Open app/scripts/app.js and add the ui.bootstrap module as a dependency: /app/scripts/app.js
    Error: [$injector:modulerr] Failed to instantiate module expressAngularApp due to: [$injector:unpr] Unknown provider: $routeProvider

    Any idea? Thanks in advance

    • Anonymous

      Hi David. I have to say I don’t immediately recognise that error pattern. It seems however that the module you’re including is throwing an Unknown Provider error and so angular won’t instantiate it in the context of your own app.

      The UI Bootstrap code is pretty reliable however so that seems a bit odd. Do you / could you put your code in a public git repo so I can see it?

      • Davide Moro

        Hi, it was my fault: I didn’t notice I’ve updated the angular version!

        Anyway, I need more practice with bower :) Thank you!

    • Anonymous

      Habu, see this recently opened Github issue: https://github.com/yeoman/generator-angular/issues/323 These projects are hot right now and keep changing so it’s a bit of an effort to keep up but rest assured there are some of the best minds in Javascript/Front End land working on them tirelessly.

  • Lucas Falor

    I’ve run into a couple of issues while following the steps.
    bower install angular-bootstrap –save – When I run this, I get an error with the path from github. I created a /components directory in my app, and downloaded the angular.js manually, I added the path to the file in bower.json using the “main” property. Not sure if this will work.
    When I run “grunt server”, I get a warning because I don’t have Ruby and Compass installed. If these are required, shouldn’t these be listed as ‘prerequisites’ ? Can I use npm or bower to install Ruby and Compass, or do I need to download and install these? Full-disclosure, I work in a corporate environment and I don’t have much experience with any of these frameworks. The challenge I face is that learning one usually involves learning several others. Overwhelmed, and tight on time, I usually just give up and go back to what I already know, which is sadly becoming less and less every day.

    • Anonymous

      lucas, try using “grunt server –force”

  • Lucas Falor

    Great article, thanks for posting

  • Anonymous

    I’m having a problem with the testing side of this tutorial. I’ve added my Chrome path into the 2 karma files and also added a CHROME_BIN application variable, but ‘grunt test’ still fails.

    ERROR [launcher]: Cannot start C:/Program Files….chrome.exe

    It loads up three new Chrome tabs, but none of them connect.

    Any clue as to how to fix this? The testing part is the best part!

  • Vishal Rathod

    I am getting following error when I started grunt test command.

    Running “watch” task
    Waiting…
    C:UsersvrathodDocumentsLearningAngularJsyeomanweb
    ode_modulesgrunt-google
    -cdn
    ode_modulesower
    ode_modules mplib mp.js:261
    throw err;
    ^
    Error: watch EPERM
    at errnoException (fs.js:1019:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1037:26)

  • hoeni

    Thank you so much for that great starting point to angular!

  • MarioW

    Thx for the nice roundup intro.

    I ran your tutorial with the the recent version of yeoman (v1.0.4), npm (1.3.13) …
    And had to adapt some areas in order to get it working:

    Bower: no renaming of `component.json` to `bower.json` needed – comes out of the box.
    The module `ui.bootstrap` required in `index.html` must be referenced as ``
    same applies to the
    `karma.config.js` use path ‘app/bower_components/angular-bootstrap/ui-bootstrap.js’ to get the test running otherwise you will see the following error:

    `Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
    Error: No module: ui.bootstrap
    at Error ()

    TypeError: Cannot read property ‘awesomeThings’ of undefined
    at null.
    (/Users/splosch/code/krautli_yo/test/spec/controllers/main.js:23:17)`

    But as you said small tradeoff for some nice “get it running” boost.

  • http://www.facebook.com/scottsilvi Scott Silvi

    Great article, thanks. I actually used this project as the basis for a talk I gave at the JavascriptMN meetup group to about 75 people. Flowed really well, and is a great intro into the power of Yo/Grunt/Bower. Thanks!

  • Jan Boden

    Great article to start with, thanks!

  • atlbiker

    When try and just initialize my angular app (yo angular) it hangs and prompts me for a choice without suppling any context.

    “`
    grunt-contrib-imagemin@0.3.0 node_modules/grunt-contrib-imagemin
    ├── filesize@1.10.0
    ├── chalk@0.2.1 (ansi-styles@0.2.0, has-color@0.1.1)
    ├── pngquant-bin@0.1.5 (bin-wrapper@0.1.7)
    ├── optipng-bin@0.3.1 (bin-wrapper@0.1.7)
    ├── gifsicle@0.1.4 (bin-wrapper@0.1.7)
    └── jpegtran-bin@0.2.2 (bin-wrapper@0.1.7)

    [?] Answer:
    >> Invalid choice

    “`

    Any thoughts? If i type 1 and enter it will finish, but I’m curious whats going on. What am I choosing?

    Thanks