Bootstrap Bauer 3

Question

An attempt by Joman (1.0.4). Generated Angular application with yo angular ; introduced No to install Bootstrap with Sass, since I need Bootstrap v 3 with LESS.

After scaffolding, to get Bootstrap 3, I entered:

bower install bootstrap

Installed the download in the bower_components/bootstrap folder. But he did not link / include Bootstrap CSS or JS in the index.html file. Why?

The index.html file contains Angular js files from the 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 boot files. What for? Should I add / link to them manually? What am I doing wrong? How to add Bootstrap after creating a scaffold for my application?

Answer 1

You have to edit index.html. The Yeoman generator builds the base index.html. Bower only downloads dependencies as packages ... but that’s all, it knows nothing about your application and how you are going to use the packages it loads. You must add the necessary files yourself.

Answer 2

According to yoman 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 

It is supposed to introduce your dependencies into your index.html file.

---

<sub> Note :
There is some tweaking that needs to be done before using bower-install .
See here for more details. Sub>

Answer 3

From https://github.com/stephenplusplus/grunt-bower-install if in your index.html

there is the following:

 <!-- 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 installing bower will add the provider files to your html whenever it starts. Otherwise, yes.

Answer 4

Using yoman, you install dependencies with the --save flag to update the bower.json file.

After that, you run $ bower update (optional) and run $ grunt wiredep to enter the dependencies in your index.html .

If you look at the comments in your index.html created 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 --> 

Dependencies will be introduced in these comments

Answer 5

Wiredep does this without dependence on Grunt or any other build tool: https://github.com/taptapship/wiredep

npm install --save wiredep

Paste the placeholders in your code into which your dependencies will be inserted:

 <html> <head> <!-- bower:css --> <!-- endbower --> </head> <body> <!-- bower:js --> <!-- endbower --> </body> </html> 

Let wiredep work with magic:

 $ node > require('wiredep')({ src: 'index.html' }); 

Starting with Bootstrap version 3.3.5, the bootstrap.css file has been removed from the Bootstrap json package manager. Thus, before starting wiredep I had to return to version 3.3.4 .

 bower install --save bootstrap#3.3.4