Manage your project dependencies using Bower

Let’s continue our tour on Yeoman.

• Setup Yeoman in Windows PowerShell
• Build a AngularJS webapp using Yeoman

Bower is a tool to manage your js dependencies of your project. you can find out all the dependencies on the bower.json. The bower.json below is the one initialized in the AngularJS project.

{
  "name": "eureka",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.7",
    "json3": "~3.2.4",
    "jquery": "~1.9.1",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.7",
    "angular-cookies": "~1.0.7",
    "angular-sanitize": "~1.0.7",
    "jqueryjs": "~1.8.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.7",
    "angular-scenario": "~1.0.7"
  }
}

1. Search for the available js libraries. For example, jQuery Cycle Plugin

bower search jquery-cycle

Image may be NSFW.
Clik here to view.
 

2. Install the plugin and save the config in the bower.json.

bower install jquery-cycle --save

Image may be NSFW.
Clik here to view.
 

5. If you want to add the js lib as a devDependencies, use the following command instead.

bower install jquery-cycle --save-dev

5. Check your bower.json again.

{
  "name": "eureka",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.7",
    "json3": "~3.2.4",
    "jquery": "~1.9.1",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.7",
    "angular-cookies": "~1.0.7",
    "angular-sanitize": "~1.0.7",
    "jquery-cycle": "*"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.7",
    "angular-scenario": "~1.0.7"
  }
}

5. Include the jQuery Cycle Plugin in the .html by adding the following script tag.

<script src="bower_components/jquery-cycle/jquery.cycle.lite.js"></script>

Done =)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.