One of my favorite tools for building Angular apps is Wiredep. Manually including javascript and CSS dependencies into an HTML file can be a pain.

It’s not that big of a deal, really, but figuring out which files a bower package provides, remembering their paths, and typing them into the right spot in the right file can break you out of your flow state in a hurry.

Assuming you’re already using bower to manage your dependencies, it will probably take less time to get wiredep up and running than it would to set up another dependency without it.

First, install wiredep:

npm install --save-dev wiredep

Next, edit your top-level html file to tell wiredep to put the dependencies:

<!doctype html>
<html>
  <head>
    <title>My awesome app</title>
    <!-- bower:css -->
    <!-- endbower -->
  </head>
  <body ng-app="awesomeness">
    ...
    <!-- bower:js -->
    <!-- endbower -->
  </body>
</html>

Now run the following:

wiredep -s [path/to/top-level-html]

Wiredep will insert all the CSS and javascript include tags for the files provided by your installed packages:

<!doctype html>
<html>
  <head>
    <title>My awesome app</title>
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/coolthing/dist/coolthing.css" />
    <!-- endbower -->
  </head>
  <body ng-app="awesomeness">
    ...
    <!-- bower:js -->
    <script src="bower_components/coolthing/dist/coolthing.js"></script>
    <!-- endbower -->
  </body>
</html>

Rerun the command each time you install a package with bower instead of manually adding the includes.

Be sure to keep any non-bower includes outside the bower/endbower sections or they will be clobbered next time you run wiredep.

For bonus points, add a Grunt task so you can just type grunt wiredep . With grunt-wiredep, there’s even a way to update your karma.conf.js too.