Bower with Bootstrap 3 - angularjs

Question

Trying out Yeoman (1.0.4). Generated an Angular app with yo angular; entered No to installing Bootstrap with Sass, as I wanted Bootstrap v 3 with LESS.
After scaffolding, to get Bootstrap 3, I entered:
bower install bootstrap
That installed bootstrap into bower_components/bootstrap folder. But it did not link/include Bootstrap's CSS or JS in index.html file. Why?
The index.html file does have Angular js files from bower_components folder:
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbuild -->
But not bootstrap files. Why? Do I have to add/link to them manually? What am I doing wrong? How can I add Bootstrap after generating a scaffold for my app?

Answer 1

According to yeoman's Getting Started guide:
# Install it and save it to bower.json
>bower install jquery-pjax --save
# If you're not using RequireJS...
>grunt bower-install
This is supposed to inject your dependencies into your index.html file.
Note:
There is some setting up that needs to be done, before being able to use bower-install.
See, here for more details.

Answer 2

You must edit the index.html. Yeoman generator builds the base index.html. Bower only downloads dependencies as packages... but that's all, it doesn't know anything else about your app and how are you going to use the packages it downloaded. You must add the desired files by yourself.

Answer 3

With https://github.com/stephenplusplus/grunt-bower-install, if you have the following in your index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then bower install will add the vendor files to your html whenever it runs. Otherwise, yes.

Answer 4

Using yeoman, you install dependencies with the --save flag to update the bower.json file.
After that, you run $ bower update(optional) and do a $ grunt wiredepto inject the dependencies into your index.html.
If you look at the comments in your index.html generated by Yeoman, you will see something like:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
It is within those comments that the dependencies will be injected

Answer 5

Wiredep does it without depending on Grunt or any other build tool: https://github.com/taptapship/wiredep
npm install --save wiredep
Insert placeholders in your code where your dependencies will be injected:
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
Let wiredep work its magic:
$ node
> require('wiredep')({ src: 'index.html' });
Since Bootstrap version 3.3.5, the bootstrap.css file has been removed from Bootstrap's package manager json. Thus, I had to roll back to version 3.3.4 before running wiredep.
bower install --save bootstrap#3.3.4