AngularJS: Adding Dependencies

by

at 2013-05-30 07:00:00

original http://feedproxy.google.com/~r/dailyjs/~3/jjiDymnwJ5U/angularjs-6

Adding Dependencies with Bower

This tutorial is really about Yeoman, Bower, and Grunt, because I still feel like it’s worth exploring the build system that I introduced for this AngularJS project. I appreciate that the number of files installed by Yeoman is a little bit bewildering, so we’re going to take a step back from AngularJS and look at how dependencies work and how to add new dependencies to a project.

Although Yeoman helps get a new project off the ground, it takes a fair amount of digging to figure out how everything is laid out. For example: let’s say we want to add sass-bootstrap to djsreader – how exactly do we do this?

Yeoman uses Bower for managing dependencies, and Bower uses component.json (or bower.json by default in newer versions). To add sass-bootstrap to the project, open component.json and add "sass-bootstrap": "2.3.x" to the dependencies property:

{
  "name": "djsreader",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.5",
    "json3": "~3.2.4",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.5",
    "angular-cookies": "~1.0.5",
    "angular-sanitize": "~1.0.5",
    "sass-bootstrap": "2.3.x"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.5",
    "angular-scenario": "~1.0.5"
  }
}

Next run bower install to install the dependencies to app/components. If you look inside app/components you should see sass-bootstrap in there.

Now the package is installed, how do we actually use it with our project? The easiest way is to create a suitable Grunt task.

Grunt

Grunt runs the djsreader development server and compiles production builds that can be dropped onto a web server. Gruntfile.js is mostly configuration – it has the various settings needed to drive Grunt tasks so they can build our project. One task is compass – if you search the file for compass you should see a property that defines some options for compiling Sass files.

The convention for Grunt task configuration is taskName: { argument: options }. We want to add a new argument to the compass task for building the Bootstrap Sass files. We know the files are in app/components/sass-bootstrap, so we just need to tell it to compile the files in there.

Add a new property to compass called bootstrap. It should be on line 143:

compass: {
  // options/dist/server
  bootstrap: {
    options: {
      sassDir: '<%= yeoman.app %>/components/sass-bootstrap/lib',
      cssDir: '.tmp/styles'
    }
  }
}

Near the bottom of the file add an entry for compass:bootstrap to grunt.registerTask('server', [ and grunt.registerTask('build', [:

grunt.registerTask('server', [
  'clean:server',
  'coffee:dist',
  'compass:server',
  'compass:bootstrap', /* This one! */
  'livereload-start',
  'connect:livereload',
  'open',
  'watch'
]);

This causes the Bootstrap .scss files to be compiled whenever a server is started.

Now open app/index.html and add styles/bootstrap.css:

<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">

Conclusion

Angular/Bootstrap

The settings files Yeoman created for us makes managing dependencies easy – there’s a world of cool things you can find with bower search and try out.

This week’s code is in commit 005d1be.

Google Reader