Wire Up Your Dependencies With Wiredep

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:

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

Now run the following:

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

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.

About Alexander

Alexander has been programming for a very long time. When he met Ruby, it was love at first sight.
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Wire Up Your Dependencies With Wiredep

  1. Agos says:

    i prefer bindep . There are meny cases in which you can t inject with wiredep and with simple bower you can define all the info necessary for injecting.
    bindep extends bower overcoming the limits in bower.

    npm install -g bindep

Leave a Reply

Your email address will not be published. Required fields are marked *